Toolbar customization

Customize the DOCX editor toolbar: hide the built-in toolbar, brand the title bar, append controls, or rebuild it from compound EditorToolbar parts.

The built-in toolbar has two levels: a title bar (logo, document name, File / Format / Insert menus, a right-side action slot) and a formatting bar (undo/redo, zoom, styles, fonts, formatting buttons). You can customize it with render props on <DocxEditor> or compound components from /ui.

Prop	Default	Controls
`showToolbar`	`true`	The entire toolbar (title bar + formatting bar)
`showZoomControl`	`true`	Bottom-right zoom widget
`showRuler`	`false`	Page ruler (`rulerUnit`: `"inch"` or `"cm"`)
`showOutline`	`false`	Document outline drawer
`showOutlineButton`	`true`	Outline toggle button in the toolbar
`showMarginGuides`	`false`	Faint guides at page margins (`marginGuideColor` sets the color)
`initialZoom`	`1.0`	Starting zoom level

// Bare document surface; bring your own toolbar UI.
<DocxEditor documentBuffer={buf} showToolbar={false} showZoomControl={false} />

Title bar via props

The fastest path: keep the built-in toolbar and override its slots.

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

function App({ buf }: { buf: ArrayBuffer }) {
  const [fileName, setFileName] = useState('Untitled.docx');

  return (
    <DocxEditor
      documentBuffer={buf}
      renderLogo={() => <img src="/logo.svg" alt="Logo" width={24} height={24} />}
      documentName={fileName}
      onDocumentNameChange={setFileName}
      documentNameEditable
      renderTitleBarRight={() => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 12, color: '#666' }}>Saved</span>
          <button onClick={handleShare}>Share</button>
        </div>
      )}
    />
  );
}

Prop	Type	Description
`renderLogo`	`() => ReactNode`	Left slot in the title bar
`documentName`	`string`	Display name; editable in place by default
`onDocumentNameChange`	`(name: string) => void`	Fires when the user edits the name
`documentNameEditable`	`boolean`	Default `true`; `false` locks the title
`renderTitleBarRight`	`() => ReactNode`	Right slot: save status, share, avatars
`toolbarExtra`	`ReactNode`	Extra items appended to the formatting bar

Appending formatting-bar items

toolbarExtra adds controls at the end of the formatting bar without replacing anything:

<DocxEditor
  documentBuffer={buf}
  toolbarExtra={
    <>
      <button onClick={handleWordCount}>Word count</button>
    </>
  }
/>

Compound components

For full structural control, hide the built-in toolbar and compose EditorToolbar from @docx-editor.dev/react/ui:

import { EditorToolbar, type EditorToolbarProps } from '@docx-editor.dev/react/ui';

function MyChrome({ toolbarProps }: { toolbarProps: EditorToolbarProps }) {
  return (
    <EditorToolbar {...toolbarProps}>
      <EditorToolbar.TitleBar>
        <EditorToolbar.Logo>
          <img src="/logo.svg" alt="My App" />
        </EditorToolbar.Logo>
        <EditorToolbar.DocumentName value={fileName} onChange={setFileName} placeholder="Untitled" />
        <EditorToolbar.MenuBar />
        <EditorToolbar.TitleBarRight>
          <button onClick={handleSave}>Save</button>
          <button onClick={handleShare}>Share</button>
        </EditorToolbar.TitleBarRight>
      </EditorToolbar.TitleBar>
      <EditorToolbar.Toolbar />
    </EditorToolbar>
  );
}

The pieces:

EditorToolbar is the root; it provides toolbar context to the sub-components.
EditorToolbar.TitleBar lays out the three columns: Logo left, DocumentName over MenuBar in the center, TitleBarRight on the right.
EditorToolbar.MenuBar renders the File, Format, and Insert menus, wired to the context automatically.
EditorToolbar.Toolbar is the formatting-button strip; children are appended at the end, and inline renders it with display: contents for embedding in your own flex row.

For lower-level assembly, /ui also exports Toolbar (the formatting strip standalone), ResponsiveToolbar (adapts to width), and presentational controls such as ToolbarButton, ToolbarGroup, and ToolbarSeparator. ToolbarButton takes active, disabled, title, ariaLabel, and onClick, and renders its children. Wire them to the same callbacks the standalone Toolbar uses: currentFormatting (a SelectionFormatting) for state and onFormat (takes a FormattingAction) for dispatch.

import { ToolbarButton, ToolbarGroup, ToolbarSeparator } from '@docx-editor.dev/react/ui';

<ToolbarGroup label="Text formatting">
  <ToolbarButton title="Bold" ariaLabel="Bold" active={currentFormatting?.bold} onClick={() => onFormat('bold')}>
    B
  </ToolbarButton>
  <ToolbarButton title="Italic" ariaLabel="Italic" active={currentFormatting?.italic} onClick={() => onFormat('italic')}>
    I
  </ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton title="Clear formatting" ariaLabel="Clear formatting" onClick={() => onFormat('clearFormatting')}>
    Tx
  </ToolbarButton>
</ToolbarGroup>;

Naming note for 0.x upgraders: the formatting strip was FormattingBar, now Toolbar; the old composite Toolbar is now EditorToolbar.

Next steps

Props reference for the full toolbar prop group
React examples for a complete custom-toolbar build
i18n to localize the built-in toolbar strings

Toolbar

Show and hide toolbar UI

Title bar via props

Appending formatting-bar items

Compound components

Next steps

On this page