Examples

Use a runnable starter for a complete app. Each starter covers one framework or feature, and has a page of its own. 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:

1. Clone the repository.

2. Run this command from the repository root to install dependencies:

   bun install

3. 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.

4. Run the bun run dev:* command from the starter README.

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

Each starter has its own page with the full README, the exact commands, and a live demo where one exists:

• Happy path: the packaged DOCX editor
• Vite DOCX editor example
• Next.js DOCX editor example
• Remix DOCX editor example
• Astro DOCX editor example
• Igloo Editor
• Custom nodes in Word content controls
• Word document automation
• DOCX to Markdown example
• Peer-to-peer DOCX collaboration
• Server-backed DOCX collaboration
• Agent example: Roast My Doc
• Writer agent example
• Server agent review

The Vue and Nuxt starters use workspace modules that are not published to npm. Read them in the repository: Vue starter and Nuxt starter.

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.