@docx-editor.dev/pro

@docx-editor.dev/pro adds these review capabilities to the Vue and React editors:

• Tracked changes: Use suggesting mode, render markup, and accept or reject changes.
• Comments: Add threads and replies to a text range.
• Review colors and styling: Color review content by author or by change type.
• Custom nodes: Store your inline node types as Word content controls.
• DOCX collaboration reference: Configure rooms, providers, presence, and recovery.

Both adapter entries export custom-node chip and context-menu chrome.

Install

Install the Pro package with your adapter and the core engine:

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

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

Register a module

Pass review capabilities to the editor root through modules.

The editor registers modules during creation. Keep the module array stable across renders.

This example registers reviewModule and adds the review rail:

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>
  );
}

<script setup lang="ts">
import {
  DocxEditorContent,
  DocxEditorRoot,
  DocxEditorToolbar,
  DocxEditorViewport,
} from '@docx-editor.dev/vue';
import { DocxEditorReview, reviewModule } from '@docx-editor.dev/pro/vue';

defineProps<{ bytes: Uint8Array }>();

const modules = [reviewModule()];
</script>

<template>
  <DocxEditorRoot :document="bytes" :modules="modules" author="Jess Lin">
    <DocxEditorToolbar />
    <DocxEditorViewport>
      <DocxEditorContent />
      <DocxEditorReview />
    </DocxEditorViewport>
  </DocxEditorRoot>
</template>

The packaged DocxEditor component also accepts modules in each adapter.

Without a review module, the editor still opens documents that contain revisions and comments.

The editor saves that review content without changes. It renders revisions in their final state and provides no review interface.

Register the module to show review content and provide review actions.

Author attribution

Comments and tracked changes require an author. Office Open XML (OOXML) requires this value.

Set author on the root.

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

<DocxEditorRoot :document="bytes" :modules="modules" author="Jess Lin">
  <!-- Editor parts -->
</DocxEditorRoot>

Write calls return whether the editor applied the change. They do not throw for an unavailable author.

For example, a reply without an author returns false. The editor does not create an invalid document.

Choose the review rail or composables

useReview() provides all capabilities in the packaged review rail. Use the rail, or render your own interface.

This example shows the number of pending items:

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

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

<script setup lang="ts">
import { computed } from 'vue';
import { useReview } from '@docx-editor.dev/pro/vue';

const review = useReview();
const pending = computed(() => review.items.value.length);
</script>

<template>
  <span v-if="review.ready.value">{{ pending }} pending</span>
</template>

For the complete composable API, see Tracked changes.

To arrange editor parts, see Vue composition or React composition.

Licensing

This package is licensed under the EigenPal Pro License, and you can compare and buy license and support levels on the pricing page.

Both module factories accept an optional licenseKey.

Module construction does not validate the key or access the network. This example passes a key to reviewModule:

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

For a Vue application, read the key from your build tool instead of process.env.

Next steps

• Tracked changes: Configure suggesting mode and the review interface.
• Comments: Add, reply to, resolve, and reopen comment threads.
• Review colors and styling: Give each reviewer a color and an avatar.
• Custom nodes: Add custom-node chrome.
• Vue composition: Arrange Vue editor parts.
• React composition: Arrange React editor parts.