GitHub - eigenpal/docx-js-editor: WYSIWYG js DOCX editor

https://github.com/eigenpal/docx-js-editor • Feb 15, 2026 10:44

Extracto

WYSIWYG js DOCX editor. Contribute to eigenpal/docx-js-editor development by creating an account on GitHub.

Resumen

Resumen Principal

El @eigenpal/docx-js-editor se presenta como una solución de vanguardia y de código abierto para la edición de documentos DOCX, diseñado como un componente WYSIWYG para aplicaciones React. Su característica más distintiva es la capacidad de **abrir, editar y guardar archivos .docx directamente en el navegador

Contenido

@eigenpal/docx-js-editor

Open-source WYSIWYG DOCX editor for React. Open, edit, and save .docx files entirely in the browser — no server required. Try the live demo.

We built it for ourselves in eigenpal.com in order to have an editor for .docx files, which serve as AI document workflow output templates for our clients.

Framework Examples

Framework	Example
Vite + React	`examples/vite` (demo)
Next.js	`examples/nextjs`
Remix	`examples/remix`
Astro	`examples/astro`

Installation

npm install @eigenpal/docx-js-editor

Quick Start

import { useRef } from 'react';
import { DocxEditor, type DocxEditorRef } from '@eigenpal/docx-js-editor';
import '@eigenpal/docx-js-editor/styles.css';

function Editor({ file }: { file: ArrayBuffer }) {
  const editorRef = useRef<DocxEditorRef>(null);

  const handleSave = async () => {
    const buffer = await editorRef.current?.save();
    if (buffer) {
      await fetch('/api/documents/1', { method: 'PUT', body: buffer });
    }
  };

  return (
    <>
      <button onClick={handleSave}>Save</button>
      <DocxEditor ref={editorRef} documentBuffer={file} onChange={() => {}} />
    </>
  );
}

Next.js / SSR: The editor requires the DOM. Use a dynamic import or lazy useEffect load to avoid server-side rendering issues.

Props

Prop	Type	Default	Description
`documentBuffer`	`ArrayBuffer`	—	`.docx` file contents to load
`document`	`Document`	—	Pre-parsed document (alternative to buffer)
`readOnly`	`boolean`	`false`	Read-only preview (no caret/selection)
`showToolbar`	`boolean`	`true`	Show formatting toolbar
`showRuler`	`boolean`	`false`	Show horizontal ruler
`showZoomControl`	`boolean`	`true`	Show zoom controls
`showVariablePanel`	`boolean`	`true`	Show template variable panel
`initialZoom`	`number`	`1.0`	Initial zoom level
`onChange`	`(doc: Document) => void`	—	Called on document change
`onSave`	`(buffer: ArrayBuffer) => void`	—	Called on save
`onError`	`(error: Error) => void`	—	Called on error

Ref Methods

const ref = useRef<DocxEditorRef>(null);

await ref.current.save(); // Returns ArrayBuffer of the .docx
ref.current.getDocument(); // Current document object
ref.current.setZoom(1.5); // Set zoom to 150%
ref.current.focus(); // Focus the editor
ref.current.scrollToPage(3); // Scroll to page 3
ref.current.print(); // Print the document

Read-Only Preview

Use readOnly for a preview-only viewer. This disables editing, caret, and selection UI.

<DocxEditor documentBuffer={file} readOnly />

Plugins

Extend the editor with the plugin system. Wrap DocxEditor in a PluginHost and pass plugins that can contribute ProseMirror plugins, side panels, document overlays, and custom CSS:

import { DocxEditor, PluginHost, templatePlugin } from '@eigenpal/docx-js-editor';

function Editor({ file }: { file: ArrayBuffer }) {
  return (
    <PluginHost plugins={[templatePlugin]}>
      <DocxEditor documentBuffer={file} />
    </PluginHost>
  );
}

Plugin	Description
Docxtemplater	Syntax highlighting and annotation panel for docxtemplater tags

See docs/PLUGINS.md for the full plugin API, including how to create custom plugins with panels, overlays, and ProseMirror integrations.

Features

Full WYSIWYG editing with Microsoft Word fidelity
Text and paragraph formatting (bold, italic, fonts, colors, alignment, spacing)
Tables, images, hyperlinks
Extensible plugin architecture
Undo/redo, find & replace, keyboard shortcuts
Print preview
Zero server dependencies

Development

bun install
bun run dev          # Vite example on localhost:5173
bun run dev:nextjs   # Next.js example on localhost:3000
bun run dev:remix    # Remix example on localhost:3001
bun run dev:astro    # Astro example on localhost:4321

Each example is independently deployable. Copy any examples/<framework>/ directory to start your own project — just npm install and go.

License

MIT