Your components and layout
Compose the editor from Root, Viewport, and Content. Place your toolbar, menus, and panels around the document. Reuse packaged parts or render your own React or Vue components.
Customize your React or Vue DOCX editor.
Build a DOCX editor interface in React or Vue with your own components and CSS. Replace toolbars, comment threads, and tracked-change controls. Public hooks and chrome slots connect your UI to the editor's state and commands.
Igloo showcases a custom editor interface built with these APIs.
Editor UI customization
Styling
Match your app
Components
Use React or Vue
Layout
Place controls anywhere
/ Capabilities
Customize each part of the editor interface.
Command state and actions
Connect controls through stable chrome slot IDs. Read active and enabled state, check why a command is disabled, and execute it from your UI. The engine supplies the behavior.
Custom comments and tracked changes
Style review markup with CSS. Use review hooks to render comment threads and revision lists with your own reply, resolve, accept, and reject controls. Review features require Pro.
/ Implementation
Choose how much of the UI you build.
Start with CSS, replace individual components, or compose your own editor shell. You can use these approaches together.
- 01
Match your app’s style guide
Override the editor's CSS custom properties for colors and control styling. Set review colors and revision decorations to match your app.
- 02
Replace components and slots
Use asChild in React or as-child in Vue to give your component editor behavior. Override a slot, remove a control, or arrange all toolbar parts yourself.
- 03
Implement your own controls
Read command state with React hooks or Vue composables. Use useEditorCommand for toolbar actions and useReview for custom comment and revision interfaces.
/ Your markup, editor behavior
Connect your components to editor commands.
React hooks and Vue composables expose the editor's command state. Pass a chrome slot ID to useEditorCommand to read its active and enabled state, then run the command from your component. You control the markup, styles, and position in your layout.
For comments and tracked changes, useReview exposes the same data and actions as the packaged review interface. Build your own cards and connect reply, resolve, accept, and reject actions. Review features require the Pro review module.
BoldButton.tsxTSX
'use client';
import { useEditorCommand } from '@docx-editor.dev/react';
// Render inside DocxEditor.Root, anywhere in your app's layout.
export function BoldButton() {
const bold = useEditorCommand('text.bold');
return (
<button
type="button"
className="my-app-button"
aria-pressed={bold.isActive}
disabled={!bold.isEnabled}
title={bold.disabledReason ?? 'Bold'}
onMouseDown={(event) => event.preventDefault()}
onClick={() => bold.execute()}
>
Bold
</button>
);
}/ Industry applications
Examples by industry.
You define access, validation, retention, and approval rules. DOCX Editor applies supported document operations.
A review workspace for your team
Place the document beside your clause library and review queue. Show comments and proposed changes in your own panels.
- Custom accept and reject controls
- Reviewer colors from your design system
- Comment threads beside case details
An editor that belongs in your app
Use your existing buttons, icons, and navigation. Choose which document commands your users see and where they appear.
- A compact toolbar for focused editing
- Host-owned menus and actions
- Consistent styles across your app
Controls for each step of the work
Build separate interfaces for drafting, commenting, and reviewing. Read command state to keep custom controls in sync with the document.
- A document viewer with a review panel
- Custom comment and revision filters
- App-specific save and export actions
/ Questions
Common questions
Can I customize the editor in both React and Vue?+
Yes. Both adapters expose composition primitives, named toolbar parts, chrome slot IDs, and review APIs. React hooks return reactive state as values. Vue composables expose it through refs.
Can I replace the entire editor interface?+
Yes. Compose Root, Viewport, and Content to host the document, then build the surrounding interface with your own markup. Public hooks expose command state, actions, and review data for your controls.
Do I have to rebuild every control?+
No. You can restyle packaged components, replace individual chrome slots, or use asChild with your own components. Set preset={false} when you want to arrange all toolbar parts yourself.
What are chrome slots?+
Chrome slots are stable identifiers for editor controls, such as text.bold and history.undo. Use them to connect custom controls to the editor's command state and actions.
Can I build custom comments and tracked-change controls?+
Yes. The Pro review module exposes the same data and actions as the packaged review interface. Use useReview to render your own threads and revision lists with reply, resolve, accept, and reject actions.
Does changing review styles change the Word file?+
No. Review colors and styling change presentation in your app. They do not change the document file.
Add DOCX editing to your application.
Start with the open-source editor. Add commercial review and automation features when your workflow needs them.
More document solutions
DOCX agents
Build AI agents that read, draft, comment, and redline DOCX files through typed document operations. You control the model, tools, permissions, and review steps.
Programmatic document editing API
Read and change Word documents through an Office.js-compatible API. Run these operations in an open editor or against DOCX bytes on a server.
Collaborative editor
Let several people edit one DOCX file together. Show live carets and selections, keep each person's undo history separate, and merge offline edits after reconnection.
Word-faithful document preview
Add a React or Vue DOCX viewer with paginated layout and document fonts. Render tables, images, headers, and footers. Add Pro to review comments and tracked changes.
Keep the 30-day payment window.
Keep the 30-day payment window.
Keep the 30-day payment window.