docx-editor

Open-source WYSIWYG .docx editor for React and Vue. Word-faithful pagination, tracked changes, comments, and lossless round-trip: untouched content and unsupported OOXML survive the save. Live demo | Documentation | Roadmap

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

For Node.js, use ^20.16.0 || >=22.3.0. Browser applications can use the packages with their build tool.

@docx-editor.dev/editor-api and @docx-editor.dev/pro are licensed under the EigenPal Pro License (editor-api, pro), and you can compare and buy license and support levels on the pricing page.

If you fork an adapter, depend on @docx-editor.dev/core to receive engine fixes.

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>
  );
}

Next.js / SSR: Use dynamic import. The editor requires the DOM.

Full docs: React adapter · Props and ref methods.

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

Nuxt / SSR: Load the editor in a client-only component. The editor requires the DOM.

Full docs: Vue adapter · Props and ref methods.

Pass usable font bytes for Word-accurate line and page breaks. Without them, the editor uses fallback measurement that does not guarantee Word-compatible layout.

Use packagedFonts() from @docx-editor.dev/fonts for local substitutes. Add googleFonts() only when your application accepts third-party font requests.

See Fonts and measurement.

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 | Next.js | Remix | Astro | Vue | Collaboration

Documentation | React props and ref methods | Vue props and ref methods

Contributions welcome. See CONTRIBUTING.md for setup, tests, and the one-time CLA signature.

To add a locale, see the i18n contribution guide.

bun run i18n:new de      # scaffold German locale
bun run i18n:status      # check translation coverage

This repository is licensed under Apache 2.0, except packages/editor-api/ and packages/pro/, which are licensed under the EigenPal Pro License (editor-api, pro); you can compare and buy license and support levels on the pricing page.

See the public roadmap for planned work and priorities.