# DOCX Editor: @docx-editor.dev/* (2.x line)
> Open-source DOCX editor for React and Vue, with an Office.js-compatible automation API. Edit .docx files in the browser with full fidelity: tables, images, headers and footers, content controls, fonts, i18n. Tracked changes, threaded comments, and custom nodes come from the Pro module. Drive a document from a server or beside an open editor with `@docx-editor.dev/editor-api`.

## Packages (2.x)

**`@docx-editor.dev/react`**: the editor. `<DocxEditor>` and its compound parts (`Root`, `Toolbar`, `Viewport`, `Content`, `Menu`, `Navigation`), hooks (`useDocxEditor`, `useEditorState`, `useEditorCommand`, `useEditorEvent`), and dialogs. The adapter carries the engine and the string catalogue, so for most apps this is the only install. Works with Next.js, Vite, Remix, Astro.

```bash
npm install @docx-editor.dev/react
```

**`@docx-editor.dev/vue`**: the same editor for Vue 3. `<DocxEditor>` and its compound parts, composables (`useDocxEditor`, `useEditorState`, `useEditorCommand`, `useEditorEvent`, `usePageSetup`, `useParagraphIndent`, `useFontFamily`), and the page-setup dialog, all from the package root. `@docx-editor.dev/core` and `vue` are peer dependencies; the string catalogue is bundled. The stylesheet is at `@docx-editor.dev/vue/styles.css`. Works with Vite and Nuxt (render it client-side).

```bash
npm install @docx-editor.dev/vue @docx-editor.dev/core
```

**`@docx-editor.dev/pro`**: tracked changes (suggesting mode, markup rendering, accept and reject), comments (threads anchored to a range, with replies), custom nodes (your own inline node types, stored as Word content controls), and realtime collaboration (several people editing one document, replicated over WebRTC or a Hocuspocus server). Capabilities register as modules on the editor root through the `modules` prop. Framework chrome lives at `@docx-editor.dev/pro/react` and `@docx-editor.dev/pro/vue`; both export `reviewModule`, `DocxEditorReview`, `CustomNodeChrome`, and `useCustomNodeDefinitions`. Collaboration hooks live at `/react/webrtc`, `/react/hocuspocus`, `/vue/webrtc`, and `/vue/hocuspocus`; the framework-neutral session factories live at `/collaboration`, `/collaboration/webrtc`, and `/collaboration/hocuspocus`. Commercially licensed: free to evaluate, production use needs an agreement.

```bash
npm install @docx-editor.dev/react @docx-editor.dev/pro   # or @docx-editor.dev/vue
```

**`@docx-editor.dev/editor-api`**: document automation. A batching object model, shaped after the Office.js Word API, that drives a document from a server or from an editor already open in a page. Subpath exports are `.` (server) and `/browser` (`createBrowser`, against a live editor). Commercially licensed, same terms as Pro.

```bash
npm install @docx-editor.dev/editor-api
```

**`@docx-editor.dev/i18n`**: typed locale strings for the editor UI. Ships `en`, `de`, `fr`, `he`, `hi`, `id`, `pl`, `pt-BR`, `tr`, `zh-CN`, as named root exports and per-locale subpaths (`/pl`, `/fr`, ...). Bundled into both the React and Vue adapters, so it is a separate install only when you import a locale directly.

```bash
npm install @docx-editor.dev/i18n
```

**`@docx-editor.dev/fonts`**: optional metric-compatible substitutes for Word's default fonts, so a document lays out the same without the originals installed.

```bash
npm install @docx-editor.dev/fonts
```

## Versioning

- 2.x docs (current): https://www.docx-editor.dev/docs/2.x, also reachable via the stable alias https://www.docx-editor.dev/docs/latest
- Auto-generated API reference (every published subpath of every package): https://www.docx-editor.dev/docs/2.x/api

