How to Add Track Changes to a React Rich Text Editor 2026 (Suggestions Mode)

How to Add Track Changes to a React Rich Text Editor 2026 (Suggestions Mode)

Learning how to add track changes to a React rich text editor is one of the hardest features you can build in 2026 — and one of the highest-value. Legal contracts need redlining. Editorial workflows need suggestions before publication. Enterprise docs need approval chains where every edit is attributable. This is the pattern Microsoft Word has owned since 1997. Google Docs made it collaborative. Now users expect it in every React editor.

Building it is genuinely hard. Track changes means tracking every insert, delete, format change, and attribute change as separate events attributed to a specific author. Users need to see changes inline (red strikethrough for deletions, colored underlines for insertions). Reviewers need to accept or reject changes individually. Change history needs to persist across sessions. And the entire system needs to work with collaboration when multiple people edit at once.

This guide shows you exactly how to add track changes to a React rich text editor in 2026 — the full suggestions mode pattern with insert/delete tracking, accept/reject controls, multi-author attribution, and persistent change history. You'll get three working paths: custom Lexical build, custom TipTap build, and CKEditor 5 (available today) plus Eddyter native track changes (Q4 2026 launch).

The short answer: For most React and Next.js teams needing to add track changes to a React rich text editor in 2026, the fastest production path today is CKEditor 5 ($144-$864/mo Cloud + $99+/mo AI). For flat pricing plus AI, wait for Eddyter native track changes (Q4 2026 launch at $59/mo). For teams with 3-5 weeks of senior engineering time, custom builds in Lexical or TipTap give total control at $30K-$60K.

🎥 New to modern editors? Watch: What is Eddyter? Why Developers Are Switching in 2026

What Track Changes Actually Means (The Full Pattern)

Before writing code, clarify what pattern you need. "Track changes" describes five distinct features that work together:

1. Change Tracking

Every edit becomes a tracked change — not applied immediately to the document. Insertions show as underlined text in the author's color. Deletions show as strikethrough text in the author's color. Format changes (bold, italic, headings) show with change markers.

2. Author Attribution

Every change knows who made it. Multiple authors work in the same document, each with a distinct color. Hovering a change shows the author's name and timestamp.

3. Accept/Reject Controls

Reviewers see a list of pending changes. They can accept individual changes (applying them permanently). They can reject individual changes (reverting them). They can accept all or reject all with one action.

4. Change History

The document remembers who made what change when. Even after acceptance, an audit log exists. Undo/redo works correctly with tracked changes.

5. Suggestions Mode

Reviewers can add suggestions without editing directly — comment on selections, propose specific text replacements, discuss changes in threads.

This guide covers all five. Building track changes without any one of them creates a broken workflow.

The 7 Technical Challenges of Building Track Changes

Track changes is arguably the hardest editor feature to build correctly. Here's why:

1. Every Edit Must Become a Diff

Instead of applying edits directly, you convert every keystroke into a change record. Insert 5 characters → create an insertion record. Delete 3 characters → create a deletion record. This is fundamentally different from normal editing.

2. Changes Must Render Inline

Tracked changes appear inline in the document with visual styling. Insertions with underlines. Deletions with strikethrough. Colors per author. This requires custom node rendering that overlays original content.

3. Position Adjustment When Accepting/Rejecting

When user accepts a deletion of 3 characters at position 100, all subsequent changes shift positions by -3. When user rejects an insertion of 5 characters at position 50, subsequent changes shift by -5. Position math gets complex fast.

4. Merging With Real-Time Collaboration

Track changes must work when 3 people edit simultaneously. Each person's changes are attributed correctly. Positions adjust as other authors make edits. Y.js and other CRDTs need custom integration for track changes.

5. Persistent Change Storage

Changes persist across sessions. Server storage format needs to survive editor upgrades. Change data can be 10x larger than the document itself for heavily edited documents.

6. Undo/Redo Semantics

Cmd+Z should undo the last change (rejecting an accepted change, or removing a tracked insertion). Not the last keystroke. This requires custom undo/redo stack logic.

7. Performance at Scale

Documents with 500+ tracked changes can slow down. Rendering 500 inline strikethroughs and underlines with different colors requires optimization. Virtualization helps.

For deeper editor architecture patterns, see our How to Add Real-Time Collaboration to a React Editor With Y.js 2026 and How to Add Comments & Annotations to a React Rich Text Editor 2026.

Three Paths: Custom Build, CKEditor Today, or Eddyter Q4 2026

You have three production paths in 2026:

The custom path gives total control. CKEditor 5 ships today. Eddyter combines track changes with AI at flat pricing when it launches.

Path 1: Custom Build in Lexical (3-5 Weeks)

If you need full control over track changes UX, this is the pattern that works in 2026 with Lexical.

