DOCX Editor

Edit Word documents with a Word-style toolbar, import and export, formatting controls, page thumbnails, links, images, tables, and tracked changes.

The 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 DOCX mutations through the package editor API.

"use client";

import { DocxEditorPreview } from "@/components/ui/docx-editor";

export function DocxEditorExample() {
  return <DocxEditorPreview src="/path/to/document.docx" />;
}

Installation


pnpm dlx shadcn@latest add https://ui.extend.ai/r/docx-editor.json

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 cached across mounts.

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

Deploy your document processing on Extend

Trusted by Brex, Flatiron, Square, and more.

Extend provides production ready tools to handle your toughest documents.