## Links
- [npm: @docx-editor.dev/react](https://www.npmjs.com/package/@docx-editor.dev/react)
- [npm: @docx-editor.dev/vue](https://www.npmjs.com/package/@docx-editor.dev/vue)
- [npm: @docx-editor.dev/pro](https://www.npmjs.com/package/@docx-editor.dev/pro)
- [npm: @docx-editor.dev/editor-api](https://www.npmjs.com/package/@docx-editor.dev/editor-api)
- [npm: @docx-editor.dev/i18n](https://www.npmjs.com/package/@docx-editor.dev/i18n)
- [npm: @docx-editor.dev/fonts](https://www.npmjs.com/package/@docx-editor.dev/fonts)
- [GitHub](https://github.com/eigenpal/docx-editor): source, issues, discussions
- [llms-full.txt](https://www.docx-editor.dev/llms-full.txt): the 2.x docs corpus concatenated into one plain-text document

## Getting Started
- [Build a DOCX agent](https://www.docx-editor.dev/docs/2.x/build-a-docx-agent): Give a model document tools that read, draft, comment, and redline a DOCX file. Validate each call, run it through the editing API, and return a typed result.
- [Get started with DOCX collaboration](https://www.docx-editor.dev/docs/2.x/collaboration): Connect two React or Vue DOCX editors through one WebRTC room.
- [Quickstart](https://www.docx-editor.dev/docs/2.x/quickstart): Load, edit, and save a .docx in the browser with React or Vue. Minimal setup: a file input, the editor component, and a download button, in one file.
- [Word fidelity](https://www.docx-editor.dev/docs/2.x/word-fidelity): Word feature support for editing, rendering, and structural round-trip fidelity, plus security and API stability.
- [Introduction](https://www.docx-editor.dev/docs/2.x): Browser-based WYSIWYG DOCX editor for React and Vue 3, with tracked changes, comments, content controls, and custom nodes.
- [Installation](https://www.docx-editor.dev/docs/2.x/installation): Install the DOCX editor in React or Vue. Add the stylesheet and set a client-only boundary for server-rendered apps.
- [Examples](https://www.docx-editor.dev/docs/2.x/examples): Runnable DOCX editor starters for React, Vue, and server-rendered frameworks, plus themed and headless examples.

## Reference
- [Architecture](https://www.docx-editor.dev/docs/2.x/core/architecture): How the editor renders DOCX with Word fidelity: one canonical OOXML tree, a DOM-free layout pass, and painted pages that are themselves the editable surface.
- [Contributing a translation](https://www.docx-editor.dev/docs/2.x/i18n/contributing): Add a new editor language to @docx-editor.dev/i18n: scaffold the locale JSON, fill the strings, validate, and open a PR. Partial translations are accepted.
- [@docx-editor.dev/i18n](https://www.docx-editor.dev/docs/2.x/i18n): Locale data for the editor chrome. Ships ten languages: English, Polish, German, French, Portuguese, Hebrew, Hindi, Indonesian, Turkish, and Chinese.
- [@docx-editor.dev/core](https://www.docx-editor.dev/docs/2.x/core): The framework-agnostic engine: OOXML read and write, the canonical document tree, layout, paint, and the Editor contract that adapters render.

## Docs
- [Markdown](https://www.docx-editor.dev/docs/2.x/export/markdown): Convert DOCX to Markdown with layout-derived pages in one function call.

## Frameworks
- [Astro](https://www.docx-editor.dev/docs/2.x/frameworks/astro): Run an Astro DOCX editor as a React island with client:only. Why client:load crashes, how styles load, and the path from file upload to .docx download.
- [Next.js](https://www.docx-editor.dev/docs/2.x/frameworks/nextjs): Set up a Next.js DOCX editor in the App Router. Dynamic import with ssr: false, the window is not defined fix, file upload, and saving back to .docx.
- [Nuxt](https://www.docx-editor.dev/docs/2.x/frameworks/nuxt): Set up the Vue DOCX editor in Nuxt with a client-only component, the editor stylesheet, and Vite dependency optimization.
- [Remix](https://www.docx-editor.dev/docs/2.x/frameworks/remix): Add a Remix DOCX editor with a mount check and React.lazy. Keeps server rendering and hydration intact while the editor loads in the browser only.
- [Vite with Vue](https://www.docx-editor.dev/docs/2.x/frameworks/vite-vue): Set up a Vue 3 DOCX editor with Vite. Add the stylesheet, open a file, and save the edited document.
- [Vite](https://www.docx-editor.dev/docs/2.x/frameworks/vite): Build a Vite DOCX editor with React. Install the package, mount the component, open a .docx from disk, edit it, and download the edited result.

## Guides
- [Chrome slot reference](https://www.docx-editor.dev/docs/2.x/guides/chrome-slots): Reference every editor chrome slot and its React and Vue toolbar part across default, contextual, menu, dialog, and header or footer surfaces.
- [Content controls](https://www.docx-editor.dev/docs/2.x/guides/content-controls): Find and fill Word content controls by tag or id. Set text, dropdown, checkbox, and date values, from inside the editor or from a server-side script.
- [Custom styles and branding](https://www.docx-editor.dev/docs/2.x/guides/custom-styles): Use a branded DOCX template to control headings, fonts, and table styles. Documents inherit your styles from the template and preserve them when saved.
- [Dark mode](https://www.docx-editor.dev/docs/2.x/guides/dark-mode): Enable dark mode in the DOCX editor with the colorMode prop: theme the chrome, render the document canvas like Word dark view, and toggle from your own UI.
- [Fields and cross-references](https://www.docx-editor.dev/docs/2.x/guides/fields): Understand which Word fields update in the editor, which results refresh during save, and which field codes stay inert.
- [Fonts and measurement](https://www.docx-editor.dev/docs/2.x/guides/fonts): Resolve fonts for Word-accurate line wrapping and pagination with embedded fonts, open-licensed substitutes, or app-supplied files.
- [Footnotes and endnotes](https://www.docx-editor.dev/docs/2.x/guides/footnotes-and-endnotes): Insert, edit, convert, and delete DOCX notes while preserving Word numbering and page placement.
- [Headers and footers](https://www.docx-editor.dev/docs/2.x/guides/headers-footers): Edit DOCX headers and footers in place, insert page fields, and use per-section first-page and even-page variants.
- [Images and drawings](https://www.docx-editor.dev/docs/2.x/guides/images): Inline and floating DrawingML pictures in DOCX: supported formats, wrap modes, authoring them from React or Vue, accessibility, and the security boundaries.
- [Loading and saving](https://www.docx-editor.dev/docs/2.x/guides/loading-and-saving): Load DOCX bytes into the editor root, swap documents through the shared ref, and serialize the current state back out to a .docx file on demand.
- [Toolbar](https://www.docx-editor.dev/docs/2.x/guides/toolbar): Customize the editor chrome in React or Vue: keep the packaged toolbar and title bar, override a single slot, or compose your own from the parts.
- [Zoom and fit to screen](https://www.docx-editor.dev/docs/2.x/guides/zoom): Fit the document to the viewport, control zoom from your UI with useZoom, and let the comments pane shrink the page instead of covering it.

## React
- [@docx-editor.dev/react](https://www.docx-editor.dev/docs/2.x/react): React adapter for the DOCX editor: the packaged editor component, composition primitives, hooks, and compound chrome.
- [Props](https://www.docx-editor.dev/docs/2.x/react/props): Configure the React editor document, chrome, callbacks, fonts, and imperative ref.
- [Composition](https://www.docx-editor.dev/docs/2.x/react/composition): Build a custom React editor with primitives, compound parts, slot overrides, and hooks.
- [Hooks](https://www.docx-editor.dev/docs/2.x/react/hooks): Use React hooks to read editor state, run commands, search documents, and configure pages.
- [React examples](https://www.docx-editor.dev/docs/2.x/react/examples): Load, save, compose, and automate documents with the React adapter.

## Vue
- [@docx-editor.dev/vue](https://www.docx-editor.dev/docs/2.x/vue): Vue 3 adapter for the DOCX editor: the packaged root component, composition primitives, shared composables, and compound chrome, all from the package root.
- [Props](https://www.docx-editor.dev/docs/2.x/vue/props): Reference for Vue document props, chrome, emits, slots, and the seven ref methods.
- [Composition](https://www.docx-editor.dev/docs/2.x/vue/composition): Build a Vue DOCX editor from root, viewport, content, chrome, and review primitives.
- [Composables](https://www.docx-editor.dev/docs/2.x/vue/composables): Vue composables used by the packaged chrome: subscribe to editor state, run commands, read the document outline, search, and drive page setup.
- [Vue examples](https://www.docx-editor.dev/docs/2.x/vue/examples): Patterns for the Vue root surface: mount bytes, save through the ref, compose custom chrome, and automate an open editor.

## Editing API
- [Overview](https://www.docx-editor.dev/docs/2.x/editor-api): Office.js-compatible editing API: an object model that batches its work, running on a server over bytes or in a page against an editor already open.
- [Office.js compatibility](https://www.docx-editor.dev/docs/2.x/editor-api/office-js-api): Compare the supported Word JavaScript API subset, known differences, and unavailable APIs.

## Pro
- [@docx-editor.dev/pro](https://www.docx-editor.dev/docs/2.x/pro): Add tracked changes and comments to Vue or React. Register the review module, then use the packaged rail or review composables.
- [Tracked changes](https://www.docx-editor.dev/docs/2.x/pro/tracked-changes): Use suggesting mode to record Word revisions. Render, accept, or reject them with the review sidebar or your own interface.
- [Comments](https://www.docx-editor.dev/docs/2.x/pro/comments): Read, create, reply to, and resolve DOCX comment threads. Use the packaged review rail or build an interface with useReview.
- [Review colors and styling](https://www.docx-editor.dev/docs/2.x/pro/review-styling): Color tracked changes and comments by author or change type, map reviewer colors, add avatars, and style review chrome.
- [Custom nodes](https://www.docx-editor.dev/docs/2.x/pro/custom-nodes): Your own inline node types (citations, mentions, merge fields) as Word content controls.
- [DOCX collaboration reference](https://www.docx-editor.dev/docs/2.x/pro/collaboration): Reference for Pro providers, room lifecycles, presence, offline editing, recovery, and limits.
- [Custom nodes reference](https://www.docx-editor.dev/docs/2.x/pro/custom-nodes-reference): Custom node API: every option, every error code, the on-disk format.

## Blog
- [Automating Word documents without running Word](https://www.docx-editor.dev/blog/automating-word-documents-without-running-word): An object model shaped like the Word JavaScript API, over the same engine that renders the browser editor. Why every batch is a transaction, what the model refuses to guess, and how the server and browser runtimes differ.
- [Real-time DOCX collaboration with React, Vue 3, and Yjs](https://www.docx-editor.dev/blog/realtime-collaboration-yjs-docx-editor): Connect React or Vue 3 DOCX editors through WebRTC, Hocuspocus, or Yjs. Synchronize documents, presence, comments, and tracked changes.
- [Contract redlining API: tracked changes in an embedded DOCX editor](https://www.docx-editor.dev/blog/contract-redlining-api): Build a custom contract redlining agent. Connect AI SDK tools to a DOCX editing API and a review UI that users can control.
- [Custom elements that survive a round trip through Word](https://www.docx-editor.dev/blog/custom-chrome-and-custom-nodes): Put your own element type in a content control, and Word preserves it. Here is the typed API for that, plus the editor UI we built around it.
- [How to build a DOCX automation agent](https://www.docx-editor.dev/blog/docx-editing-api-for-ai-agents): Build a DOCX agent with app-owned tools, content controls, native Word structures, browser and server runtimes, and tracked changes.
- [How docx-editor preserves DOCX content it does not understand](https://www.docx-editor.dev/blog/how-docx-editor-preserves-unknown-content): A DOCX editor has to understand Word's document model to lay a file out, and must not assume the file only contains that model. How the canonical tree, the package writer, and the DOM diff divide that work.
- [Word document editor for legal applications](https://www.docx-editor.dev/blog/word-document-editor-for-legal-software): Build custom redlining agents and legal review workflows with a DOCX editing API and a customizable review UI.
- [How to edit Word documents in your app](https://www.docx-editor.dev/blog/edit-word-documents-in-your-app): Plan an embedded DOCX editing workflow. Compare React, Vue, review features, programmatic editing, storage, and Word file round trips.
- [React Word editor: edit DOCX files in the browser](https://www.docx-editor.dev/blog/react-word-editor): Add a Word editor to React. Open DOCX bytes, render editable pages, save through a ref, and choose a Vite or Next.js setup.
- [Next.js DOCX editor: edit and embed Word documents in the browser](https://www.docx-editor.dev/blog/nextjs-docx-editor): Edit DOCX files in a Next.js App Router project. Install the React adapter, render it client-side, load a file, and save the result.
- [Nuxt DOCX editor: edit Word documents in a Nuxt app](https://www.docx-editor.dev/blog/nuxt-docx-editor): Add a DOCX editor to a Nuxt 3 or 4 app with @docx-editor.dev/vue. Configure Nuxt, keep the editor client-only, and load and save .docx files.
- [Vue DOCX editor: edit Word documents in Vue 3](https://www.docx-editor.dev/blog/vue-docx-editor): Add a DOCX editor to a Vue 3 app with @docx-editor.dev/vue. Install, render, load, and save .docx files in the browser.
- [Vue and React DOCX editor API comparison](https://www.docx-editor.dev/blog/vue-docx-word-editor): Compare the Vue and React DOCX editor APIs: props, composables, hooks, refs, events, slots, and component composition.
- [Agent toolkit for DOCX documents](https://www.docx-editor.dev/blog/agent-toolkit-for-docx-documents): Use @docx-editor.dev/agents to let an agent read, comment on, and suggest edits to .docx documents in the editor, in Node, or over MCP.
- [German Translation for React DOCX Editor. DOCX-Editor auf Deutsch](https://www.docx-editor.dev/blog/german-translation-docx-editor): How to use the German (de) locale in docx-js-editor. Localize the toolbar, comments, and track changes UI to German. DOCX-Dokumente bearbeiten mit deutscher Benutzeroberfläche.
- [Polish Translation for React DOCX Editor. Edytor DOCX po polsku](https://www.docx-editor.dev/blog/polish-translation-docx-editor): How to use the Polish (pl) locale in docx-js-editor. Localize the toolbar, comments, and track changes UI to Polish. Edytor dokumentow DOCX z polskim interfejsem.
- [Astro DOCX editor: edit Word documents in an Astro site](https://www.docx-editor.dev/blog/astro-docx-editor): Add a DOCX editor to an Astro project with a React island. Install the React adapter, load a .docx, edit it, and download the result.
- [Remix DOCX editor: edit Word documents in a Remix app](https://www.docx-editor.dev/blog/remix-docx-editor): Add a DOCX editor to a Remix app. Load the React adapter on the client, open a .docx, edit it, and download the result.
- [Vite DOCX editor: edit Word documents in a React and Vite app](https://www.docx-editor.dev/blog/vite-docx-editor): Add a DOCX editor to a React + Vite project. Install the React adapter, load a .docx, edit it, and download the result.
- [Track Changes in a React DOCX Editor](https://www.docx-editor.dev/blog/track-changes-in-react-docx-editor): How to enable track changes in a React DOCX editor and automate document review with AI agents using DocxReviewer.
- [How to Add a DOCX Editor to Your React App](https://www.docx-editor.dev/blog/how-to-add-docx-editor-to-react): Add a WYSIWYG DOCX editor to a React application with docx-js-editor. Install the package, load a .docx file, and save the edited document.
- [Adding Comments to a React Document Editor](https://www.docx-editor.dev/blog/adding-comments-to-react-document-editor): How document comments work in docx-js-editor: threaded replies, text range anchoring, resolve workflows, and OOXML compatibility with Microsoft Word.
- [Edit DOCX Files in the Browser with JavaScript](https://www.docx-editor.dev/blog/edit-docx-files-in-browser-javascript): Parse, render, edit, and save Word documents in the browser with JavaScript. Uses the React adapter as the working example.