Step 1: Install Dependencies

bash

1
npm install lexical @lexical/react @lexical/utils

Step 2: Define the Change Data Model

Every tracked change needs consistent data:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// types/track-changes.ts
export type ChangeType = 'insert' | 'delete' | 'format';
export interface TrackedChange {
  id: string;
  type: ChangeType;
  authorId: string;
  authorName: string;
  authorColor: string;
  timestamp: number;
  position: number;
  content?: string; // For insertions and deletions
  formatBefore?: Record<string, any>; // For format changes
  formatAfter?: Record<string, any>;
  status: 'pending' | 'accepted' | 'rejected';
}
export interface ChangeAuthor {
  id: string;
  name: string;
  color: string;
}

What this defines:

• ChangeType — three fundamental change types
• Author attribution — every change knows its author
• position — where in the document the change occurred
• status — pending/accepted/rejected for review workflow

Step 3: Create the Tracked Change Node

Custom Lexical node that renders inline change markup:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// nodes/TrackedChangeNode.ts
import {
  DecoratorNode,
  EditorConfig,
  LexicalNode,
  NodeKey,
  SerializedLexicalNode,
  Spread,
} from 'lexical';
import React, { JSX } from 'react';
import { ChangeType } from '@/types/track-changes';
export type SerializedTrackedChangeNode = Spread
  {
    changeId: string;
    changeType: ChangeType;
    authorId: string;
    authorColor: string;
    content: string;
    type: 'tracked-change';
    version: 1;
  },
  SerializedLexicalNode
>;
export class TrackedChangeNode extends DecoratorNode<JSX.Element> {
  __changeId: string;
  __changeType: ChangeType;
  __authorId: string;
  __authorColor: string;
  __content: string;
  static getType(): string {
    return 'tracked-change';
  }
  static clone(node: TrackedChangeNode): TrackedChangeNode {
    return new TrackedChangeNode(
      node.__changeId,
      node.__changeType,
      node.__authorId,
      node.__authorColor,
      node.__content,
      node.__key
    );
  }
  constructor(
    changeId: string,
    changeType: ChangeType,
    authorId: string,
    authorColor: string,
    content: string,
    key?: NodeKey
  ) {
    super(key);
    this.__changeId = changeId;
    this.__changeType = changeType;
    this.__authorId = authorId;
    this.__authorColor = authorColor;
    this.__content = content;
  }
  createDOM(): HTMLElement {
    const dom = document.createElement('span');
    dom.className = `tracked-change tracked-change-${this.__changeType}`;
    dom.setAttribute('data-change-id', this.__changeId);
    dom.setAttribute('data-author-id', this.__authorId);
    dom.style.setProperty('--author-color', this.__authorColor);
    return dom;
  }
  updateDOM(): boolean {
    return false;
  }
  decorate(): JSX.Element {
    const style = {
      '--author-color': this.__authorColor,
    } as React.CSSProperties;
    if (this.__changeType === 'insert') {
      return (
        <span
          className="tracked-change tracked-change-insert"
          style={style}
          data-change-id={this.__changeId}
        >
          {this.__content}
        </span>
      );
    }
    if (this.__changeType === 'delete') {
      return (
        <span
          className="tracked-change tracked-change-delete"
          style={style}
          data-change-id={this.__changeId}
        >
          {this.__content}
        </span>
      );
    }
    return <span>{this.__content}</span>;
  }
  static importJSON(serialized: SerializedTrackedChangeNode): TrackedChangeNode {
    return new TrackedChangeNode(
      serialized.changeId,
      serialized.changeType,
      serialized.authorId,
      serialized.authorColor,
      serialized.content
    );
  }
  exportJSON(): SerializedTrackedChangeNode {
    return {
      changeId: this.__changeId,
      changeType: this.__changeType,
      authorId: this.__authorId,
      authorColor: this.__authorColor,
      content: this.__content,
      type: 'tracked-change',
      version: 1,
    };
  }
  getChangeId(): string {
    return this.__changeId;
  }
  getChangeType(): ChangeType {
    return this.__changeType;
  }
  isInline(): boolean {
    return true;
  }
}
export function $createTrackedChangeNode(
  changeId: string,
  changeType: ChangeType,
  authorId: string,
  authorColor: string,
  content: string
): TrackedChangeNode {
  return new TrackedChangeNode(changeId, changeType, authorId, authorColor, content);
}

What this node does:

• Renders tracked changes with author-specific colors
• Insertions get underline styling via CSS
• Deletions get strikethrough styling via CSS
• Change ID persists across renders for accept/reject actions

