Installation

Requirements: React ^18 || ^19.

Pick a package

The adapter holds the engine as a peer, so install both. The string catalog comes with the adapter.

# React adapter: the editor, plus the engine it holds as a peer
npm install @docx-editor.dev/react @docx-editor.dev/core

# Tracked changes, comments, custom nodes
# Commercially licensed: free to evaluate, production use needs an agreement
npm install @docx-editor.dev/pro

# Office.js-compatible editing API, on a server or beside an open editor
# Commercially licensed: same terms
npm install @docx-editor.dev/editor-api

# Metric-compatible substitutes for Word's default fonts (optional)
npm install @docx-editor.dev/fonts

Mount it

Import the component and the stylesheet once. document takes an ArrayBuffer, a Uint8Array, or a DocumentHandle; omit it to mount an empty editor.

import { DocxEditor } from '@docx-editor.dev/react';
import '@docx-editor.dev/core/styles/editor.css';

export default function App() {
  return (
    <div style={{ height: '100vh' }}>
      <DocxEditor />
    </div>
  );
}

Two details to get right:

• Without the stylesheet the editor works but the chrome renders unstyled. The shipped CSS is precompiled and scoped to .docx-editor, so the host app does not need Tailwind.
• <DocxEditor> fills its parent. In a parent with no height it collapses and nothing appears.

SSR frameworks

The editor measures text in the DOM at mount, so it must render client-side. Client-rendered apps (Vite) need nothing special; SSR frameworks need one client-only boundary. Each guide is a complete walkthrough backed by a runnable example:

Fonts

The editor measures with real font bytes so line wrap and page breaks match Word. Embedded fonts in the document wire in automatically. For documents that reference Word's defaults without embedding them, @docx-editor.dev/fonts supplies metric-compatible substitutes:

import { loadDefaultFonts } from '@docx-editor.dev/fonts';

const fonts = await loadDefaultFonts();

<DocxEditor document={bytes} fonts={fonts} />;

See Fonts and measurement for how the sources compose.

Headless

To read, edit, and write a .docx headlessly, on a server, in a worker, or in a script, use @docx-editor.dev/editor-api. It opens bytes, edits them through an Office.js-compatible batching object model, and saves them back.

Next steps

• Quickstart: load, edit, and save a .docx
• Composition: build your own chrome
• Word fidelity: feature support and round-trip behavior
• Props and the API reference