Open-Source Browser‑Based Word Editor: Introducing docx‑editor

Overview

docx-editor is an open‑source WYSIWYG .docx editor library that runs in the browser. It loads a Word document as an ArrayBuffer, allows editing, and saves back to a standards‑compliant OOXML file that can be opened in Word without losing formatting.

Core Features

OOXML fidelity – preserves fonts, colors, bold/italic, highlights, inline and floating images, merged tables, headers/footers, and page breaks.

Track Changes – "suggesting" mode automatically marks edits with author attribution, allowing acceptance or rejection.

Comment system – thread‑based comments anchored to text ranges, supporting reply, resolve, and delete, matching Word's behavior.

Real‑time collaboration – integrate Yjs to enable multi‑user editing with cursor sync, online status, and comment sync.

AI Agent toolkit – 14 utility functions let LLMs read documents, find text, add comments, suggest changes, scroll, etc., with adapters for Vercel AI SDK, OpenAI, Anthropic, and MCP.

Plugin system – built on ProseMirror's plugin architecture for custom toolbars, shortcuts, and document transformations.

i18n – built‑in support for seven languages, each loaded via code‑splitting (~7 KB per language pack).

Package Structure

@eigenpal/docx-editor-core – framework‑agnostic core (OOXML parser/serializer, ProseMirror schema, layout engine). Approx. 250 KB minified.

@eigenpal/docx-editor-react – React adapter providing <DocxEditor> component, hooks, UI components. Approx. 120 KB.

@eigenpal/docx-editor-vue – Vue 3 adapter (beta). Approx. 115 KB.

@eigenpal/docx-editor-agents – Agent SDK with 14 tools and MCP server. Approx. 80 KB.

@eigenpal/docx-editor-i18n – language packs for seven locales, code‑split (~7 KB each). Approx. 50 KB.

Installation

React projects: npm install @eigenpal/docx-editor-react Vue 3 projects: npm install @eigenpal/docx-editor-vue Nuxt projects (module with auto‑registration):

npm install @eigenpal/nuxt-docx-editor

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor']
});

Basic Usage – React

import { useState, useRef } 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);
  const editorRef = useRef<DocxEditorRef>(null);

  return (
    <>
      <input
        type="file"
        accept=".docx"
        onChange={async e => {
          setBuffer((await e.target.files?.[0]?.arrayBuffer()) ?? null);
        }}
      />
      {buffer && (
        <DocxEditor
          ref={editorRef}
          documentBuffer={buffer}
          mode="editing"
        />
      )}
    </>
  );
}

// Save example
const saved = await editorRef.current?.save();
// `saved` is a .docx ArrayBuffer

Basic Usage – Vue 3 (script‑setup)

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

Next.js requires the component to run on the client, e.g. add "use client" or use next/dynamic with ssr: false.

Real‑time Collaboration

Pass Yjs ProseMirror plugins via the externalPlugins prop. Example using y‑webrtc:

import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';
import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from 'y-prosemirror';

const ydoc = new Y.Doc();
const provider = new WebrtcProvider('my-room', ydoc);
const fragment = ydoc.getXmlFragment('prosemirror');

const plugins = [
  ySyncPlugin(fragment),
  yCursorPlugin(provider.awareness),
  yUndoPlugin()
];

<DocxEditor
  document={createEmptyDocument()}
  externalPlugins={plugins}
  author={user.name}
/>

Production can replace y-webrtc with PartyKit, Liveblocks, or a self‑hosted Hocuspocus server by changing the provider initialization.

AI Agent Integration

The @eigenpal/docx-editor-agents package provides 14 tool functions (e.g., read_document, find_text, add_comment, suggest_change, scroll) that let LLMs operate on the document. Three execution modes are supported.

Live mode – Agent runs in the browser and manipulates the active editor instance.

import { useDocxAgentTools } from '@eigenpal/docx-editor-agents/react';
import { useChat } from '@ai-sdk/react';

const { tools } = useDocxAgentTools({ editorRef });
const chat = useChat({ api: '/api/agent-chat', body: { tools } });

Headless mode – Server‑side usage without a DOM via DocxReviewer.fromBuffer(buf), suitable for CI pipelines or batch processing.

MCP mode – Expose the same toolset as an MCP server over stdio or HTTP, compatible with any MCP client. Tools follow OpenAI’s function‑calling schema, so Vercel AI SDK, Anthropic Claude, OpenAI, and LangChain can use them directly.

Tools address paragraphs using the Word w14:paraId attribute, providing stable identifiers across concurrent edits and multiple tool invocations.

Framework Support

Vite – direct usage with HMR.

Next.js – requires "use client" and optional dynamic import.

Remix – client‑side lazy loading.

Astro – client:only directive.

Vue 3 – direct usage.

Nuxt 3/4 – official module with auto‑registration.

Pros and Cons

Advantages

Pure client‑side, zero backend dependency, good document privacy.

High OOXML fidelity; exported .docx opens in Word without format loss.

Shared core between React and Vue gives a consistent API surface.

Agent SDK with stable paragraph addressing, three run modes, and MCP support.

Apache 2.0 license – commercial‑friendly.

Plugin system built on ProseMirror, reusable ecosystem.

Limitations

Vue adapter is beta; UI components (toolbar, picker) pending version 1.1.

Bundle size ≈200 KB gzipped, which may be large for lightweight scenarios.

Complex layouts (nested tables, footnote references) have known OOXML edge cases.

Only .docx format is supported; .doc, .pdf, etc., are not handled.

Local Testing

Cloned the GitHub repository ( https://github.com/eigenpal/docx-editor) and ran the React/Vite demo. The demo loads docx-editor-demo.docx, showing pagination, ruler, formatting toolbar, revision marks, and comment cards.

Saving the document produced a .docx file of 15 660 bytes, confirming that the editor re‑exports a valid OOXML document.

The Assistant panel is present with placeholder content; integrating a real LLM and backend endpoint is required for full functionality.

Build succeeded with warnings about bundle size, Tailwind scan range, and some browser compatibility notes. These do not prevent development but suggest optimization for production.

A UI quirk: clicking “New” changes the title to “Untitled” while the document content remains, indicating a state‑refresh issue that should be tested when implementing new‑document workflows.

Conclusion

docx-editor provides a web‑embeddable component capable of fully editing Word documents without backend services or Office Online, making it suitable for SaaS scenarios such as contract editing, document approval, and template filling. The built‑in AI Agent SDK lowers the barrier to adding LLM‑driven review and suggestion features.

Project repository: https://github.com/eigenpal/docx-editor