Components — React DOCX Editor + Agent UI Kit — docx-editor Docs

@eigenpal/docx-js-editor exports a complete UI kit, not a single component. Most applications render <DocxEditor> and configure from there. Every part of the chrome (toolbar, formatting bar, color picker, locale provider, agent chat surface) is independently exported and composable into custom layouts.

`<DocxEditor />`

The main component. Renders the editor surface, toolbar, ruler, comments sidebar, and (optionally) the agent panel.

import { DocxEditor } from '@eigenpal/docx-js-editor';
import '@eigenpal/docx-js-editor/styles.css';
 
<DocxEditor documentBuffer={buffer} showToolbar showRuler />

Full prop reference, including ref methods like addComment, proposeChange, findInDocument, onContentChange, lives in Props & Ref Methods.

Compound component with three layers: a title bar, a formatting bar, and a slot for custom items.

import { EditorToolbar } from '@eigenpal/docx-js-editor';
 
<EditorToolbar {...toolbarProps}>
  <EditorToolbar.TitleBar>
    <EditorToolbar.Logo><MyLogo /></EditorToolbar.Logo>
    <EditorToolbar.DocumentName value={name} onChange={setName} />
    <EditorToolbar.MenuBar />
    <EditorToolbar.TitleBarRight>
      <button>Save</button>
    </EditorToolbar.TitleBarRight>
  </EditorToolbar.TitleBar>
  <EditorToolbar.FormattingBar />
</EditorToolbar>

Sub-component	Purpose
`<EditorToolbar.TitleBar>`	Three-column wrapper. Auto-arranges Logo, DocumentName + MenuBar, TitleBarRight.
`<EditorToolbar.Logo>`	Left-aligned brand slot.
`<EditorToolbar.DocumentName>`	Editable document title.
`<EditorToolbar.MenuBar>`	File / Format / Insert dropdowns. Wired automatically.
`<EditorToolbar.TitleBarRight>`	Right-aligned action slot (Save, Share, status badges).
`<EditorToolbar.FormattingBar>`	The icon formatting bar (bold, italic, fonts, colors, lists, tables). Standalone-capable.
`<FormattingBar>`	Same component, exported for use outside the toolbar wrapper.

Full toolbar customization (render props, font dropdown, custom buttons) lives in Toolbar Customization.

Agent UI kit

Chat surface components, added in 0.2.0. Pairs with useDocxAgentTools and getAiSdkTools from @eigenpal/docx-editor-agents.

import {
  AgentPanel,
  AgentChatLog,
  AgentComposer,
  AgentSuggestionChip,
  AgentTimeline,
} from '@eigenpal/docx-js-editor';

Component	Purpose
`<AgentPanel>`	Resizable side panel. Persists width to localStorage. Children render whatever you want: chat, tabs, settings.
`<AgentChatLog>`	Message list. Renders user/assistant bubbles with a per-turn tool-call timeline. Pass `humanizeToolName={getToolDisplayName}` to label tools (`add_comment` → "Adding comment").
`<AgentComposer>`	Multi-line input with submit. Keyboard-friendly.
`<AgentSuggestionChip>`	Pre-canned-prompt chip. Pair with `chat.sendMessage` for quick actions.
`<AgentTimeline>`	Standalone tool-call timeline. Auto-collapses to "N steps" when not streaming.

The panel and the agent toolkit are decoupled by design. Bring your own chat backend: Vercel AI SDK, OpenAI direct, Anthropic, LangChain. See Agent API for the wiring.

`<ColorPicker />`

Word-style split button, added in 0.2.0. Left half re-applies the last color, right half opens the full picker. Used internally by the text-color, highlight, table-cell-fill, and border-color buttons. Exported for custom toolbars.

import { ColorPicker } from '@eigenpal/docx-js-editor';
 
<ColorPicker
  mode="text"
  splitButton
  defaultColor="#ff0000"
  value={color}
  onChange={setColor}
/>

Prop	Default	Description
`mode`	(required)	`'text'`, `'highlight'`, or `'border'`. Controls the icon and "no color" semantics.
`splitButton?`	`true`	Render the Word-style split button. Set `false` for a single-button shape.
`defaultColor?`	`red` (text), `yellow` (highlight)	Initial "last picked" color used by the apply half.

Breaking change in 0.2.0: the legacy inline ColorPicker is removed. The previously named AdvancedColorPicker is now exported as ColorPicker. See the release notes.

`<LocaleProvider />`

Wraps a subtree in a different locale. Render the editor in Polish, German, French, Brazilian Portuguese, or any language you've contributed.

import { LocaleProvider } from '@eigenpal/docx-js-editor';
import pl from '@eigenpal/docx-js-editor/i18n/pl.json';
 
<LocaleProvider translations={pl}>
  <DocxEditor documentBuffer={buffer} />
</LocaleProvider>

Full setup, including how to add a new locale, lives in Translations (i18n).

Plugin-provided components

Plugins can register their own UI. The template-tag highlighting plugin, for instance, exports templatePlugin and createTemplatePlugin for use with the editor's plugin system. See Plugins.

For the agent-side primitives that pair with the components above (useDocxAgentTools, getAiSdkTools, toAgentMessages), see the Agent API.