Introduction
Browser-based WYSIWYG DOCX editor for React and Vue 3, with tracked changes, comments, content controls, and custom nodes.
docx-editor is a what-you-see-is-what-you-get (WYSIWYG) DOCX editor for React
and Vue 3.
It parses Office Open XML (OOXML), renders paginated pages, and saves the edited state as a DOCX file. Browser editing needs no upload or conversion service.
Install the editor
Install an adapter, load a DOCX file, and save the result.
Compose an editor interface
Build an interface with public components and hooks.
Review document fidelity
Check feature support, round-trip behavior, security, and limits.
Build a DOCX agent
Define tools a model can call to read, draft, and redline a DOCX.
Packages
| Package | Purpose | License |
|---|---|---|
@docx-editor.dev/react | React adapter and composition hooks | Apache 2.0 |
@docx-editor.dev/vue | Vue 3 adapter and composables | Apache 2.0 |
@docx-editor.dev/core | Framework-independent OOXML, document, layout, paint, and editor engine | Apache 2.0 |
@docx-editor.dev/editor-api | Browser and server automation through a documented Office.js-compatible subset | EigenPal Pro License |
@docx-editor.dev/pro | Tracked changes, comments, and custom nodes | EigenPal Pro License |
@docx-editor.dev/i18n | Shared interface translations | Apache 2.0 |
@docx-editor.dev/fonts | Metric-compatible substitutes for common Word fonts | Apache-2.0 AND OFL-1.1 |
The Pro packages are licensed under the EigenPal Pro License, and you can compare and buy license and support levels on the pricing page.
Select packages
| Goal | Packages |
|---|---|
| React editor | @docx-editor.dev/react and @docx-editor.dev/core |
| Vue editor | @docx-editor.dev/vue and @docx-editor.dev/core |
| Tracked changes, comments, or custom nodes | Add @docx-editor.dev/pro |
| Server-side editing through the documented Office.js-compatible subset | @docx-editor.dev/editor-api and @docx-editor.dev/core |
| Browser automation through the same subset | Add @docx-editor.dev/editor-api and use its /browser entry |
Install the React editor:
npm install @docx-editor.dev/react @docx-editor.dev/coreFor Vue, replace @docx-editor.dev/react with @docx-editor.dev/vue.
Document capabilities
| Area | Examples |
|---|---|
| Text | Formatting, fonts, theme colors, paragraph styles, and character styles |
| Structure | Tables, lists, numbering, footnotes, endnotes, and content controls |
| Page layout | Sections, columns, headers, footers, margins, and pagination |
| Content | Images, hyperlinks, bookmarks, and fields |
| Review | Tracked changes and comments with @docx-editor.dev/pro |
Support differs by feature and operation. See Word fidelity for editing, rendering, and round-trip status. Use the live demo to test a document.
Round-trip behavior
Saving preserves untouched package content and unsupported OOXML.
| Content | Behavior |
|---|---|
| Modeled document structures | Uses typed nodes for layout and editing. |
| Unsupported or misplaced XML | Keeps generic nodes in the document tree. |
| Media, fonts, macros, and VBA projects | Copies package payloads through save. |
| Custom XML and add-in markup | Preserves structural content. |
For the preservation contract and test method, see Word fidelity. For engine details, see Architecture.
Next steps
- Quickstart: Load, edit, and save a DOCX file.
- Build a DOCX agent: Define document tools for a model.
- Installation: Configure supported frameworks.
- React composition: Build a React interface.
- Vue composition: Build a Vue interface.