Props & Ref Methods

The DocxEditor component accepts the following props, grouped by concern.

Source: DocxEditorProps

Document Input

Pass your document data to the editor. Use documentBuffer for raw file data (most common), or document if you've already parsed it.

Prop	Type	Default	Description
`documentBuffer`	`DocxInput \| null`	—	Document data — ArrayBuffer, Uint8Array, Blob, or File
`document`	`Document \| null`	—	Pre-parsed document (alternative to documentBuffer)

<DocxEditor documentBuffer={arrayBuffer} />
 
{/* Or from a File input */}
const file = e.target.files[0];
<DocxEditor documentBuffer={file} />

Editor Mode

Control how the editor behaves — direct editing, tracked suggestions, view-only, or fully read-only. Toggle between modes below to see the difference.

Prop	Type	Default	Description
`mode`	`EditorMode`	`'editing'`	Editor mode: 'editing' (direct edits), 'suggesting' (track changes), or 'viewing' (read-only).
`onModeChange`	`(mode: EditorMode) => void`	—	Callback when the editing mode changes
`readOnly`	`boolean`	—	Whether the editor is read-only. When true, hides toolbar and rulers

{/* Google Docs-style mode switching */}
<DocxEditor
  documentBuffer={buf}
  mode="suggesting"
  onModeChange={(m) => setMode(m)}
/>
 
{/* Read-only document viewer (no toolbar, no caret) */}
<DocxEditor documentBuffer={buf} readOnly />

Toggle editor chrome — toolbar, zoom slider, rulers, margin guides, outline sidebar, and print button. Try the checkboxes below to see each prop in action.

Prop	Type	Default	Description
`showToolbar`	`boolean`	`true`	Whether to show toolbar
`showZoomControl`	`boolean`	`true`	Whether to show zoom control
`showRuler`	`boolean`	`false`	Whether to show horizontal ruler
`rulerUnit`	`'inch' \| 'cm'`	`'inch'`	Unit for ruler display
`showMarginGuides`	`boolean`	`false`	Whether to show page margin guides/boundaries
`marginGuideColor`	`string`	`'#c0c0c0'`	Color for margin guides
`showOutline`	`boolean`	`false`	Whether to show the document outline sidebar
`showPrintButton`	`boolean`	`true`	Whether to show print button in toolbar
`initialZoom`	`number`	`1.0`	Initial zoom level

<DocxEditor
  documentBuffer={buf}
  showToolbar
  showRuler
  rulerUnit="cm"
  showMarginGuides
  showOutline
  initialZoom={0.75}
/>

Title Bar Customization

The title bar sits above the toolbar. Add your app logo, show the document name, and place custom actions on the right. Toggle the checkboxes to see each render prop.

Prop	Type	Default	Description
`renderLogo`	`() => ReactNode`	—	Custom logo/icon for the title bar
`documentName`	`string`	—	Document name shown in the title bar
`onDocumentNameChange`	`(name: string) => void`	—	Callback when document name changes
`documentNameEditable`	`boolean`	`true`	Whether the document name is editable
`renderTitleBarRight`	`() => ReactNode`	—	Custom right-side actions for the title bar
`toolbarExtra`	`ReactNode`	—	Custom toolbar actions

<DocxEditor
  documentBuffer={buf}
  renderLogo={() => <img src="/logo.svg" alt="Logo" />}
  documentName="Quarterly Report"
  onDocumentNameChange={(name) => save(name)}
  renderTitleBarRight={() => (
    <button onClick={share}>Share</button>
  )}
/>

Callbacks

React to editor events — document changes, saves, selection updates, clipboard actions, and more.

Prop	Type	Default	Description
`onChange`	`(document: Document) => void`	—	Callback when document changes
`onSave`	`(buffer: ArrayBuffer) => void`	—	Callback when document is saved
`onSelectionChange`	`(state: SelectionState \| null) => void`	—	Callback when selection changes
`onError`	`(error: Error) => void`	—	Callback on error
`onFontsLoaded`	`() => void`	—	Callback when fonts are loaded
`onPrint`	`() => void`	—	Callback when print is triggered
`onCopy`	`() => void`	—	Callback when content is copied
`onCut`	`() => void`	—	Callback when content is cut
`onPaste`	`() => void`	—	Callback when content is pasted

<DocxEditor
  documentBuffer={buf}
  onSave={(buffer) => uploadToServer(buffer)}
  onChange={(doc) => setDirty(true)}
  onError={(err) => toast.error(err.message)}
/>

Theming & Styling

Apply a custom theme, add CSS classes, or pass inline styles to the editor container.

Prop	Type	Default	Description
`theme`	`Theme \| null`	—	Theme for styling
`author`	`string`	—	Author name used for comments and track changes
`className`	`string`	—	Additional CSS class name
`style`	`CSSProperties`	—	Additional inline styles
`placeholder`	`ReactNode`	—	Placeholder when no document
`loadingIndicator`	`ReactNode`	—	Loading indicator
`printOptions`	`PrintOptions`	—	Print options for print preview

<DocxEditor
  documentBuffer={buf}
  author="Jane Smith"
  className="rounded-lg"
  placeholder={<EmptyState />}
  loadingIndicator={<Spinner />}
/>

Ref Methods

Access imperative methods via a ref. These let you programmatically save, zoom, navigate, and print.

Method	Signature	Description
`getAgent`	`() => DocumentAgent \| null`	Get the DocumentAgent for programmatic access
`getDocument`	`() => Document \| null`	Get the current document
`getEditorRef`	`() => PagedEditorRef \| null`	Get the editor ref
`save`	`(options?: { selective?: boolean }) => Promise<ArrayBuffer \| null>`	Save the document to buffer. Pass { selective: false } to force full repack.
`setZoom`	`(zoom: number) => void`	Set zoom level
`getZoom`	`() => number`	Get current zoom level
`focus`	`() => void`	Focus the editor
`getCurrentPage`	`() => number`	Get current page number
`getTotalPages`	`() => number`	Get total page count
`scrollToPage`	`(pageNumber: number) => void`	Scroll to a specific page
`openPrintPreview`	`() => void`	Open print preview
`print`	`() => void`	Print the document directly

const ref = useRef<DocxEditorRef>(null);
 
// Save and upload
const buffer = await ref.current.save();
await fetch('/api/upload', { method: 'POST', body: buffer });
 
// Navigation & zoom
ref.current.setZoom(1.5);
ref.current.scrollToPage(3);
 
// Get document model
const doc = ref.current.getDocument();
console.log(doc.body.sections.length);
 
// Print
ref.current.print();