A visual .docx editor for React and Vue. Edit paginated Word documents in the browser and preserve untouched content and unsupported OOXML when saving. Comments and tracked changes require the EigenPal Pro License.
Live demo | Documentation | Roadmap
Quick start
Install the adapter for your framework and its required engine peer:
npm install @docx-editor.dev/react @docx-editor.dev/core # React
npm install @docx-editor.dev/vue @docx-editor.dev/core # VueSee the React or Vue quick start.
For Node.js, use ^20.16.0 || >=22.3.0. Browser applications can use the packages with their build tool.
Features
| Feature | Description | | --- | --- | | Editor API | Automate documents in a browser or server with a supported subset of Word Office.js. | | Review workflow | Add comments and tracked changes with the review module. | | Word fidelity | Check rendering and editing support for document features. | | Save and reopen | Preserve document structure, unsupported OOXML, and embedded files. | | Collaboration | Edit together with remote cursors, shared changes, and personal undo. | | Custom UI | Build controls with shared commands, components, and styles. | | React and Vue | Use either adapter with the same document engine. | | Translations | Translate editor controls with locale catalogs and custom strings. | | PDF export | Convert DOCX to PDF on a Node.js server. | | Markdown export | Convert DOCX to Markdown with page references and images. |
Review, collaboration, the Editor API, and PDF export require separate packages under the EigenPal Pro License.
Packages
| Package | Description | Docs |
| --- | --- | --- |
| @docx-editor.dev/react | React editor components and hooks. | React adapter |
| @docx-editor.dev/vue | Vue 3 editor components and composables. | Vue adapter |
| @docx-editor.dev/core | DOCX parsing, editing, and rendering. | Core engine |
| @docx-editor.dev/i18n | Translations and locale types. | Translations |
| @docx-editor.dev/fonts | Open-licensed substitutes for Word fonts. | Fonts and measurement |
| @docx-editor.dev/docx-to-markdown | Convert DOCX to Markdown with page and image output. | Markdown export |
| @docx-editor.dev/docx-to-pdf | Convert DOCX to PDF on Node.js. | PDF export |
| @docx-editor.dev/fonts-cjk | Optional Chinese, Japanese, and Korean font for PDF export. | CJK font setup |
| @docx-editor.dev/pro | Tracked changes, comments, collaboration, and custom nodes. | Review and collaboration |
| @docx-editor.dev/editor-api | A supported subset of Word Office.js for browser and server editing. | Document automation |
@docx-editor.dev/editor-api, @docx-editor.dev/pro, and @docx-editor.dev/docx-to-pdf use the EigenPal Pro License. See the license terms for editor-api, pro, and docx-to-pdf. Compare license and support options on the pricing page.
React
Import the stylesheet once and pass the selected file to the editor:
import { useState } from 'react';
import { DocxEditor } from '@docx-editor.dev/react';
import '@docx-editor.dev/core/styles/editor.css';
export function App() {
const [doc, setDoc] = useState<Uint8Array>();
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
<input
type="file"
accept=".docx"
onChange={async (e) => {
const file = e.target.files?.[0];
setDoc(file ? new Uint8Array(await file.arrayBuffer()) : undefined);
}}
/>
<div style={{ flex: 1, minHeight: 0 }}>
{doc && <DocxEditor document={doc} mode="edit" />}
</div>
</div>
);
}
For Next.js and server-side rendering (SSR), use dynamic(..., { ssr: false }) in a Client Component. The editor requires browser APIs.
Full docs: React adapter · Props and ref methods.
Vue
Import the stylesheet once and pass the selected file to the editor:
<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@docx-editor.dev/vue';
import '@docx-editor.dev/vue/styles.css';
const doc = ref<Uint8Array>();
async function onPick(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0];
doc.value = file ? new Uint8Array(await file.arrayBuffer()) : undefined;
}
</script>
<template>
<div style="height: 100vh; display: flex; flex-direction: column">
<input type="file" accept=".docx" @change="onPick" />
<div style="flex: 1; min-height: 0">
<DocxEditor v-if="doc" :document="doc" mode="edit" />
</div>
</div>
</template>
For Nuxt and server-side rendering, load the editor in a client-only component. The editor requires browser APIs.
Full docs: Vue adapter · Props and ref methods.
Font measurement
Pass usable font bytes to measure text for line and page breaks. Fallback measurement can change wrapping and pagination.
Use packagedFonts() from @docx-editor.dev/fonts for packaged substitutes. Use customFonts() from @docx-editor.dev/core/editor for your own font files. Add googleFonts() when your application accepts third-party font requests.
Development
Use the toolchain in Contributing, then run these commands from the repository root:
bun install
bun run dev # localhost:5173
bun run dev:markdown # Markdown demo: localhost:5177
bun run build
bun run typecheckTry unreleased changes in the preview of main.
Examples: Vite | DOCX to Markdown | DOCX to PDF | Next.js | Remix | Astro | Vue | Collaboration | Server agent review | Document refresh
Documentation | React props and ref methods | Vue props and ref methods
Contributing
See Contributing for setup, tests, and the Contributor License Agreement (CLA).
Translations
| Locale | Language |
| ------- | -------------------- |
| en | English |
| de | German |
| es | Spanish |
| fr | French |
| he | Hebrew |
| hi | Hindi |
| id | Indonesian |
| ja | Japanese |
| pl | Polish |
| pt-BR | Portuguese (Brazil) |
| tr | Turkish |
| zh-CN | Chinese (Simplified) |
To add a locale, see the i18n contribution guide.
bun run i18n:new it # Scaffold an Italian locale.
bun run i18n:status # check translation coverageLicense
The repository uses Apache 2.0, with the package exceptions listed in Packages. Bundled fonts retain their own licenses.
Commercial support
For commercial support or custom features, email the support team.
Roadmap
See the public roadmap for planned work and priorities.