Examples

Runnable DOCX editor starters for React, Vue, and server-rendered frameworks, plus themed and headless examples.

Use a runnable starter for a complete app. Each starter covers one framework or feature. You can also use the live demo on this page.

Runnable starters

You can find each starter in the repository's examples/ directory. The web starters use workspace:* dependencies for @docx-editor.dev/* packages. They do not use the published npm packages.

Follow these steps to run a web starter:

Clone the repository.
Run this command from the repository root to install dependencies:
```
bun install
```
Build the packages if the starter README requires a build:
```
bun run build:packages
```
The Vite with React and Vite with Vue starters alias package source. These two starters do not need this build.
Run the bun run dev:* command from the starter README.

To use published packages, replace the workspace:* versions in the starter's package.json.

Packaged editor

Use the packaged <DocxEditor> component in one file. The host adds New, Open, Save, and a minimal review-rail host.

Vite + React

Build a Vite and React single-page app. This starter includes composed controls, the review sidebar, and a custom node.

Vite + Vue

Build a Vue 3 and Vite app with composed controls, navigation, rulers, and package build mode.

Nuxt

Use Nuxt 3 or 4 with a client-only editor and server-side rendering.

Next.js

Integrate the editor with the App Router. One dynamic() import uses ssr: false. The rest of the page uses server rendering.

Remix

Use Remix with Vite. A mount check and lazy() import prevent server rendering for the editor.

Astro

Render the editor as a React island. The client:only="react" directive disables SSR for the component.

Igloo

Build a themed editor. Host markup and hooks replace the packaged controls. This card opens the deployed demo. Its source is in examples/igloo.

Custom nodes

Define, insert, edit, and round-trip a citation node. The document stores it as a Word content control.

Headless editing

Fill a template without a browser or framework. The browser entry can also edit a mounted editor document.

Agent

Use a large language model (LLM) to read an open document and add anchored comments. Tool calls run in the browser against the open editor. This starter requires an OpenAI key.

Read each starter's README for its exact commands.

Live demo

The following demo runs <DocxEditor> on this page. You can open one of your .docx files in it.

Next steps

Follow the quickstart to build a load, edit, and save workflow.
Read installation options for framework-specific setup.
Read React composition for the primitives used by the Igloo starter.
Read the editing API guide for the headless editing object model.
Follow Build a DOCX agent to expose document tools to a model.