Props

Configure the editor

This example loads DOCX bytes, sets an author, and handles the save action:

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

interface ContractEditorProps {
  bytes: Uint8Array;
  upload: (buffer: ArrayBuffer) => Promise<void>;
}

export function ContractEditor({ bytes, upload }: ContractEditorProps) {
  const editorRef = useRef<DocxEditorRef>(null);
  return (
    <DocxEditor
      ref={editorRef}
      document={bytes}
      mode="edit"
      author="Jess Lin"
      onSave={async () => {
        const buffer = await editorRef.current?.save();
        if (buffer) await upload(buffer);
      }}
    />
  );
}

For generated signatures, see the React API reference.

Set props

Document

Fonts

Wrap resolvers such as packagedFonts() in useFonts to keep one identity. For loading choices, see Fonts and measurement.

Dark mode

colorMode does not change authored colors, saved output, or printing. See Dark mode.

Chrome and layout

Handle callbacks

Use the ref

<DocxEditor> exposes DocxEditorRef through forwardRef:

const buffer = await editorRef.current?.save();
const editor = editorRef.current?.getEditor();
editorRef.current?.focus();

Limits

• fieldResults, contentLockPolicy, lockedControlNavigation, and modules apply at creation. To change them, remount with a different React key.
• Collaboration refuses fieldResults="editable" with a TypeError.
• The drawing renderers from drawingModule() and reviewModule() serve every editor in the page. A remount does not remove them. See Advanced drawing rendering.
• Without the review module, the editor preserves revisions and comments on save but renders only the final state.
• If you hide hyperlinkPopup, mount a panel that calls useHyperlinkPopup(), or the Insert link controls stay disabled.
• Author colors have no prop. Mount <DocxEditor.AuthorStyle /> or <DocxEditor.ColorByChangeType />. See Tracked changes.
• To customize unsupported content, see custom unsupported-content components.

Next steps

• React examples: Automate an open editor.
• React composition: Build your own chrome.
• React API reference: Generated signatures.