Live examples

The reference editor

Open a .docx, format text (bold / italic / underline / strikethrough), change paragraph styles, undo/redo, copy/cut/paste, and export — with the page rendered by the SDK and the caret/selection read back live. Needs a WebGPU browser; on Linux/Wayland run Chrome under XWayland (see Troubleshooting).

Not loading? The demo is deployed separately from these docs. Build it with bun run build in examples/sdk-react-editor and deploy dist/ (plus the WebDocs engine assets at ./engine/) to /sdk-demo/. The full, commented source is in that folder.

Format the selection

// Bold whatever the user has selected, and reflect the button's active state.
doc.select(para, start, end);
doc.toggleFmt(DFMT.BOLD);

const run = createRunInfo();
doc.runInfo(para, start, run);
const isBold = (run.fmt & DFMT.BOLD) !== 0;   // -> drive your toolbar highlight

Read the caret & selection

// Read the caret + selection back after any edit (zero-garbage).
const sel = createSelInfo();
doc.selInfo(sel);
console.log(`caret at para ${sel.caretPara}, byte ${sel.caretByte}`);
if (sel.hasSelection) console.log("anchor:", sel.anchorPara, sel.anchorByte);

// Or use the Selection facade for named motions:
const s = doc.selection();
s.wordRight(true);          // extend selection one word right (Shift+Ctrl+Right)
s.read(sel);

Undo & redo

if (doc.undo()) refreshUi();   // returns false when the stack is empty
if (doc.redo()) refreshUi();

Export a PDF

// Export a PDF and hand it to the browser as a download.
const bytes = doc.exportPdf();
const blob = new Blob([bytes.slice().buffer], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
const a = Object.assign(document.createElement("a"), { href: url, download: "document.pdf" });
a.click();
URL.revokeObjectURL(url);