This page pretends to be a company intranet. Everything below is a real, live
Forge Studio editor running in an <iframe> — view source on this file to copy the patterns.
← Back to the Forge Studio documentation · this demo is embed-demo.html in the project root.
One iframe tag, nothing else. embed=1 hides the app chrome,
view=1 disables editing, src= auto-loads the file.
<iframe src="sheet.html?embed=1&view=1&src=samples/demo-data.csv"
style="width:100%; height:320px; border:0"></iframe>
The host page pushes content in with forge:load and pulls the
edited file back out with forge:export — the user never leaves your site.
// wait for the editor to say hello window.addEventListener('message', e => { if (e.data.type === 'forge:ready') editorIsReady(); if (e.data.type === 'forge:document') saveBase64Docx(e.data); // {format, name, data} }); // push content in (html / txt / base64 docx)… frame.postMessage({ type: 'forge:load', format: 'html', data: '<h1>Hi</h1>' }, '*'); // …and ask for the edited .docx back frame.postMessage({ type: 'forge:export' }, '*');
Same pattern for PDFs. Drop view=1 to let visitors annotate.
<iframe src="pdf.html?embed=1&view=1&src=samples/sample.pdf"
style="width:100%; height:480px; border:0"></iframe>
The editor GETs savepath on load (round-trip) and POSTs the
.docx to it on save — the path carries your user's identity and your server
authorizes it. Here the "server" is a demo store living in your browser's service
worker, so this page needs no backend. Type something, hit the 💾 chip (or the button
below), then reload the frame — the doc comes back.
<iframe src="word.html?embed=1&savepath=/demo-store/user42/report.docx"></iframe> // host-commanded save + result frame.postMessage({ type: 'forge:save' }, '*'); // ← { type:'forge:saved', ok:true, status:200 } // turn on client-side encryption (AES-GCM) — server stores ciphertext only frame.postMessage({ type: 'forge:config', encrypt: true, passphrase: 'demo-pass' }, '*');
· Host the Forge Studio folder anywhere static files can be served (same origin as your page, or any origin — the iframe just needs the URL).
· Make sure your server doesn't send an X-Frame-Options header that blocks framing.
· src= URLs must be same-origin with the editor or CORS-accessible.
· Formats: DocForge loads docx/html/txt, exports docx · SheetForge loads xlsx/csv, exports xlsx · PDFForge loads & exports pdf. Binary payloads are base64 strings.