@eigenpal/docx-editor-react

React adapter for the docx-editor. WYSIWYG .docx editing with canonical OOXML, tracked changes, comments, real-time collaboration, and an AI agent bridge.

Quick Start

npm install @eigenpal/docx-editor-react

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

export function App() {
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);

  return (
    <>
      <input
        type="file"
        accept=".docx"
        onChange={async (e) => setBuffer((await e.target.files?.[0]?.arrayBuffer()) ?? null)}
      />
      {buffer && <DocxEditor documentBuffer={buffer} mode="editing" />}
    </>
  );
}

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

Start with a blank document

Skip the file picker for new documents. createEmptyDocument returns a fresh Document model you can pass straight to the editor:

import { DocxEditor, createEmptyDocument } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';

const doc = createEmptyDocument();
// Or with options:
// createEmptyDocument({ initialText: 'Untitled', pageWidth: 12240 })

<DocxEditor document={doc} mode="editing" />;

createDocumentWithText(text, options?) is the same idea with a starting paragraph already typed. Both helpers are re-exported from @eigenpal/docx-editor-core so you don't need a separate dependency.

Packages

| Package | Description | | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | @eigenpal/docx-editor-react |   React adapter. Toolbar, paged editor, plugins. | | @eigenpal/docx-editor-vue |   Vue 3 adapter. Toolbar, paged editor, plugins. | | @eigenpal/docx-editor-core | Framework-agnostic core: OOXML parser, serializer, layout engine, ProseMirror schema. Depend on this if you fork the React or Vue adapter. | | @eigenpal/docx-editor-i18n | Shared locale strings and types consumed by both adapters. | | @eigenpal/docx-editor-agents | Agent SDK and chat UI: framework-agnostic bridge, MCP server, AI SDK adapters, plus React UI. |

Forking the adapter? Keep your fork thin. Depend on @eigenpal/docx-editor-core directly so parser, serializer, and rendering fixes land in your build automatically, without backporting each upstream change by hand.

Imperative mounting

import { renderAsync } from '@eigenpal/docx-editor-react';

const editor = await renderAsync(file, document.getElementById('editor')!, { mode: 'editing' });
await editor.save();
editor.destroy();

Subpaths

• @eigenpal/docx-editor-react — DocxEditor, renderAsync, public types
• @eigenpal/docx-editor-react/ui — toolbar primitives, pickers, sidebars, dialogs
• @eigenpal/docx-editor-react/hooks — useAutoSave, useTableSelection, ...
• @eigenpal/docx-editor-react/dialogs — dialog components barrel
• @eigenpal/docx-editor-react/plugin-api — plugin host and plugin-facing types
• @eigenpal/docx-editor-react/styles — style constants (EDITOR_CSS_PATH, z-index)

Plugins

import { DocxEditor } from '@eigenpal/docx-editor-react';
import { PluginHost, templatePlugin } from '@eigenpal/docx-editor-react/plugin-api';

<PluginHost plugins={[templatePlugin]}>
  <DocxEditor documentBuffer={buffer} />
</PluginHost>;

Component API

Full props and ref reference: docx-editor.dev/docs/props. DocxEditor and DocxEditorRef mirror the Vue adapter, so docs apply with just the import path swapped.

@eigenpal/docx-editor-core is installed transitively. Add it to your package.json only if your own code imports core APIs directly. Strict installers like pnpm with peer auto-install disabled may also need the ProseMirror peers listed in package.json.

Examples: Vite · Next.js · Remix · Astro

Contributing

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

Commercial Support

[!TIP] Questions or custom features? Email [email protected].