Step 4: CSS for Change Rendering

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* track-changes.css */
.tracked-change {
  position: relative;
}
.tracked-change-insert {
  color: var(--author-color);
  text-decoration: underline;
  text-decoration-color: var(--author-color);
  background-color: color-mix(in srgb, var(--author-color) 10%, transparent);
}
.tracked-change-delete {
  color: var(--author-color);
  text-decoration: line-through;
  text-decoration-color: var(--author-color);
  background-color: color-mix(in srgb, var(--author-color) 10%, transparent);
  opacity: 0.7;
}
.tracked-change-format {
  background-color: color-mix(in srgb, var(--author-color) 15%, transparent);
  border-bottom: 2px dashed var(--author-color);
}
/* Hover state showing author info */
.tracked-change:hover::after {
  content: attr(data-author-name);
  position: absolute;
  bottom: 100%;
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Step 5: Build the Track Changes Plugin

Intercept every edit and convert it to a tracked change:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
"use client";
import { useEffect, useCallback } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import {
  $getSelection,
  $isRangeSelection,
  KEY_DOWN_COMMAND,
  COMMAND_PRIORITY_HIGH,
  $createTextNode,
} from 'lexical';
import { nanoid } from 'nanoid';
import { $createTrackedChangeNode } from '@/nodes/TrackedChangeNode';
import { TrackedChange, ChangeAuthor } from '@/types/track-changes';
interface TrackChangesPluginProps {
  enabled: boolean;
  currentAuthor: ChangeAuthor;
  onChangeCreated: (change: TrackedChange) => void;
}
export function TrackChangesPlugin({
  enabled,
  currentAuthor,
  onChangeCreated,
}: TrackChangesPluginProps) {
  const [editor] = useLexicalComposerContext();
  // Intercept typing
  useEffect(() => {
    if (!enabled) return;
    return editor.registerCommand(
      KEY_DOWN_COMMAND,
      (event: KeyboardEvent) => {
        // Ignore modifier keys
        if (event.metaKey || event.ctrlKey || event.altKey) return false;
        // Handle printable characters as insertions
        if (event.key.length === 1) {
          event.preventDefault();
          const changeId = nanoid();
          const change: TrackedChange = {
            id: changeId,
            type: 'insert',
            authorId: currentAuthor.id,
            authorName: currentAuthor.name,
            authorColor: currentAuthor.color,
            timestamp: Date.now(),
            position: 0,
            content: event.key,
            status: 'pending',
          };
          editor.update(() => {
            const selection = $getSelection();
            if (!$isRangeSelection(selection)) return;
            const trackedNode = $createTrackedChangeNode(
              changeId,
              'insert',
              currentAuthor.id,
              currentAuthor.color,
              event.key
            );
            selection.insertNodes([trackedNode]);
          });
          onChangeCreated(change);
          return true;
        }
        // Handle Backspace as deletion
        if (event.key === 'Backspace') {
          event.preventDefault();
          editor.update(() => {
            const selection = $getSelection();
            if (!$isRangeSelection(selection) || !selection.isCollapsed()) return;
            const anchorNode = selection.anchor.getNode();
            const offset = selection.anchor.offset;
            if (anchorNode.getType() !== 'text' || offset === 0) return;
            const text = anchorNode.getTextContent();
            const deletedChar = text[offset - 1];
            const changeId = nanoid();
            const change: TrackedChange = {
              id: changeId,
              type: 'delete',
              authorId: currentAuthor.id,
              authorName: currentAuthor.name,
              authorColor: currentAuthor.color,
              timestamp: Date.now(),
              position: offset - 1,
              content: deletedChar,
              status: 'pending',
            };
            // Replace deleted character with tracked delete node
            const newText = text.slice(0, offset - 1) + text.slice(offset);
            (anchorNode as any).setTextContent(newText);
            const deleteNode = $createTrackedChangeNode(
              changeId,
              'delete',
              currentAuthor.id,
              currentAuthor.color,
              deletedChar
            );
            selection.insertNodes([deleteNode]);
            onChangeCreated(change);
          });
          return true;
        }
        return false;
      },
      COMMAND_PRIORITY_HIGH
    );
  }, [editor, enabled, currentAuthor, onChangeCreated]);
  return null;
}

What this plugin does:

• Intercepts printable key presses — inserts as tracked insert node
• Intercepts Backspace — replaces deleted content with tracked delete node
• Assigns every change a unique ID for later accept/reject
• Attributes every change to the current author
• Notifies parent component of new changes via callback

Step 6: Accept/Reject Change Management

Sidebar UI for reviewers to accept or reject changes:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
"use client";
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getRoot, $getNodeByKey } from 'lexical';
import { TrackedChangeNode } from '@/nodes/TrackedChangeNode';
import { TrackedChange } from '@/types/track-changes';
interface ChangeReviewPanelProps {
  changes: TrackedChange[];
  onChangeAccepted: (changeId: string) => void;
  onChangeRejected: (changeId: string) => void;
}
export function ChangeReviewPanel({
  changes,
  onChangeAccepted,
  onChangeRejected,
}: ChangeReviewPanelProps) {
  const [editor] = useLexicalComposerContext();
  const pendingChanges = changes.filter((c) => c.status === 'pending');
  const handleAccept = (changeId: string) => {
    editor.update(() => {
      const root = $getRoot();
      const traverse = (node: any) => {
        if (node instanceof TrackedChangeNode && node.getChangeId() === changeId) {
          if (node.getChangeType() === 'insert') {
            // Insertion accepted — remove tracking, keep content
            // (Convert TrackedChangeNode back to plain TextNode)
            // Implementation depends on exact node replacement pattern
          } else if (node.getChangeType() === 'delete') {
            // Deletion accepted — remove the node entirely
            node.remove();
          }
        }
        if (node.getChildren) {
          node.getChildren().forEach(traverse);
        }
      };
      traverse(root);
    });
    onChangeAccepted(changeId);
  };
  const handleReject = (changeId: string) => {
    editor.update(() => {
      const root = $getRoot();
      const traverse = (node: any) => {
        if (node instanceof TrackedChangeNode && node.getChangeId() === changeId) {
          if (node.getChangeType() === 'insert') {
            // Insertion rejected — remove the node
            node.remove();
          } else if (node.getChangeType() === 'delete') {
            // Deletion rejected — restore content, remove tracking
            // (Convert TrackedChangeNode back to plain TextNode)
          }
        }
        if (node.getChildren) {
          node.getChildren().forEach(traverse);
        }
      };
      traverse(root);
    });
    onChangeRejected(changeId);
  };
  return (
    <div className="change-review-panel border-l p-4 w-80 h-full overflow-y-auto">
      <h3 className="font-semibold text-lg mb-4">
        Pending changes ({pendingChanges.length})
      </h3>
      {pendingChanges.length === 0 && (
        <p className="text-sm text-gray-500">No pending changes</p>
      )}
      {pendingChanges.map((change) => (
        <div
          key={change.id}
          className="change-item border rounded-lg p-3 mb-3"
          style={{ borderLeftWidth: 4, borderLeftColor: change.authorColor }}
        >
          <div className="flex items-center gap-2 mb-2">
            <div
              className="w-6 h-6 rounded-full flex items-center justify-center text-xs text-white font-semibold"
              style={{ backgroundColor: change.authorColor }}
            >
              {change.authorName.charAt(0).toUpperCase()}
            </div>
            <div className="text-sm font-medium">{change.authorName}</div>
          </div>
          <div className="text-sm mb-3">
            {change.type === 'insert' && (
              <>
                <span className="text-gray-500">Insert:</span>{' '}
                <span className="font-mono">"{change.content}"</span>
              </>
            )}
            {change.type === 'delete' && (
              <>
                <span className="text-gray-500">Delete:</span>{' '}
                <span className="font-mono line-through">"{change.content}"</span>
              </>
            )}
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => handleAccept(change.id)}
              className="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700"
            >
              Accept
            </button>
            <button
              onClick={() => handleReject(change.id)}
              className="px-3 py-1 bg-red-100 text-red-700 text-xs rounded hover:bg-red-200"
            >
              Reject
            </button>
          </div>
        </div>
      ))}
      {pendingChanges.length > 0 && (
        <div className="border-t pt-3 mt-3 flex gap-2">
          <button
            onClick={() => pendingChanges.forEach((c) => handleAccept(c.id))}
            className="flex-1 px-3 py-2 bg-green-600 text-white text-sm rounded hover:bg-green-700"
          >
            Accept all
          </button>
          <button
            onClick={() => pendingChanges.forEach((c) => handleReject(c.id))}
            className="flex-1 px-3 py-2 bg-red-100 text-red-700 text-sm rounded hover:bg-red-200"
          >
            Reject all
          </button>
        </div>
      )}
    </div>
  );
}

