@docx-editor.dev/react

Use <DocxEditor> for the packaged editor. Use composition to arrange its parts or connect your own React components.

Install

Install the React adapter and its peer dependency:

npm install @docx-editor.dev/react @docx-editor.dev/core

The adapter requires one shared copy of @docx-editor.dev/core. It includes the string catalog.

Install @docx-editor.dev/pro for tracked changes, comments, and custom nodes. Install @docx-editor.dev/editor-api to automate documents from code.

Quickstart

Import the editor stylesheet once from your application entry. Render <DocxEditor> with DOCX bytes:

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

export default function App() {
  return <DocxEditor document={docxBytes} />;
}

<DocxEditor> renders the title bar, menu, toolbar, navigation pane, hyperlink popover, context menu, and editable document.

With the Next.js App Router, render the editor inside a "use client" component. The editor uses browser APIs and does not support server rendering.

Package exports

• DocxEditor provides the packaged editor and compound parts. Parts include DocxEditor.Root, DocxEditor.Viewport, DocxEditor.Content, DocxEditor.Toolbar, DocxEditor.Menu, DocxEditor.Navigation, DocxEditor.HyperLink, and DocxEditor.ContextMenu.
• Hooks include useDocxEditor, useEditorState, useEditorCommand, useEditorEvent, usePageSetup, useParagraphIndent, and useFontFamily.
• Top-level components include DocxEditorRoot, DocxEditorViewport, DocxEditorContent, DocxEditorToolbar, DocxEditorMenu, DocxEditorNavigation, and DocxEditorPageSetupDialog.

@docx-editor.dev/pro provides the review module and sidebar under the EigenPal Pro License. The React adapter does not export these features.

Import components, hooks, and engine helpers from the package root. The package does not provide /ui, /hooks, or /dialogs subpaths.

Provider primitives

Use the provider primitives to arrange toolbars, menus, and document controls:

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

export function CustomFrame({ bytes }: { bytes: Uint8Array }) {
  return (
    <DocxEditor.Root document={bytes}>
      <DocxEditor.Toolbar />
      <DocxEditor.Viewport>
        <DocxEditor.Navigation />
        <DocxEditor.Content />
        <DocxEditor.HyperLink />
        <DocxEditor.ContextMenu />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  );
}

Toolbar

Use DocxEditorToolbar or its DocxEditor.Toolbar alias. This example adds your own Bold button alongside the packaged controls:

import { DocxEditor, useEditorCommand } from '@docx-editor.dev/react';

function BoldButton() {
  const bold = useEditorCommand('text.bold');
  return (
    <button
      // Prevent toolbar actions from moving the document caret.
      onMouseDown={(event) => event.preventDefault()}
      onClick={() => bold.execute()}
      disabled={!bold.isEnabled}
    >
      Bold
    </button>
  );
}

export function ToolbarOnly({ bytes }: { bytes: Uint8Array }) {
  return (
    <DocxEditor.Root document={bytes}>
      <DocxEditor.Toolbar>
        <BoldButton />
      </DocxEditor.Toolbar>
      <DocxEditor.Viewport>
        <DocxEditor.Content />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  );
}

To choose a subset of packaged controls, set preset={false} and include the named parts you need. For examples, see Custom toolbar.

Export and print

Configure menu.exporters to connect Markdown and PDF conversion handlers. File > Print uses the same PDF handler as File > Export > PDF. PDF conversion runs on your Node.js server and requires the EigenPal Pro License.

For setup, see Export Markdown and PDF and Print documents.

Editing API

Use @docx-editor.dev/editor-api/browser to control the open document. Pass the React adapter's editor instance to the API, which follows the supported Office.js subset:

import { useDocxEditor } from '@docx-editor.dev/react';
import { DocxEditor as BrowserDocxEditor } from '@docx-editor.dev/editor-api/browser';

function AutomationButton() {
  const editor = useDocxEditor();

  function run() {
    if (!editor) return;
    const runtime = BrowserDocxEditor.createBrowser(editor);
    // Use `runtime`, then call `runtime.dispose()`.
  }

  return (
    <button disabled={!editor} onClick={run}>
      Run automation
    </button>
  );
}

For object model details, see the Editing API documentation.

Next steps

• React composition
• React hooks
• React props
• React examples
• Igloo customization example
• Igloo example source
• React API reference