Introduction
Open source WYSIWYG DOCX editor for React. Runs in the browser: .docx in, .docx out, with tracked changes, comments, content controls, and custom nodes.
docx-editor is an open-source WYSIWYG DOCX editor for React. It parses OOXML in the browser, paints real paginated pages, and serializes the current document back to .docx. You do not need an upload service or a conversion backend for normal browser editing.
Saving has a lossless semantic round-trip: untouched content, unsupported OOXML, and package payloads survive editing and save. Opening a document here cannot quietly destroy it.
Get it running
Install the adapter, import the stylesheet, load a .docx from a file input, and save it back.
Build your own UI
Unstyled primitives and hooks. Every packaged control is a consumer of the same public API.
Evaluate fidelity
Feature support, round-trip behavior, security model, API stability, and known limits.
Packages
| Package | What's in it |
|---|---|
@docx-editor.dev/react | React adapter. <DocxEditor> for the packaged editor; DocxEditor.Root + hooks to build your own. |
@docx-editor.dev/core | Framework-agnostic engine: OOXML read/write, canonical document tree, layout, paint, Editor contract. |
@docx-editor.dev/editor-api | Office.js-compatible editing API: a batching object model that edits a document from a server, or an editor already open in a page. |
@docx-editor.dev/pro | Tracked changes, comments, and custom nodes. |
@docx-editor.dev/i18n | Locale data. Ships en, de, fr, he, hi, id, pl, pt-BR, tr, zh-CN. |
@docx-editor.dev/fonts | Metric-compatible substitutes for Word's default fonts, for documents that reference them without embedding them. |
All packages release together in a fixed version group. Everything is Apache 2.0 except @docx-editor.dev/editor-api and @docx-editor.dev/pro, which are under the EigenPal Pro Evaluation License 1.0: free for internal, non-production evaluation, with production use requiring a commercial agreement (licensing@eigenpal.com).
Which package do I need?
React app. Install -react and the engine it renders. The string catalog comes with it.
npm install @docx-editor.dev/react @docx-editor.dev/coreTracked changes, comments, or custom nodes. Add -pro and register its modules.
npm install @docx-editor.dev/react @docx-editor.dev/core @docx-editor.dev/proServer-side editing, no UI. -editor-api opens DOCX bytes, edits them through its Office.js-compatible object model, and saves them back.
npm install @docx-editor.dev/editor-apiAutomating an editor a reader has open. Add -editor-api next to -react and use its /browser entry, which drives the editor instance the adapter already created.
What it handles
The editor models common Word constructs and writes them back through OOXML:
- Text formatting, fonts, theme colors, paragraph and character styles
- Tables (merged cells, page-spanning rows, repeated header rows), lists and numbering
- Headers, footers, sections, columns, page layout
- Images (inline and anchored), hyperlinks, bookmarks, fields
- Footnotes, endnotes, content controls
- Tracked changes and comments, with
@docx-editor.dev/pro
Feature-by-feature coverage and known limits: Word fidelity. You can also open one of your own documents in the live demo.
Lossless round-trip
Open a document, edit one word, save it. Everything you did not touch survives: custom XML, embedded fonts, macros, media, VBA, Smart Tags, and markup from add-ins the editor has never heard of.
The mechanism is the canonical tree. Parsing types a node only where layout needs it and keeps everything else generic. On save, the tree serializes with structural fidelity and package payloads such as media, fonts, and VBA binaries pass through untouched. An element the parser cannot type (unknown, or known but in an invalid position) becomes a generic node instead of being dropped, so unrecognized markup never blocks editing.
CI checks this on a corpus of real documents with two oracles: a canonical fingerprint over the tree, and a semantic digest compared across save and reopen. A change that drops content fails the build.
Next steps
- Quickstart: load, edit, and save a
.docx - Installation: Next.js, Vite, Remix, Astro
- Composition: build your own chrome on the primitives
- Word fidelity: feature support and round-trip behavior