What this component does:

• Shows pending changes in a sidebar
• Each change displays author avatar, color, and content
• Accept button applies the change permanently
• Reject button reverts the change
• Accept all / reject all bulk actions

Step 7: Wire Everything Up

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"use client";
import { useState } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
import { TrackChangesPlugin } from './TrackChangesPlugin';
import { ChangeReviewPanel } from './ChangeReviewPanel';
import { TrackedChangeNode } from '@/nodes/TrackedChangeNode';
import { TrackedChange, ChangeAuthor } from '@/types/track-changes';
const currentAuthor: ChangeAuthor = {
  id: 'user-1',
  name: 'Jane Smith',
  color: '#3b82f6',
};
export default function EditorWithTrackChanges() {
  const [changes, setChanges] = useState<TrackedChange[]>([]);
  const [trackingEnabled, setTrackingEnabled] = useState(true);
  const handleChangeCreated = (change: TrackedChange) => {
    setChanges((prev) => [...prev, change]);
  };
  const handleChangeAccepted = (changeId: string) => {
    setChanges((prev) =>
      prev.map((c) => (c.id === changeId ? { ...c, status: 'accepted' } : c))
    );
  };
  const handleChangeRejected = (changeId: string) => {
    setChanges((prev) =>
      prev.map((c) => (c.id === changeId ? { ...c, status: 'rejected' } : c))
    );
  };
  const initialConfig = {
    namespace: 'track-changes-editor',
    onError: (error: Error) => console.error(error),
    nodes: [TrackedChangeNode],
  };
  return (
    <div className="flex h-screen">
      <div className="flex-1 flex flex-col">
        <div className="border-b p-3 flex items-center gap-4">
          <label className="flex items-center gap-2 text-sm">
            <input
              type="checkbox"
              checked={trackingEnabled}
              onChange={(e) => setTrackingEnabled(e.target.checked)}
            />
            Track changes
          </label>
          <div className="text-xs text-gray-500">
            {changes.filter((c) => c.status === 'pending').length} pending
          </div>
        </div>
        <LexicalComposer initialConfig={initialConfig}>
          <div className="flex-1 p-4">
            <RichTextPlugin
              contentEditable={
                <ContentEditable className="outline-none min-h-full" />
              }
              placeholder={
                <div className="text-gray-400">Start typing to see track changes...</div>
              }
              ErrorBoundary={LexicalErrorBoundary}
            />
            <HistoryPlugin />
            <TrackChangesPlugin
              enabled={trackingEnabled}
              currentAuthor={currentAuthor}
              onChangeCreated={handleChangeCreated}
            />
          </div>
        </LexicalComposer>
      </div>
      <ChangeReviewPanel
        changes={changes}
        onChangeAccepted={handleChangeAccepted}
        onChangeRejected={handleChangeRejected}
      />
    </div>
  );
}

