GitHub - eigenpal/docx-editor: Open-source WYSIWYG .docx editor library with canonical OOXML, tracked changes, and real-time collaboration.
Pangram verdict · v3.3
We believe that this document is a mix of AI-generated, AI-assisted, and human-written content
AI likelihood · overall
MixedArticle text · 477 words · 3 segments analyzed
Open-source WYSIWYG .docx editor for React and Vue with canonical OOXML, tracked changes, and real-time collaboration. Agent-ready. Live demo | Documentation Quick Start npm install @eigenpal/docx-editor-react See the React quick start below. npm install @eigenpal/docx-editor-vue See the Vue quick start below. npm install @eigenpal/nuxt-docx-editor See the Nuxt quick start below.
Packages
Package Description Docs
@eigenpal/docx-editor-react React adapter. Toolbar, paged editor, plugins. Docs
@eigenpal/docx-editor-vue Vue 3 adapter. Toolbar, paged editor, plugins. Docs
@eigenpal/nuxt-docx-editor Nuxt 3 & 4 module wrapping the Vue adapter. Docs
@eigenpal/docx-editor-core Framework-agnostic core: OOXML parser, serializer, layout engine, ProseMirror schema. Depend on this if you fork the React or Vue adapter. Docs
@eigenpal/docx-editor-i18n Shared locale strings and types consumed by both adapters. Docs
@eigenpal/docx-editor-agents Agent SDK and chat UI: framework-agnostic bridge, MCP server, AI SDK adapters, plus UI components. Docs
Forking the adapter? Keep your fork thin. Depend on @eigenpal/docx-editor-core directly so parser, serializer, and rendering fixes land in your build automatically, without backporting each upstream change by hand.
React import { useState } from 'react'; import { DocxEditor } from '@eigenpal/docx-editor-react'; import '@eigenpal/docx-editor-react/styles.css';
export function App() { const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
return ( <> <input type="file" accept=".docx" onChange={async (e) => setBuffer((await e.target.files?.[0]?.arrayBuffer()) ??
null)} /> {buffer && <DocxEditor documentBuffer={buffer} mode="editing" />} </> ); }
Next.js / SSR: Use dynamic import. The editor requires the DOM.
Full docs: packages/react · API reference. Vue <script setup lang="ts"> import { ref } from 'vue'; import { DocxEditor } from '@eigenpal/docx-editor-vue'; import '@eigenpal/docx-editor-vue/styles.css';
const buffer = ref<ArrayBuffer | null>(null);
async function loadFile(e: Event) { const file = (e.target as HTMLInputElement).files?.[0]; buffer.value = file ? await file.arrayBuffer() : null; } </script>
<template> <input type="file" accept=".docx" @change="loadFile" /> <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" /> </template> Full docs: packages/vue · API reference. Nuxt // nuxt.config.ts export default defineNuxtConfig({ modules: ['@eigenpal/nuxt-docx-editor'], }); @eigenpal/nuxt-docx-editor wraps the Vue adapter as a Nuxt 3 & 4 module: it auto-imports an SSR-safe <DocxEditor> component (no manual import, no <ClientOnly> wrapper) and the Vue composables. Full docs: packages/nuxt. Plugins import { DocxEditor } from '@eigenpal/docx-editor-react'; import { PluginHost, templatePlugin } from '@eigenpal/docx-editor-react/plugin-api';
<PluginHost plugins={[templatePlugin]}> <DocxEditor documentBuffer={buffer} /> </PluginHost>; See the plugin documentation for the full plugin API. Development bun install bun run dev # localhost:5173 bun run build bun run typecheck A live preview of main is auto-deployed at latest.docx-editor.dev — useful for trying out changes before they ship to npm. Examples: Vite | Next.js | Remix | Astro | Vue | Nuxt Documentation | Props & Ref Methods | Plugins | Architecture Contributing Contributions welcome. See CONTRIBUTING.md for setup, tests, and the one-time CLA signature.
Translations
Locale Language
en English
de German
pl Polish
pt-BR Portuguese (Brazil)
tr Turkish
he Hebrew
zh-CN Chinese (Simplified)
Help translate the editor into your language! See the full i18n contribution guide. bun run i18n:new de # scaffold German locale bun run i18n:status # check translation coverage Commercial Support