Operand

da ploy? ed.
scheme

gram: docs

DOCX Editor — .docx in, .docx out. Open source, agent ready, client-side.

npm version npm downloads license Demo Documentation

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.

docx-editor screenshot

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
fr French
he Hebrew
hi Hindi
pl Polish
pt-BR Portuguese (Brazil)
tr Turkish
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

[!TIP] Questions or custom features? Email docx-editor@eigenpal.com.