React examples | DOCX Editor

Find React examples for loading, saving, custom chrome, and automating an open editor.

Choose an example

Task	Source
Load from a URL and save through the ref	Loading and saving
Build custom toolbar buttons	React hooks
Arrange editor parts	React composition
Automate the open document	Automate an open editor

Automate an open editor

Install the editing API. It requires the EigenPal Pro License.

npm install @docx-editor.dev/editor-api

Render this component inside DocxEditor.Root. It reads the first paragraph and shows its text:

import { useState } from 'react';
import { useDocxEditor } from '@docx-editor.dev/react';
import { DocxEditor as BrowserDocxEditor } from '@docx-editor.dev/editor-api/browser';

export function FirstParagraph() {
  const editor = useDocxEditor();
  const [text, setText] = useState('');

  async function run() {
    if (!editor) return;
    const runtime = BrowserDocxEditor.createBrowser(editor);

    try {
      await runtime.run(async (context) => {
        const first = context.document.body.paragraphs.getFirst();
        first.load('text');
        await context.sync();
        setText(first.text);
      });
    } finally {
      runtime.dispose();
    }
  }

  return (
    <>
      <button disabled={!editor} onClick={() => void run()}>
        Read first paragraph
      </button>
      <output>{text}</output>
    </>
  );
}

Run the React example

The examples/vite app shows composed chrome, the review sidebar, and a custom node. Run it from the repository root with bun run dev:react.

Limits

Render automation components inside DocxEditor.Root. Wait for a non-null editor before you create the runtime.
Load explicit properties, such as load('text'), and await context.sync() before you read them.
Dispose the runtime in finally.
save() on the ref can return null. Your app owns any upload of the saved bytes.

Next steps

React props: Configure <DocxEditor> and its ref.
Editing API: Use the Office.js-shaped object model.
Toolbar guide: Find command slot IDs.