How to Embed a PDF Editor in Your Website (iframe Guide)

If you run a SaaS product, client portal, document workflow tool, or internal admin panel, you may want users to create fillable PDFs without leaving your application. The simplest way to do that is to embed a PDF editor in an iframe.

PDF to Fillable offers a free embed route that any website can iframe — no API key, no allowlist, and no per-seat licensing.

Why embed a PDF editor?

Embedding makes sense when:

• Your users already work inside your platform and should not switch to an external tool
• You want PDF form creation as a feature, not your entire product
• You need a quick integration without building a PDF engine from scratch
• You want to capture exported PDFs in your own backend via JavaScript events

Building a PDF form editor from scratch requires PDF rendering, coordinate mapping, AcroForm export, and font embedding. An iframe embed gives you a working editor in minutes.

The embed URL

Use the dedicated embed route:

https://your-domain.com/embed

Locally during development:

http://localhost:3000/embed

Do not use /editor for third-party embeds. The /embed route is optimized for iframe use with a full-height layout and parent-page communication via postMessage.

Basic iframe code

<iframe
  src="https://your-domain.com/embed"
  title="PDF to Fillable"
  width="100%"
  height="720"
  style="border:0;border-radius:12px;"
  allow="clipboard-write"
></iframe>

Set the iframe height to at least 720px (or use 100vh inside a flex container) so the editor toolbar, canvas, and sidebar all fit comfortably.

Listening for events from the editor

When embedded, the editor sends events to the parent window using postMessage. This lets your application react when a user loads a PDF or exports a finished form.

window.addEventListener("message", (event) => {
  // In production, verify event.origin matches your editor domain
  if (event.data?.source !== "pdftofillable") return;

  switch (event.data.type) {
    case "ready":
      console.log("Editor is ready");
      break;

    case "pdf-loaded":
      console.log("User uploaded:", event.data.payload.fileName);
      break;

    case "export": {
      const { fileName, dataBase64 } = event.data.payload;
      const bytes = Uint8Array.from(atob(dataBase64), (c) => c.charCodeAt(0));
      const blob = new Blob([bytes], { type: "application/pdf" });

      // Upload to your backend, save to storage, or trigger a download
      break;
    }

    case "export-error":
      console.error(event.data.payload.message);
      break;
  }
});

Event reference

Event	When it fires	Payload
ready	Editor loaded in iframe	none
pdf-loaded	User uploaded a PDF	fileName, pageCount
export	User clicked Export PDF	fileName, dataBase64, mimeType
export-error	Export failed	message

The export event includes the finished PDF as a base64 string so your application can upload it to your server, attach it to a record, or offer a download — all without the user manually saving a file.

Test your integration

Use the built-in test page to verify iframe embedding and event handling:

http://localhost:3000/test-embed

This page embeds /embed and logs all postMessage events in a sidebar so you can confirm everything works before deploying.

Embedding policy

The embed route is open to all websites. Any origin can iframe /embed without requesting access. The route sends a Content-Security-Policy header with frame-ancestors * to allow embedding from any parent page.

If you later want to restrict embedding to specific domains, you can configure that at the server level — but the default is fully open.

Integration patterns

Document workflow SaaS

Embed the editor on a "Create form template" page. When the user exports, listen for the export event and save the PDF to your storage bucket, then attach it to the customer's template library.

Client portal

Let clients customize intake forms without sending them to an external PDF tool. The iframe keeps them inside your branded experience.

Internal tools

HR, operations, or compliance teams can build forms inside your internal admin panel. The postMessage export event feeds directly into your document management system.

Styling tips

• Wrap the iframe in a container with a border and border-radius to match your UI
• Use width="100%" for responsive layouts
• On mobile, consider full-screen modal with height="100vh" for usable canvas space
• Match your page background to the editor's light theme (#fafafa / zinc-50) for a seamless look

Privacy note for your users

PDF to Fillable processes files locally in the browser during editing. When you embed the editor, make sure your privacy policy explains that PDF creation happens client-side, and clarify what your application does with exported files received via the export event.

Related guides

• How to make a fillable PDF
• Free PDF form creator

Get started

Try the embed route directly, or open the test embed page to see events in action. When you are ready, drop the iframe into your application and wire up the message listener for exports.