docx-editor 1.x has shipped. Vue support, i18n, agents.

Migration guide →
EngineeringMarch 12, 20262 min read

Track Changes in a React DOCX Editor

How to enable track changes in a React DOCX editor and automate document review with AI agents using DocxReviewer.

0.x postThis post uses the 0.x package names and APIs. For the current release see the 1.x docs and the migration guide.

Track changes model

Track changes records insertions, deletions, and formatting changes with an author and timestamp. Legal teams use it for redlining, compliance teams use it for audit trails, and editorial teams use it for review.

Suggesting mode

Set mode="suggesting" and the editor tracks every edit automatically:

import { DocxEditor } from "@eigenpal/docx-js-editor";
 
function ContractEditor({ buffer }: { buffer: ArrayBuffer }) {
  return (
    <DocxEditor
      documentBuffer={buffer}
      mode="suggesting"
      author="Current User"
    />
  );
}
  • Insertions get a green underline
  • Deletions get a red strikethrough
  • Consecutive edits by the same author are grouped into a single revision

Switch between "editing" (direct edits), "suggesting" (tracked changes), and "viewing" (read-only) at any time.

Accepting and rejecting

The editor exposes acceptChange(from, to) and rejectChange(from, to) commands:

  • Accept: insertion stays, deletion is removed
  • Reject: insertion is removed, deletion stays

The sidebar shows accept/reject buttons on each tracked change card.

Round-trip fidelity

Documents redlined in Word open in the editor with revisions preserved. Edits saved from the editor are written back as Word tracked changes with revision metadata.

Try it

Automating track changes with AI agents

@eigenpal/docx-editor-agents provides DocxReviewer: a headless API for programmatic document review. It runs without a DOM, so you can use it in API routes, jobs, or scripts.

npm install @eigenpal/docx-editor-agents

Basic usage

import { DocxReviewer } from "@eigenpal/docx-editor-agents";
 
const reviewer = await DocxReviewer.fromBuffer(buffer, "AI Reviewer");
 
// Read as plain text (LLM-friendly format)
const text = reviewer.getContentAsText();
// [0] (h1) Service Agreement
// [1] The liability cap is $50k per incident.
 
// Comment
reviewer.addComment(1, "This cap seems too low.");
 
// Replace (creates a tracked change)
reviewer.replace(1, "$50k", "$500k");
 
// Export
const output = await reviewer.toBuffer();

The output is a DOCX with tracked changes and comments that opens in Word, Google Docs, or the editor above.

With an LLM

Read the document, send to any model, apply the response as tracked changes:

import { DocxReviewer } from "@eigenpal/docx-editor-agents";
import Anthropic from "@anthropic-ai/sdk";
 
const client = new Anthropic();
const reviewer = await DocxReviewer.fromBuffer(buffer, "Claude Reviewer");
 
const response = await client.messages.create({
  model: "claude-sonnet-4-7",
  max_tokens: 4096,
  messages: [{
    role: "user",
    content: `Review this contract. Return JSON with "comments" and "replacements":
${reviewer.getContentAsText()}`
  }],
});
 
const actions = JSON.parse(response.content[0].text);
reviewer.applyReview({
  comments: actions.comments,
  proposals: actions.replacements,
});
 
const output = await reviewer.toBuffer();

applyReview collects individual failures in result.errors instead of throwing for the whole review, so one bad paragraph index does not discard every other edit.

Agent review details

  • Headless: no DOM, runs on servers and edge functions
  • Text format: getContentAsText() returns [index] text for model prompts
  • Resilient matching: handles smart quotes, whitespace variations, LLM truncation
  • Batch operations: single applyReview() call for the full review
  • Word-compatible output: proper revision marks, comments, and metadata

Full DocxReviewer API reference

Next steps