@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/proThe 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
Dark mode
Enable dark mode in the DOCX editor with the colorMode prop: theme the chrome, render the document canvas like Word dark view, and toggle from your own UI.
Tracked changes
Suggesting mode records every edit as a Word revision. Render them, accept and reject them, from the packaged review sidebar or from your own UI.