Forge Studio editors, embedded in another website

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.

1 · Read-only spreadsheet viewer

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>

2 · Editable document with host-page control

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' }, '*');

Host page controls:

waiting for messages…

3 · PDF viewer (read-only) and editor

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>

Notes for your own site

· 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.