DOCX Editor is a complete document ecosystem featuring a WYSIWYG editor with real-time collaboration, tracked changes, and rich editing capabilities, a headless layout engine that runs on both client and server, and a PDF generation engine. Together, they provide a unified foundation for document editing, rendering, and export.
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 # Vue
See 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. |
| Right-to-left support | Use a mirrored Arabic or Hebrew interface and edit mixed-direction documents. |
| Chinese, Japanese, and Korean text | Configure interface translations, document fonts, and PDF fonts. |
| DrawingML rendering | Configure charts, SmartArt, and drawing effects. Check rendering and interface limits. |
| Translations | Translate editor controls in 14 languages 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. |
| Telemetry | Send anonymous diagnostics and metrics to Sentry, OpenTelemetry, Prometheus, or a log service. No document content or personal data is sent. |
Packages
@docx-editor.dev/editor-api, @docx-editor.dev/pro, @docx-editor.dev/docx-to-pdf, and @docx-editor.dev/telemetry use the EigenPal Pro License. See the license terms for editor-api, pro, docx-to-pdf, and telemetry. 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.
See Fonts and measurement.
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 typecheck
Try 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 | Telemetry | Collaboration telemetry
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 |
ar | Arabic |
de | German |
es | Spanish |
fr | French |
he | Hebrew |
hi | Hindi |
id | Indonesian |
ja | Japanese |
pl | Polish |
pt-BR | Portuguese (Brazil) |
ru | Russian |
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 coverage
License
The repository uses Apache 2.0, except for the Pro packages. These packages use the EigenPal Pro License:
Production use of a Pro package requires a commercial agreement. Compare options on the pricing page. 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.