That's the full custom Lexical implementation of track changes. Every keystroke becomes a tracked change. The sidebar shows pending changes. Reviewers accept or reject individually or in bulk.

What This Custom Build Doesn't Cover

The 400 lines of code above handle the basics. Production track changes needs:

• Format change tracking (bold, italic, headings) — another 300 lines
• Multi-author collaboration with Y.js — 500+ lines
• Persistent storage with backend — 200+ lines
• Undo/redo semantics — 300 lines
• Performance optimization at 500+ changes — 400+ lines
• Format change tracking for structural edits — 500+ lines

Total production-quality custom Lexical track changes: 3-5 weeks of senior engineering time, roughly $18K-$30K in senior engineering salary alone, plus ongoing maintenance costs.

The Real Cost of Custom Lexical Track Changes

Production-quality track changes built this way typically costs:

For build-vs-buy analysis, see Build vs Buy: Real Cost of Building a Rich Text Editor 2026 and Why Building Your Own Rich Text Editor Is a Startup Killer.

Path 1B: Custom Build in TipTap (3-5 Weeks)

If you're already on TipTap, the community has built a track changes extension pattern. It's not as polished as CKEditor's but works for basic use cases.

Install Dependencies

bash

1
npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-history

Basic Track Changes Extension Pattern

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// extensions/track-changes.ts
import { Extension, Mark, mergeAttributes } from '@tiptap/core';
export const InsertMark = Mark.create({
  name: 'insertMark',
  addAttributes() {
    return {
      authorId: { default: null },
      authorColor: { default: '#3b82f6' },
      changeId: { default: null },
      timestamp: { default: () => Date.now() },
    };
  },
  parseHTML() {
    return [{ tag: 'span[data-insert-mark]' }];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(HTMLAttributes, {
        'data-insert-mark': 'true',
        class: 'tracked-change tracked-change-insert',
        style: `--author-color: ${HTMLAttributes.authorColor}`,
      }),
      0,
    ];
  },
});
export const DeleteMark = Mark.create({
  name: 'deleteMark',
  addAttributes() {
    return {
      authorId: { default: null },
      authorColor: { default: '#3b82f6' },
      changeId: { default: null },
      timestamp: { default: () => Date.now() },
    };
  },
  parseHTML() {
    return [{ tag: 'span[data-delete-mark]' }];
  },
  renderHTML({ HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(HTMLAttributes, {
        'data-delete-mark': 'true',
        class: 'tracked-change tracked-change-delete',
        style: `--author-color: ${HTMLAttributes.authorColor}`,
      }),
      0,
    ];
  },
});
export const TrackChangesExtension = Extension.create({
  name: 'trackChanges',
  addOptions() {
    return {
      enabled: true,
      currentAuthor: null,
      onChangeCreated: (change: any) => {},
    };
  },
  addProseMirrorPlugins() {
    // Complex ProseMirror plugin that intercepts transactions
    // and converts inserts/deletes to tracked marks
    // Full implementation is 300+ lines
    return [];
  },
});

