Put a Word-class editor in your product — not on your roadmap for six months.
WordCanvas is a canvas-rendered Word editor you embed with one import. Real DOCX and PDF import/export, live collaboration, and track changes — MIT-licensed, zero runtime dependencies, no server required to render.
Document editing is a feature. It shouldn't become a project.
Every path to "let users edit documents in our app" has a hidden cost. Here's what teams hit before they find WordCanvas.
Building it yourself
Pagination, DOCX fidelity, fonts, tables, undo, collaboration — a multi-quarter effort that pulls senior engineers off the roadmap and never quite matches Word.
Licensing a commercial control
Syncfusion, DevExpress and OnlyOffice are mature — and bill per seat, often need a server running before the editor renders, and lock you to one framework or stack.
Hacking contenteditable
A rich-text div gets you 80% of the way and then breaks on page breaks, real DOCX export, and print-accurate PDF. The last 20% is where the budget goes.
Embed the editor. Own none of the complexity.
WordCanvas takes the trade the commercial editors won't: MIT-licensed, browser-native, and self-contained — so you ship document editing this sprint, not next year.
Live in an afternoon
npm install, mount into a <div>, and you have a paginating Word editor. No backend to stand up, no document server to operate.
Real DOCX, in and out
Imports and exports genuine .docx in the browser, and renders page-accurate PDF — the same layout users see on screen is the file they download.
MIT — no per-seat math
Ship it to one user or one million for the same price: zero. No license server, no audit risk, no renewal that scales with your success.
Zero runtime dependencies
The layout engine, font tooling, and DOCX/PDF pipelines are inlined and code-split. One self-contained module — nothing else to keep up to date.
How it stacks up against the commercial editors
If you've shopped for an embeddable Word editor, you've met these three. Here's where WordCanvas takes a different trade.
| WordCanvas | Syncfusion | OnlyOffice | DevExpress | |
|---|---|---|---|---|
| License | MIT | Commercial seat | AGPL or commercial | Commercial seat |
| Rendering | Canvas | DOM | Canvas (in iframe) | DOM |
| Server required to render | No | For some conversions | Yes | Yes (.NET) |
| Runtime dependencies | Zero | Several | Bundled suite | .NET stack |
| DOCX import + export | In-browser | Yes | Yes | Yes |
| PDF export | Page-accurate, in-browser | Yes | Yes | Yes |
| Nested content controls | Any depth — incl. fields inside | Flat only | Flat only | Flat only |
| Word fields (PAGE/DATE/IF…) | Editable objects, round-trip | Yes | Yes | Yes |
| Server ↔ browser render parity | Pixel-identical — same engine | Separate render path | Separate render path | Separate render path |
| Live collaboration | Built in (opt-in backend) | Add-on | Built in | Add-on |
| Primary target | Any JS app | Angular/React/Vue | Iframe / full suite | Blazor / .NET |
Right-to-left, bidi, CJK editing, and mathematical equations (MathML, typeset with STIX Two Math, round-tripped to .docx as OMML) now work out of the box — with bundled CJK, Arabic, and Hebrew font fallbacks so complex-script text exports without tofu. Where the commercial editors still win today: charts and an enterprise support contract. We tell you that up front.
Every embeddable Word editor, one failure mode at a time
The big three above are just the start. Here's WordCanvas against thirteen editors and engines, scored on the problems that recur across all of them. Hover any cell for the evidence.
Verdicts derived from public vendor changelogs, GitHub issues, official docs and forums. Some cited bugs may be fixed in current releases but recur because they're architectural — read the full write-up.
Three steps to a working editor
No build step required — an import map is enough. Here's the whole integration.
Install
Add the package, or load the standalone ES module straight from a <script type="module"> with an import map.
Mount
Point WordCanvas at a sized container element. It mounts the full chrome — ribbon, ruler, outline, status bar — inside it.
Ship
It runs fully offline. Pass a backendUrl later to switch on live collaboration, presence, and shareable links.
import { WordCanvas } from "@forevka/wordcanvas"; // Offline: no backend, no network, no document server. const editor = new WordCanvas({ container: document.getElementById("editor"), }); editor.on("ready", () => console.log("editor mounted")); // Load a .docx the user picked — exports back to .docx/.pdf too. await editor.openDocx(file);
A real word processor, not a rich-text box
The same layout engine the editor renders with also runs headless on Node — so a server-generated file paginates identically to what users see.
Word-accurate pagination
Paints pages to a canvas and breaks them exactly like Word — no contenteditable guesswork.
DOCX import & export
Round-trips genuine .docx in the browser, preserving styles, tables, fields, and structure.
Page-accurate PDF
Export print-ready PDF that matches the on-screen document, in-browser or headless.
Live collaboration
Opt-in backend adds multi-user editing, presence, carets, and one-click share links.
Track changes & comments
Review workflows with suggestions and comment threads built into the editor.
Tables, fields, TOC & styles
Span-aware tables, PAGE/NUMPAGES/DATE/IF plus custom fields, generated tables of contents, and a full style manager.
Drawing shapes & text boxes
Insert preset shapes — rectangles, ellipses, arrows and more. Edit fill, outline colour, width and dash, add an editable text box inside, and import legacy VML shapes from older files. Freeform custom geometry and grouped shapes round-trip losslessly to .docx too — authored via the document builder or imported from existing files.
Rotate & position objects
A rotate handle spins any shape or image about its center (Shift snaps to 15°). Float objects with square text-wrap, anchor them behind or in front of the text, and reorder with bring-to-front / send-to-back — images and shapes share one stacking order. Rotation round-trips too.
Query, edit & merge — headless
A @forevka/wordcanvas/query API finds text, sections, pages and content controls; a DocumentEditor fills controls, runs find-and-replace, moves blocks, and merges or appends whole documents — with undo/redo, no editor UI required.
Flexible page layout
Custom page size and margins, unequal columns with separators, header/footer distances, page colour and page borders — editable from a page-layout dialog and round-tripped through .docx and PDF.
Theming & per-instance config
Constructor options theme the chrome, override default styles, and toggle behaviours per instance. Build the config live, then copy the exact new WordCanvas({…}) snippet into your app.
Right-to-left, bidi & CJK
Full Unicode bidi (UAX#9) with multi-run caret and selection, RTL .docx round-trip, and out-of-the-box CJK line-breaking with kinsoku rules.
Math equations
MathML-native equations typeset with the bundled STIX Two Math font — fractions, radicals, scripts, growing delimiters, big operators and matrices. Insert via a visual editor (MathML or LaTeX) with a live preview; equations are selectable and editable, and round-trip to .docx as OMML.
Nested content controls
Content controls inside content controls — to any depth, with complex Word fields nested inside — round-trip through .docx intact. No other browser-native editor keeps the nesting; generated report section→field structure survives editing.
Headless on Node
Build or import documents server-side and export to DOCX/PDF with no browser and no DOM.
Read-only viewer mode
readonly: true mounts a selectable, copyable, find-enabled viewer with editing disabled.
Multiple instances
Class-scoped chrome means you can run several editors on one page, each mounted independently.
Developer mode
Flip on develop: true for a devtools-style inspector — browse the parsed model and layout tree, hover to highlight on the canvas, and probe hit-tests. Plus a WebMCP bridge that exposes the editor to AI agents.
Generate documents on the server, identical to the screen
The pipeline subpaths are isomorphic. The node condition resolves a self-contained build — bundled fonts, bundled PDF engine, still zero runtime dependencies — so the same import works in a browser bundler and on Node.
- Compose documents with the fluent
DocumentBuilder - Parse uploaded
.docxback into the editable model - Pixel-identical PDF — the server renders exactly what the user sees on screen
import { DocumentBuilder } from "@forevka/wordcanvas/builder"; import { installMeasureHost } from "@forevka/wordcanvas/export/measure"; import { runExport } from "@forevka/wordcanvas/export"; const doc = DocumentBuilder.create() .paragraph("Quarterly report").withStyle("Heading1") .paragraph("Generated on the server — no DOM.") .build(); await installMeasureHost(); // once per process const { bytes } = await runExport(doc, "pdf");
Live examples for every integration
Each one is the real editor, deployed and runnable. Open it, poke around, then read the source on GitHub.
Minimal offline embed
The smallest possible drop-in: mount the full editor with a browser import map — no bundler, no tooling, no build step.
Document-builder playground
Write fluent builder code, feed it a JSON data model, and watch the document render live in a full editor.
Multiple editors on one page
Several fully independent editors side by side — add and remove them at runtime, each with its own document, undo history, and ribbon.
Ribbon customization
Reorder and remove built-in ribbon tabs, and add your own — macros, config popups, and info panels — through customizeRibbon.
Constructor config builder
Toggle any constructor option, preview it live, and copy the exact new WordCanvas({…}) snippet to paste into your app.
Bring your own fonts
Register self-hosted font faces through the fonts option, hide a built-in, and export a .docx/PDF with the font embedded — WYSIWYG on screen and in the file.
Every example lives in the examples/ directory on GitHub.
Questions engineering leaders ask
What does it cost, and what's the license?
Do I need a server to use it?
backendUrl option.Does it work with React, Vue, or Angular?
How faithful is DOCX import/export?
.docx — preserving paragraph and character styles, tables, fields, table of contents, and document structure — and paginates the way Word does. PDF export is page-accurate, so the downloaded file matches what's on screen.How large is the bundle?
What does it not do well yet?
Can I generate documents on the server?
DocumentBuilder, parse uploaded .docx back into the model, and export to DOCX/PDF with no browser and no DOM. Because it's the same pipeline, server-rendered files paginate identically to the on-screen editor.Ship document editing this sprint
Install the package, mount it into a div, and you have a Word-class editor running in the browser. No server, no license, no roadmap detour.