Web

1. InstallCopy Anchor Link

The package, @pdfsdk/editor, comes with your license as an npm tarball. Install it like any local package:

npm install ./pdfsdk-editor-2.4.1.tgz

It contains the TypeScript API (dist/, with type declarations) and the engine (public/wasm/pdfeditor.js and pdfeditor.wasm, about 9.6 MB). Copy the wasm/ folder to a path your site serves — by default the editor looks for it at ./wasm/ relative to the page — or pass wasmUrl to point elsewhere.

2. Serve it cross-origin isolatedCopy Anchor Link

The engine runs its rendering work on real threads, which needs SharedArrayBuffer. Browsers only allow that on a page that is cross-origin isolated: served over HTTPS (or localhost) with both of these headers on the page and its subresources.

Cross-Origin-Opener-Policy:   same-origin
Cross-Origin-Embedder-Policy: require-corp

Without them PDFEditor.create rejects with an error that says so. Scope the headers to the page that hosts the editor if the rest of your site loads third-party resources — require-corp blocks any cross-origin resource that does not opt in.

# _headers (Netlify / Cloudflare Pages) — isolate only the editor's path
/editor/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

Serve .wasm as application/wasm, compressed: brotli cuts the download to about a third, gzip to about 40%.

3. Create an editor and open a PDFCopy Anchor Link

import { PDFEditor, PDFOpenError, PDFLicenseError } from '@pdfsdk/editor';

const canvas = document.querySelector('canvas')!;
const editor = await PDFEditor.create(canvas, {
  licenseKey: 'PE1.eyJ2Ijox…',   // issued for this site's domain
  wasmUrl: '/static/wasm/',        // where pdfeditor.js / .wasm are served (default './wasm/')
  minZoom: 0.5,
});

const bytes = new Uint8Array(await file.arrayBuffer());
try {
  editor.open(bytes);
} catch (err) {
  if (err instanceof PDFOpenError && err.reason === 'password') {
    editor.open(bytes, 0, await askForPassword());
  } else throw err;
}

Size the canvas with CSS; the editor follows it (a ResizeObserver rebuilds the drawing buffer when the element settles). Pointer, wheel and pinch input are handled for you, and holding Space pans. The rest of the keyboard is yours to route, because only your page knows what has focus: call typeText() and backspace() while isEditing, formKey() while a form field has focus, and bind your own shortcuts to undo(), redo(), deleteSelection() and the rest.

4. Tools and propertiesCopy Anchor Link

The editor is a canvas, not a toolbar — you build the chrome and drive it through the API.

editor.tool = 'highlight';            // arm a tool: 'select', 'text', 'image', 'freehand', 'rect', …
editor.addEventListener('selectionchange', (e) => {
  const { selected, props } = (e as CustomEvent).detail;
  // props: kind, colours, font, size, opacity… — enough to render a properties panel
});
editor.setFillColor(0x0a84ffff);      // colours are 0xRRGGBBAA
editor.setTextStyle(true, null);      // bold on; leave italic as each run has it
editor.undo();

Events the editor dispatches:

Look and feelCopy Anchor Link

Because the chrome is yours, so is its styling, language and layout. What the engine itself draws is set through these calls. Each one holds for the editor's lifetime, across every open():

Coming from iOS or AndroidCopy Anchor Link

The iOS and Android editors ship their own toolbars, so they take a configuration that narrows and restyles them. On the web the toolbar is yours, so most of those options are simply how you build it. The ones that reach what the engine draws are the calls above:

5. SaveCopy Anchor Link

const out = editor.save();   // Uint8Array — a complete PDF, or null on failure
if (out) await upload(new Blob([out], { type: 'application/pdf' }));

Edits are written as real PDF objects. An encrypted document is saved encrypted with the password it was opened with. save() always writes a complete new file, which invalidates an existing digital signature even if nothing was edited — if the user made no changes, keep the original bytes. signDocument appends an incremental update instead, so earlier signatures survive it.

License keyCopy Anchor Link

Pass licenseKey to create, or await PDFEditor.setLicenseKey(key, { wasmUrl }) once before the first editor — it loads the engine, so give it the same wasmUrl. Without a valid key for the page's domain, create and open throw PDFLicenseError, whose license.reason says why.

try {
  await PDFEditor.create(canvas, { licenseKey });
} catch (err) {
  if (err instanceof PDFLicenseError) console.error(err.license.status, err.license.reason);
}

Keys, domains, wildcards and development hosts: License keys.

Edit documents from codeCopy Anchor Link

Everything a user can do in the editor can be done from code, with no UI: read every layer of a page and its properties, replace text in any script (the layer keeps its font, size, colour and position, and the system's fonts fill in letters its font lacks), restyle, move, resize, rotate and restack layers, add text, images and shapes, mark text up, fill and author forms, edit metadata and pages, search, render a page, and save.

A layer is addressed by its page and an id that keeps naming it while other layers change. Geometry is in page points from the page's top-left corner. Each change is one undo step.

import { PDFDocumentEditor } from '@pdfsdk/editor';

const doc = await PDFDocumentEditor.open(bytes);
for (const block of doc.textBlocks(0)) {
  const text = await translate(block.text ?? '');
  doc.setText(block, text, { shrinkToFit: true });
}
const edited = doc.save();

editor.document is the document an editor is showing: changes appear at once and the user can undo them. Failures throw PDFDocumentError; notFound means the layer is gone, so read the layers again.

The web SDK draws no words of its own (your page builds the toolbar), apart from a new text box's starting text: editor.setNewTextPlaceholder('पाठ').

Digital signaturesCopy Anchor Link

import { createDigitalId, loadDigitalId, signDocument, verifySignatures } from '@pdfsdk/editor';

const id = await loadDigitalId() ?? await createDigitalId({ name: 'Ada Lovelace', organization: 'Acme' });
const { bytes } = await signDocument(editor, pdf, id, {
  reason: 'I approve this document',
  placement: 'bottom-right',
  pageIndex: editor.activePage,
  pageSize: editor.pageSizePoints(editor.activePage)!,
});
for (const s of await verifySignatures(editor, bytes!)) console.log(s.summary);

The Digital ID is RSA-2048 with a non-extractable private key kept in IndexedDB. Signatures prove the document was not modified after signing; they are self-signed, not a qualified electronic signature.

Browser supportCopy Anchor Link

The engine needs WebAssembly threads, WebGL2 and SharedArrayBuffer on an isolated page. The automated test suites run in current Chrome at desktop and phone sizes, and Safari is used in development; other browsers with those features should work but are not part of the test matrix yet. If your font picker offers the user's installed fonts through the browser's queryLocalFonts, note that only Chromium has it; elsewhere, let the user upload a TTF or OTF and pass its bytes to setFontData.

TroubleshootingCopy Anchor Link

Every method: Web API reference.