Props

<DocxEditor> is the packaged host over the provider primitives. The full generated reference is at /docs/2.x/api/react; this page groups the current root props by how you actually wire the editor.

Document and mount state

Use document for the current document source and fonts for measurement fidelity.

const bytes = new Uint8Array(await fetch('/template.docx').then((r) => r.arrayBuffer()));

<DocxEditor document={bytes} mode="edit" />;

Modules

modules registers capability modules at construction. It is how @docx-editor.dev/pro adds tracked changes, comments, and custom nodes.

Registration happens at construction, like mode, so the array identity has to be stable. Build it outside the component or memoize it, or the editor rebuilds on every render:

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

const MODULES = [reviewModule()];

<DocxEditor document={bytes} modules={MODULES} author="Jess Lin" />;

Without a module the editor still opens a document that carries revisions and comments, renders them in their final state, and saves them back untouched. Registering the module is what makes them visible and actionable. See Pro.

Chrome and layout

These props control the packaged frame around the painted document.

Appearance (dark mode)

colorMode themes the editor chrome and renders the document canvas the way Word's dark view does. It never changes the document itself: saving and printing are unaffected. Drive it from your own UI:

const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');

<button onClick={() => setColorMode((m) => (m === 'dark' ? 'light' : 'dark'))}>
  Toggle theme
</button>
<DocxEditor document={bytes} colorMode={colorMode} />

See the Dark mode guide for how the canvas transform works, what it does and doesn't change, and how to report issues.

Fonts

fonts supplies the font bytes the engine measures with, so line wrap and page breaks match Word. Fonts embedded in the document wire in automatically. The font picker offers what the document declares merged with what you configure. Read that list from useFontFamily() rather than a prop.

The usual value is what loadDefaultFonts() returns:

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

const fonts = await loadDefaultFonts();

<DocxEditor document={bytes} fonts={fonts} onFontError={(e) => report(e.code)} />;

fonts is sampled at mount. Replace it by remounting the editor with a new configuration.

Pass a function instead and the editor calls it once per load, with the families the document declares, so it loads only the faces that file uses. Wrap it in useFonts to keep the prop's identity stable, or the editor rebuilds on every render:

import { DocxEditor, useFonts } from '@docx-editor.dev/react';
import { googleFonts } from '@docx-editor.dev/fonts/google';

function Editor({ bytes }: { bytes: Uint8Array }) {
  const fonts = useFonts(googleFonts());
  return <DocxEditor document={bytes} fonts={fonts} />;
}

A resolver that fetches makes opening a document perform network requests, which the editor never does on its own. Read the guide before reaching for one.

See the Fonts and measurement guide for the font sources, on-demand resolution, how they compose, and how to supply your own faces with loadFonts.

Title bar customization

The header strip is fully overridable.

<DocxEditor
  document={bytes}
  title={file.name}
  onTitleChange={(name) => updateMetadata({ name })}
  renderTitleBarRight={() => <SaveIndicator dirty={dirty} />}
/>

Callbacks

Lifecycle and integration hooks.

<DocxEditor
  document={bytes}
  onReady={(editor) => console.log(editor.snapshot())}
  onChange={(change) => reportRevision(change.revision)}
  onSave={() => void persist()}
  onOpen={() => void openPicker()}
  onFontError={(err) => reportError(err)}
/>

Ref methods

Imperative API exposed through forwardRef. Capture a DocxEditorRef when you want to load, save, focus, or reach the full Editor facade.

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

const editorRef = useRef<DocxEditorRef>(null);

const buf = await editorRef.current?.save(); // Promise<ArrayBuffer | null>
const editor = editorRef.current?.getEditor();
editorRef.current?.focus();

Common methods:

The full method list with signatures is at /docs/2.x/api/react.

Next steps

• React quickstart
• React examples
• Full API reference