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.
Connect an agent to a document
Choose how an agent edits a DOCX and how readers see its updates.
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/docx-to-markdown | DOCX to Markdown conversion with pages and media | Apache 2.0 |
@docx-editor.dev/docx-to-pdf | DOCX to PDF conversion on Node.js | 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 | Open-licensed substitutes for common Word fonts | Apache-2.0 AND OFL-1.1 AND LicenseRef-GUST-Font-License |
@docx-editor.dev/fonts-cjk | Optional Chinese, Japanese, and Korean fallback font for PDF conversion | Apache-2.0 AND OFL-1.1 |
Compare EigenPal Pro License and support options on the pricing page.
The Nuxt module is a private workspace package. For external applications, follow the Nuxt guide.
Select packages
| Goal | Packages |
|---|---|
| Convert DOCX to Markdown | @docx-editor.dev/docx-to-markdown and @docx-editor.dev/core |
| Convert DOCX to PDF on Node.js | @docx-editor.dev/docx-to-pdf and @docx-editor.dev/core; add @docx-editor.dev/fonts-cjk for Chinese, Japanese, and Korean text |
| 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.
Find a guide for your task
| Task | Guide |
|---|---|
| Check pagination, table layout, and drawing limits | Word fidelity |
| Set paragraph direction for Arabic or Hebrew text | Right-to-left text |
| Scroll to and highlight an external paragraph reference | Navigate a document |
| Configure PDF fonts, including Chinese, Japanese, and Korean fallback | PDF fonts |
| Configure interface translations, including Spanish | @docx-editor.dev/i18n |
Document direction, interface language, and font selection have separate settings. Use the corresponding guide to configure each setting.
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.
- Connect an agent to a document: Choose an integration approach and show agent updates.
- Installation: Configure supported frameworks.
- React composition: Build a React interface.
- Vue composition: Build a Vue interface.