React Word editor: edit DOCX files in the browser

A React Word editor lets users edit .docx files without leaving your app. @docx-editor.dev/react reads and writes Office Open XML (OOXML) in the browser. You control where your app stores the files.

Try the React Word editor

Edit the sample document, change the zoom, or open your own .docx file:

Install the editor

Install the React adapter and its core peer dependency:

npm install @docx-editor.dev/react @docx-editor.dev/core

The React package uses the Apache 2.0 license. It has no usage limits or watermarks.

The installation guide lists the package choices, stylesheet path, browser requirements, and font setup.

Render a Word document

Import the component and its stylesheet. Set a height on the parent because the editor fills the available space.

import { DocxEditor } from "@docx-editor.dev/react";
import "@docx-editor.dev/core/styles/editor.css";
 
export function WordEditor() {
  return (
    <div style={{ height: "80vh" }}>
      <DocxEditor document="blank" />
    </div>
  );
}

Pass an ArrayBuffer, Uint8Array, or DocumentHandle to the document prop to open an existing file:

export function WordEditor({ bytes }: { bytes: ArrayBuffer }) {
  return <DocxEditor document={bytes} />;
}

See loading and saving documents for file pickers, remote files, downloads, and application storage. The React props reference documents each accepted document type and editor option.

The editor supports text formatting, tables, images, headers, footers, page layout, zoom, and document navigation. The optional Pro module adds tracked changes and comments.

Save the edited DOCX file

Attach a ref and call save(). The method returns the edited document as an ArrayBuffer.

import { useRef } from "react";
import { DocxEditor, type DocxEditorRef } from "@docx-editor.dev/react";
 
export function SavingWordEditor({ bytes }: { bytes: ArrayBuffer }) {
  const editorRef = useRef<DocxEditorRef>(null);
 
  async function save() {
    const result = await editorRef.current?.save();
    if (result) await fetch("/api/documents", { method: "PUT", body: result });
  }
 
  return (
    <>
      <button onClick={save}>Save</button>
      <DocxEditor ref={editorRef} document={bytes} />
    </>
  );
}

Choose your React setup

The editor needs browser APIs and document measurements. A Vite application can render it directly. A server-rendered framework needs a client boundary.

• Vite DOCX editor covers a client-rendered React app.
• Next.js DOCX editor covers App Router and "use client".
• Remix DOCX editor covers lazy browser rendering.
• Astro DOCX editor covers a React island.

For framework setup and the full component API, see the React editor documentation. For review features, see tracked changes and comments.

Extend the React editor

Use React composition when your application needs custom menus, panels, or page chrome. Use React hooks to read editor state and run commands from your own controls.

The focused guides cover toolbar configuration, font loading, and zoom behavior.