PdfCanvas
IT

The complete editor UI

pdfcanvas/editor is the same shell used on this site: a toolbar, a page rail, a property inspector, a signature dialog, templates and autosave. One import, no stylesheet to forget.

Open the PDF editorLast updated:

Mount it

import { PdfCanvasEditor } from "pdfcanvas/editor";

const editor = new PdfCanvasEditor(document.querySelector("#app")!, {
  workerSrc: "/pdfjs/pdf.worker.min.mjs",
  pdfiumWasmUrl: "/pdfium/pdfium.wasm",
  fontAssetsUrl: "/fonts/",
  locale: "auto",
  brandName: "Your product",
  brandHref: "/",
  brandTarget: "_self",
  sampleUrl: "/sample.pdf",
  autosave: { key: "contracts", debounce: 600 },
});

await editor.ready();
await editor.open(file);

Options

OptionPurpose
localeauto, en or it. Auto follows the browser.
brandName / brandHrefHeader label and link.
brandTarget_blank or _self.
sampleUrlEnables the sample document button.
autosaveIndexedDB key and debounce.
templatesOmit for the bundled set, or pass your own.

Editor API

await editor.open(source, "name.pdf");
await editor.download();
await editor.ready();
await editor.applyTemplate(template);
editor.registerTemplate(template);

editor.core;   // the PdfCanvas instance
editor.destroy();

Autosave and templates

Autosave stores the original PDF bytes and the scene in IndexedDB. Nothing is uploaded. Use a distinct key per document, and call destroy() to release listeners and DOM.

Templates are objects positioned in PDF points from the top-left of the page. Text objects accept text, fontSize, fontFamily, bold, italic and colour; shapes accept shape, width, height, fill, stroke and strokeWidth.

Styling

The CSS is injected on first mount. When fontAssetsUrl points at the packaged assets/fonts folder, the editor loads its bundled Space Grotesk and Fraunces files and looks like the hosted version. Otherwise it falls back to system fonts.

Frequently asked questions

+Can I localise the UI further?

English and Italian are built in. Other languages require editing the label table in the source; it is a plain object, not a runtime translation system.

+Can I hide parts of the UI?

The shell is one component. For a different layout, use the core engine and build your own toolbar; that is what the editor does internally.

+Is autosave optional?

Yes. Omit the autosave option and nothing is written to IndexedDB.

+How do I clean up?

Call editor.destroy() when the container unmounts. It removes listeners, workers and injected DOM.

Related pages