TipTap track changes requires deep ProseMirror plugin knowledge — significantly harder than Lexical for this specific feature. The community package @tiptap-pro/extension-track-changes exists but is part of TipTap's paid Cloud offering.

For simpler alternatives, consider CKEditor 5 (available today) or waiting for Eddyter Q4 2026.

Path 2: CKEditor 5 Track Changes (Available Today, 4-8 Hours Setup)

CKEditor 5 has the strongest production track changes today. It ships as a paid plugin bundled with CKEditor 5 Cloud plans.

Basic Setup

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use client";
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { TrackChanges } from '@ckeditor/ckeditor5-track-changes';
export default function CKEditorTrackChanges() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        extraPlugins: [TrackChanges],
        trackChanges: {
          user: {
            id: 'user-1',
            name: 'Jane Smith',
          },
        },
        licenseKey: process.env.NEXT_PUBLIC_CKEDITOR_LICENSE_KEY,
      }}
      onChange={(event, editor) => {
        console.log('Content:', editor.getData());
      }}
    />
  );
}

CKEditor 5 Track Changes Strengths

• ✅ Available today — production ready in 2026
• ✅ Full feature set — insertions, deletions, format changes tracked
• ✅ Author attribution — multi-user with distinct colors
• ✅ Accept/reject UI — built-in sidebar for reviewers
• ✅ Real-time collaboration — works with CKEditor 5 collaboration
• ✅ SOC 2 Type II and HIPAA compliance support

CKEditor 5 Track Changes Limitations

• ❌ Complex commercial licensing starting at $144/mo Cloud
• ❌ AI Assistant costs extra ($99+/mo)
• ❌ Combined pricing can hit $1,000-$1,500/mo for full AI + collab + track changes
• ❌ Heavy bundle (~500 KB) hurts Core Web Vitals
• ❌ Setup complexity — 4-8 hours vs Eddyter's 10 minutes

For comparisons, see Eddyter vs CKEditor 2026 and Best CKEditor Alternative 2026.

Best for: Enterprise teams needing track changes in production today with budget for CKEditor licensing.

Path 3: Eddyter Native Track Changes (Q4 2026 Launch)

Eddyter's native track changes launches Q4 2026 — Lexical-powered under the hood, but zero configuration on your side.

What Eddyter Track Changes Will Deliver (Anticipated)

• ✅ 10-minute setup — same 3-step integration as base Eddyter
• ✅ Multi-author track changes — insertions, deletions, format changes
• ✅ Accept/reject UI — sidebar included, no custom code
• ✅ Multi-model AI + track changes in one product (unique combination)
• ✅ 7-framework support — React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS
• ✅ Flat pricing — included in AI Pro Managed ($59/mo) tier
• ✅ Y.js-based collaboration compatibility

Anticipated Setup Pattern (Post-Q4 2026 Launch)

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
} from 'eddyter';
import 'eddyter/style.css';
export default function EditorWithTrackChanges() {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        trackChanges={{
          enabled: true,
          currentUser: {
            id: 'user-1',
            name: 'Jane Smith',
            color: '#3b82f6',
          },
          onChangeCreated: (change) => console.log(change),
        }}
        onChange={(html) => console.log(html)}
      />
    </EditorProvider>
  );
}

Track changes. Real-time collab (Q3 2026). Multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3). All in one editor at $59/mo flat.

Get your Eddyter API key from eddyter.com/user/license-key. Watch the Q4 2026 launch for track changes availability.

🎥 See real Eddyter setup: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Full Comparison: All 4 Paths

3-Year Cost Math: Real Numbers

For a typical React SaaS with 1,000 users needing track changes + AI + collaboration:

Custom Build (Lexical or TipTap)

• Senior engineering (4 weeks initial build): $24,000
• Backend for change persistence: $8,000
• Y.js integration for collab: $8,000
• Ongoing maintenance (10 hrs/mo × $150/hr × 36 mo): $54,000
• 3-year total: $94,000

CKEditor 5 Cloud + Track Changes + AI Assistant

• Cloud (mid-tier): $432/mo × 36 = $15,552
• AI Assistant: $99/mo × 36 = $3,564
• Setup + initial integration (8 hrs @ $150): $1,200
• 3-year total: $20,316

Eddyter AI Pro Managed

