DOCX editor examples

Agent example: Roast My Doc

This app uses a language model to read an open DOCX and add comments to selected phrases. Saving the document preserves those comments for Microsoft Word.

Use a React panel to scroll to a paragraph reference, highlight it, or both. Choose the reference, effect, highlight style, duration, and scroll settings to see the result in the document.

Astro DOCX editor example

This example loads the React DOCX editor as an Astro island in the browser. It includes the packaged toolbar and a review pane.

Word document automation

@docx-editor.dev/editor-api opens DOCX bytes, queues edits, and saves the edited document. This example fills template placeholders without a browser.

Peer-to-peer DOCX collaboration

This example uses y-webrtc to replicate a document between browsers. It has no application server or durable shared storage.

Server-backed DOCX collaboration

This example connects a React editor to a Hocuspocus collaboration server. Remote carets show each person's name and avatar.

Custom nodes in Word content controls

This example stores a custom legal citation as a Word content control. You can insert, edit, and save the citation.

DOCX document refresh example

Receive complete DOCX files without replacing the open editor. Preserve scroll position and show temporary highlights with change summaries.

DOCX to Markdown example

Convert a DOCX in your browser and compare the document with its Markdown output.

DOCX to PDF demo

Edit a DOCX document, generate a PDF preview, and download the result.

Public API consumer agents

These deterministic agents execute document action plans using public editor-api imports. They create their input fixtures, save edited DOCX files, reopen them, and assert targeted edits and preserved content. No LLM credentials are needed.

Happy path: the packaged DOCX editor

This example uses the packaged <DocxEditor> component without custom composition.

Igloo Editor

Igloo Editor shows how you can theme and compose the editor.

Next.js DOCX editor example

This Next.js App Router example loads the React DOCX editor in the browser. It includes the packaged toolbar and a review pane.

Move the editor into its own browser window and back. The document, undo history, selection, and comments stay the same across each move. The example uses the Pro review module, so you can comment and suggest changes in either window.

Remix DOCX editor example

This Remix and Vite example loads the React DOCX editor after the route mounts in the browser. It includes the packaged toolbar and a review pane.

Server agent review

Run a Node.js worker that joins a Hocuspocus room as **Review agent** and proposes Word tracked changes. Open the room in two browsers, then accept or reject suggestions from either browser.

This example records collaboration status, room size, and editing performance for editors in a shared Hocuspocus room. The server reports room counts, participant counts, memory use, and refused connections to Prometheus. Metrics exclude room names.

This example sends anonymous editor diagnostics and performance measurements to OpenTelemetry, Sentry, and the console. It records typing delay, layout and paint times, document opens, and refused edits with their hints. A panel beside the editor lists exported events.

This example runs an OpenTelemetry collector, Prometheus, Jaeger, and Grafana locally. Grafana includes the **Editor experience** and **Collaboration** dashboards.

This demo uses public built React and Vue package exports. It displays custom XML as a legal approval card and an inline reference chip. It also replaces the document's unsupported drawing placeholder.

Vite DOCX editor example

This Vite and React app shows the editor composition API with custom chrome.

Writer agent example

Edit an open DOCX through typed agent tools backed by the public editor-api document model. The example requires the EigenPal Pro License.

Vespper MCP

Add AI-powered DOCX editing to your product with Vespper MCP and the EigenPal DOCX editor. Let agents apply edits directly or propose tracked changes for review.