Getting Started

Overview

@eigenpal/docx-js-editor is an open-source WYSIWYG document editor for React that lets users edit .docx files directly in the browser. It provides a Word-like editing experience with rich formatting, tables, images, track changes, comments, and more — all client-side with no server required.

Quick Install

npm install @eigenpal/docx-js-editor

Or with your preferred package manager:

# Yarn
yarn add @eigenpal/docx-js-editor
 
# pnpm
pnpm add @eigenpal/docx-js-editor
 
# Bun
bun add @eigenpal/docx-js-editor

Minimal Setup

import { DocxEditor } from '@eigenpal/docx-js-editor';
import '@eigenpal/docx-js-editor/styles.css';
 
function App() {
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
 
  useEffect(() => {
    fetch('/template.docx')
      .then((res) => res.arrayBuffer())
      .then(setBuffer);
  }, []);
 
  if (!buffer) return <div>Loading...</div>;
 
  return (
    <DocxEditor
      documentBuffer={buffer}
      showToolbar={true}
      showRuler={true}
    />
  );
}

That's it — you now have a fully functional document editor in your React app.

Try It Live

Toggle props and see the editor respond in real time:

Key Features

• Rich text editing — bold, italic, underline, strikethrough, colors, fonts, sizes
• Tables — insert, resize, merge/split cells
• Images — insert, resize, drag-and-drop
• Page layout — margins, orientation, page breaks, headers/footers
• Track changes — suggesting mode with accept/reject
• Comments — add, reply, resolve
• Zoom & rulers — adjustable zoom level and document rulers
• Customizable toolbar — render props and compound component APIs
• Plugin system — extend with EditorPlugins (browser) and CorePlugins (Node.js)
• Export — save back to .docx format

Next Steps

• Installation — framework-specific setup for Next.js, Vite, Remix, Astro, and Vue
• Props Reference — full list of configuration props and ref methods
• Toolbar Customization — customize the toolbar with logos, actions, and extra buttons
• Editor Modes — editing, suggesting, viewing, and read-only modes
• Examples — interactive demos with live prop toggling