• Base plan: $59/mo × 36 = $2,124
• Includes: track changes (Q4 2026), real-time collab (Q3 2026), multi-model AI, all editor features, infrastructure
• 3-year total: $2,124

The Real Savings

• vs Custom build: Eddyter saves $91,876 over 3 years (97.7% cost reduction)
• vs CKEditor 5: Eddyter saves $18,192 over 3 years (89.5% cost reduction)

For teams that can wait for Q4 2026, Eddyter delivers dramatic savings. For teams needing track changes this quarter, CKEditor 5 is the strongest immediate option.

5-Question Decision Framework

Use this to pick the right path for your team:

1. When do you need track changes in production?

This quarter (Q3/Q4 2026) → CKEditor 5. Only production-ready option today.

Late 2026 or 2027 → Eddyter native. Flat pricing + AI included.

Timeline flexible → Consider custom build for total control.

2. What frameworks does your product use?

React only → Any option works.

Multi-framework (React + Vue + Angular + Svelte) → Eddyter (Q4 2026). Custom builds and CKEditor 5 have limited multi-framework support.

3. What's your bundle size budget?

Under 200 KB (mobile-first) → Eddyter (Q4 2026) or custom Lexical.

200-400 KB acceptable → CKEditor 5.

Bundle size doesn't matter → Any option works.

4. Do you need multi-model AI alongside track changes?

Yes → Eddyter. GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3 built in.

Single AI provider OK → CKEditor 5 AI Assistant.

No AI → Consider CKEditor 5 without AI, or custom builds.

5. What's your budget model?

Flat pricing preferred → Eddyter ($59/mo flat). Best for scale.

Per-Cloud-tier pricing OK → CKEditor 5 ($144-$864/mo Cloud).

One-time engineering cost + infra → Custom build.

7 Common Track Changes Pitfalls

Pitfall 1: Applying Changes Immediately

Naive implementations apply edits to the document immediately, then track them separately. This breaks accept/reject workflows because the change is already applied.

Fix: Wrap every edit in a tracked change first. Apply only on accept.

Pitfall 2: Not Handling Format Changes

Users can add tracked insertions and deletions but format changes (bold, italic, headings) aren't tracked. Reviewers can't see stylistic edits.

Fix: Track format changes as separate change type with formatBefore and formatAfter fields.

Pitfall 3: Position Math Errors When Accepting

Accepting a deletion at position 100 shifts all subsequent changes by -N characters. Naive implementations don't update positions, causing changes to point to wrong document locations.

Fix: Maintain change position math on every accept/reject. Use immutable change records.

Pitfall 4: Ignoring Multi-Author Collision

User A tracks a change at position 50. User B tracks a different change at position 51. Both accept. Positions shift wrongly if not resolved with CRDT logic.

Fix: Use Y.js awareness for change positions. See How to Add Real-Time Collaboration to a React Editor With Y.js 2026.

Pitfall 5: Poor Performance at Scale

Documents with 500+ tracked changes slow down. Rendering hundreds of inline strikethroughs with different colors kills performance.

Fix: Virtualize the change list. Only render visible tracked changes. Batch DOM updates.

Pitfall 6: No Persistent Change History

Accepted changes disappear from the audit log. No way to see who made what edit historically.

Fix: Persist accepted changes with status: 'accepted' and acceptedBy fields. Never delete change records.

Pitfall 7: Broken Undo/Redo

Cmd+Z undoes the last keystroke instead of the last tracked change. Users can't undo an accept action.

Fix: Implement custom undo/redo stack for change operations. Track accept/reject actions as reversible history entries.

When You Don't Need Track Changes

Three scenarios where track changes adds complexity without value:

1. Single-Author Content

Personal notes, personal blogs, individual document editing. Track changes is overhead when only one person edits.

2. Real-Time Collaboration Without Review

Google Docs-style live editing without approval workflows. Users see each other's edits in real time — no need to accept/reject.

3. Simple Content Editing

Marketing pages, product descriptions, help articles where all edits are direct. Track changes adds friction to fast content updates.

Frequently Asked Questions

1. What's the best React editor for track changes in 2026?

For most teams needing track changes today in 2026, CKEditor 5 is the strongest production-ready option — full insertions/deletions/format changes tracking, accept/reject UI, multi-author attribution, and real-time collaboration integration at $144-$864/mo Cloud + $99+/mo AI Assistant. For teams that can wait for Q4 2026 launch, Eddyter native track changes delivers the same features plus multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) at $12-$59/mo flat pricing with 10-minute setup. For teams with 3-5 weeks of senior engineering time and specific requirements, custom builds in Lexical give total control. Skip TipTap for track changes — the community extensions are less mature than Lexical.

2. How long does it take to build track changes from scratch?

