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     # 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.
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.

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

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 coverage

License

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.