Developers · Embed

Embed a Document Editor in Your Web App

Add a DOCX, XLSX, PPTX and CSV editor to your product with a single iframe and a postMessage API. Your app keeps auth, file access and upload — the editor just edits, and never sees your users' tokens.

The editor runs entirely in the browser with the OnlyOffice WebAssembly engine, so documents are rendered and edited on the client — you don't stand up a document server. The recommended pattern keeps a clean boundary: the parent app handles authentication, fetching and saving; the iframe handles editing only. Tokens, cookies and business APIs stay in your app.

Add it with one iframe

<iframe
  id="documentEditor"
  src="https://edit.chaxus.com/?embed=1&embedOrigin=https://your-app.example.com"
  style="width: 100%; height: 720px; border: 0"
></iframe>

Then talk to it over postMessage. Every command takes an id so you can match it to the reply, and every editor event is a document:* message:

// open a file your app already fetched (auth stays with you)
iframe.contentWindow.postMessage(
  { id, type: 'document:open-buffer', payload: { fileName: 'report.xlsx', buffer } },
  'https://edit.chaxus.com'
);

// ask for the edited file back, then upload it yourself
iframe.contentWindow.postMessage({ id, type: 'document:save', payload: { targetExt: 'XLSX' } }, editorOrigin);
// → editor replies with { type: 'document:saved', payload: { fileName, file } }

What you get

• One iframe + a small postMessage command/response API — no SDK to install
• Open from a URL, a File, or an ArrayBuffer your app fetched with its own credentials
• Save back to XLSX, DOCX, PPTX or CSV, returned as a File for your app to upload
• Read-only mode, per-message origin locking (embedOrigin), and a state query
• No document server to run — editing is 100% client-side WebAssembly
• Open source (AGPL-3.0) and self-hostable — embed it under your own domain

How it works

1. Add the iframe pointing at the editor with ?embed=1, sized to your layout.
2. Wait for the document:ready event, then send document:open-url, open-file or open-buffer.
3. The user edits in place; the file never leaves the browser unless your app sends it somewhere.
4. Send document:save; the editor returns the edited file via document:saved, which your app uploads with its own auth.

Frequently asked questions