Building production-quality track changes for a React editor takes 3-5 weeks of senior engineering time in 2026. This covers: change data model design (2-3 days), custom tracked change nodes for the editor (5-7 days), edit interception plugin (5-7 days), accept/reject UI (3-5 days), format change tracking (3-5 days), multi-author attribution (2-3 days), Y.js collaboration integration (5-7 days), persistent storage (3-5 days), undo/redo semantics (3-5 days), and performance optimization (3-5 days). Total 3-year cost including engineering and infrastructure: $52,000-$85,000+. Eddyter delivers equivalent track changes in 10 minutes at $2,124 over 3 years when it launches Q4 2026.

3. Can I add track changes to an existing Lexical or TipTap editor?

Yes, but the integration pattern differs. Lexical requires defining custom tracked change nodes with DecoratorNode subclasses, building a plugin for edit interception with KEY_DOWN_COMMAND, and creating accept/reject UI (~3-5 weeks). TipTap requires custom ProseMirror plugin work with mark extensions and transaction interception (~3-5 weeks — deeper ProseMirror knowledge required). CKEditor 5 ships with a native Track Changes plugin available today (4-8 hours setup with commercial license). Eddyter is built on Lexical with track changes launching Q4 2026 as a native feature — 10-minute setup with no custom code required.

4. Does CKEditor 5 support track changes today?

Yes, CKEditor 5's Track Changes plugin is available today (2026) as part of paid Cloud plans starting at $144/mo. It supports full insertion/deletion/format change tracking, multi-author attribution with distinct colors, accept/reject UI in a sidebar, integration with real-time collaboration, and revision history persistence. Combined with the AI Assistant plugin ($99+/mo), CKEditor 5 delivers the most complete production track changes experience in 2026. The trade-offs are heavy 500 KB bundle size, complex commercial licensing, and combined pricing that can reach $1,000-$1,500/mo for full AI + collab + track changes. For teams shipping track changes this quarter, CKEditor 5 is the strongest choice.

5. When will Eddyter support track changes?

Eddyter's native track changes launches Q4 2026. When available, it will support: multi-author insertions and deletions with per-author colors, format change tracking (bold, italic, headings), accept/reject UI in a sidebar (included, no custom code), integration with Q3 2026 Eddyter real-time collaboration, multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) alongside track changes in one integration, and 7-framework support (React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS). Pricing will be included in AI Pro Managed ($59/mo flat). For teams that can wait for Q4 2026, Eddyter combines track changes with everything else at flat pricing.

6. How do I handle track changes with real-time collaboration?

Track changes + real-time collaboration is one of the hardest editor features to build correctly. When 3 users edit simultaneously with tracking enabled, position math becomes complex — each user's changes shift positions of everyone else's changes. The standard solution uses Y.js awareness to synchronize change positions across clients, CRDT logic to resolve conflicts deterministically, and per-author change queues that maintain attribution during merging. Custom implementations take 5-7 weeks. CKEditor 5 handles this natively as part of its Collaboration Server. Eddyter Q4 2026 launches with native support based on Y.js foundation. For Y.js implementation patterns, see How to Add Real-Time Collaboration to a React Editor With Y.js 2026.

7. Can I export track changes to Word format?

Yes, but it requires custom conversion. Track changes in HTML use custom <span> elements with data-change-id attributes. Microsoft Word uses <w:ins> and <w:del> elements in OOXML format. Conversion requires: parsing your editor's HTML output, mapping insertion <span> elements to <w:ins>, mapping deletion <span> elements to <w:del>, preserving author attribution and timestamps, and packaging as a .docx file. Libraries like docx-templater and docxtemplater help. CKEditor 5 offers native Word export in Cloud plans (~$99/mo extra). Custom implementation takes 1-2 weeks. Eddyter Q4 2026 will support Word export with track changes preserved.

8. What's the alternative to building custom track changes?

The strongest managed alternatives in 2026 are CKEditor 5 (production-ready today, $144-$864/mo Cloud + $99+/mo AI Assistant, comprehensive track changes feature set, enterprise compliance built in) and Eddyter native track changes (Q4 2026 launch, $12-$59/mo flat, multi-model AI included, 7-framework support, 10-minute setup). For teams shipping track changes this quarter, CKEditor 5 is the fastest path. For teams building for late 2026 or 2027 launch, Eddyter combines track changes with AI at flat pricing. Skip building custom unless track changes UX is your core product differentiator.

Ready to Ship Track Changes?

Stop engineering change tracking, accept/reject UI, position math, multi-author attribution, and Y.js collaboration integration from scratch. Deploy CKEditor 5 today for immediate track changes, or plan for Eddyter's Q4 2026 native launch — track changes + multi-model AI + real-time collab in one editor at $12-$59/mo flat pricing, 10-minute setup, 7-framework support.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min integration guide