Examples
Runnable DOCX editor starters for Vite, Next.js, Remix, Astro, Vue, and Nuxt, plus collaboration and AI agent demos, and live in-page playgrounds.
Two kinds of examples. The starters are complete apps in the repo, one per framework or feature; clone and run them. The live demos run right here on this page.
Runnable starters
Every starter lives under examples/ in the repo and runs with bun install followed by the bun run dev:* script in its README. All of them resolve @eigenpal/* from the monorepo workspace rather than from npm, so build the packages once first (bun run build:packages from the repo root); to run a starter against the published npm packages instead, replace the workspace:* versions in its package.json.
Vite + React
Plain Vite + React SPA. No SSR boundary; use this when you want a client-rendered starter.
Vue 3
Vue 3 + Vite SPA with the Vue adapter. Same editor surface as React, with Vue components and refs.
Next.js
App Router integration. One dynamic() import with ssr: false; the rest of the page stays server-rendered.
Nuxt
The @eigenpal/nuxt-docx-editor module on Nuxt 3/4. Register the module; the SSR-safe component is auto-imported.
Remix
Remix (Vite) with the editor gated behind a mount check and a lazy() import.
Astro
The editor as a React island with client:only="react", skipping Astro's SSR for the component.
Realtime collaboration
Multi-user editing over Yjs, y-prosemirror, and y-webrtc. Peers sync browser-to-browser; no backend required.
React/Vue parity
Both adapters served from the same deployment, resolved from the built package output used for npm releases.
Agent chat (Roast My Doc)
Next.js app wiring useDocxAgentTools to an OpenAI-backed /api/chat route. The agent reads your DOCX and inserts comments live in the editor.
Headless agents
Next.js + OpenAI demo of DocxReviewer and agent tool calls operating on a Document model, no live editor.
Plugin: hello world
Minimal scaffold for the React adapter's plugin API. Start here for your first plugin.
Plugin: docxtemplater
Plugin adding docxtemplater variable insertion with a live preview.
Each starter's README has the exact commands.
Live demos
Interactive demos of <DocxEditor> props, running in this page.
Playground
Toggle props and see changes immediately:
Read-only mode
Compare the full editor with a read-only preview. The readOnly prop strips the toolbar and all editing UI:
Mode toggle
Switch between editing, suggesting, and viewing modes:
Toolbar customization
Customize the title bar with a logo, document name, and right-side actions:
Author attribution
Set the author prop to attribute comments and tracked changes to specific users:
Agent chat in the editor
Wire <DocxEditor> to the agent UI kit (<AgentPanel>, <AgentChatLog>, <AgentComposer>) and a chat backend. The agent reads paragraphs, adds comments, suggests tracked changes, and scrolls while the user watches:
The full client + server walkthrough is in AI editing. For OpenAI, Anthropic, and Vercel AI SDK adapters see Bring your own agent.
Next steps
- Quickstart: build the load → edit → save loop yourself
- Installation: per-framework setup behind each starter
- Agents: the toolkit behind the agent demos
- Plugins: the API behind the plugin starters