@docx-editor.dev/pro

Tracked changes, comments, and custom nodes for the React DOCX editor. Register a module on the editor root, then take the hook or the packaged sidebar.

@docx-editor.dev/pro adds three capabilities to the React editor:

  • Tracked changes: suggesting mode, markup rendering, accept and reject.
  • Comments: threads anchored to a range, with replies.
  • Custom nodes: your own inline node types, stored as Word content controls.

Install

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

The framework-neutral entry is @docx-editor.dev/pro; React chrome lives at @docx-editor.dev/pro/react.

Register a module

Capabilities are modules you pass to the editor root. Module registration happens at construction, like mode, so the array identity must be stable. Build it outside the component or memoize it, or the editor rebuilds on every render.

import { DocxEditor } from '@docx-editor.dev/react';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/react';

// Module array built once, outside render.
const MODULES = [reviewModule()];

export function Reviewer({ bytes }: { bytes: Uint8Array }) {
  return (
    <DocxEditor.Root document={bytes} modules={MODULES} author="Jess Lin">
      <DocxEditor.Toolbar />
      <DocxEditor.Viewport>
        <DocxEditor.Content />
        {/* The review sidebar: tracked changes and comments as cards beside the page. */}
        <DocxEditorReview />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  );
}

modules is also a prop on the packaged <DocxEditor modules={MODULES} />.

Without a review module the editor still opens a document containing revisions and comments and still saves them back untouched. It renders revisions in their final state and offers no review UI. Registering the module is what makes them visible and actionable.

Author attribution

Comments and tracked changes are authored, and OOXML requires an author on both. author on the root supplies it ambiently, the way Word takes it from the signed-in user:

<DocxEditor.Root document={bytes} modules={MODULES} author="Jess Lin">

Write calls report whether they landed rather than throwing, so a reply written with no author available returns false instead of silently producing an invalid document.

Chrome or hooks

Everything the packaged sidebar renders is reachable from useReview(). Use the sidebar for Word-like cards out of the box, or the hook to render your own markup:

import { useReview } from '@docx-editor.dev/pro/react';

function ChangeCount() {
  const { items, ready } = useReview();
  if (!ready) return null;
  return <span>{items.length} pending</span>;
}

See Tracked changes for the full hook surface.

Licensing

@docx-editor.dev/pro is licensed under the EigenPal Pro Evaluation License 1.0: free for internal, non-production evaluation, with production use requiring a commercial agreement. Contact licensing@eigenpal.com.

Both module factories accept an optional licenseKey. Construction never validates the key and never touches the network:

const MODULES = [reviewModule({ licenseKey: process.env.NEXT_PUBLIC_DOCX_LICENSE })];

Next steps

On this page