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.
Read the guideCustomize 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.
Explore Igloo and Contract redlining, built with the same editor APIs.
Live examples
Try a DOCX editor.
Open Igloo to try a custom interface, or review an NDA in Contract redlining.
Custom editor UI
Igloo
An ice-themed editor with its own toolbar, menus, and document workspace. Try a different take on the editing experience.
Open live demo in a new tab
Review and automation
Contract redlining
Review an NDA with a scripted assistant. Apply suggestions, accept or reject tracked changes, and export to Word.
Open live demo in a new tab/ 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.
Read the guideCustom 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.
Read the guide/ 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.
Legal
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
Product teams
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
Document workflows
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
Contract redlining
Create tracked DOCX changes, let reviewers accept or reject them, and export a Word document. Use browser or Node.js APIs.
Explore Contract redliningMarkdown Converter
Convert Word (.docx) files to paginated Markdown for agents and retrieval-augmented generation (RAG). Keep page references with body text and read headers and footers separately.
Explore Markdown ConverterPDF converter
Convert DOCX files to PDF on your Node.js server. Use the same fonts and layout settings as the editor to keep page breaks consistent.
Explore PDF converterDOCX 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.
Explore DOCX agentsProgrammatic 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.
Explore Programmatic document editing APICollaborative 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.
Explore Collaborative editorDOCX viewer
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.
Explore DOCX viewerEditor telemetry
See how fast typing reaches the screen and how long documents take to open, for every editor version you release. Built-in diagnostics exclude document content.
Explore Editor telemetry
Keep the 30-day payment window.
Keep the 30-day payment window.
Keep the 30-day payment window.