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
• DOCX document refresh example
• 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 adapter is published to npm. The Nuxt module remains a private workspace package. Read their setup instructions in the repository:

• Vue starter
• Nuxt starter

These examples also include setup instructions in the repository:

• DOCX anchor navigation: Scroll to paragraph references and configure temporary highlights.
• Pop-out window: Move the editor into its own browser window and back, with its undo history.
• DOCX to PDF example: Export a document and configure PDF fonts.

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 Connect an agent to a document to choose how to apply and show agent updates.