React DOCX Editor

A React DOCX editor component for editing Word documents with a Word-style toolbar, import and export, formatting controls, page thumbnails, links, images, tables, and tracked changes.

The React DOCX Editor is an experimental document editing surface built on top of @extend-ai/react-docx. It keeps the viewer shell familiar while enabling direct Word document mutations through the package editor API.

Installation


pnpm dlx shadcn@latest add @extend/docx-editor

Useful behaviors

Toolbar controls cover import, export, undo, redo, zoom, theme, read-only mode, tracked changes, text styles, color, highlight, links, alignment, lists, borders, images, and tables.
Page thumbnails stay in the left rail and scroll the editor viewport to the selected page.
The editor uses useDocxEditor and DocxEditorViewer, so mutations flow through the public react-docx controller API.
Uploaded files replace the current document while URL-loaded DOCX files are fetched from the provided src.

API Reference

DocxEditorPreview

The DocxEditorPreview component renders an editable DOCX file with upload, toolbar, thumbnails, zoom, and export controls.

Prop	Type	Default	Required
`className`	`string`	`-`	No
`defaultIsDark`	`boolean`	`false`	No
`fileName`	`string`	`-`	No
`isDark`	`boolean`	`-`	No
`onIsDarkChange`	`(isDark: boolean) => void`	`-`	No
`rounded`	`boolean`	`false`	No
`src`	`string`	`-`	No

DOCX Viewer Excel Viewer

On This Page

Installation Useful behaviors API Reference DocxEditorPreview