---
title: "Compare documents"
description: "Compare two documents and visualize differences in real-time."
canonical_url: "https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/advanced-guides/compare-documents"
---

# Compare documents

Compare two documents and visualize differences in real-time.

Compare two documents in real-time and show the diff in the editor.

> **Interactive demo:** [React](https://deploy-preview-405--tiptap-pro.netlify.app/src/Extensions/AiToolkitCompareDocuments/React/)

> **Works in non-AI use cases:**
>
> This feature does not need AI to work. It can compare any two documents, regardless of whether
> they are AI-generated or not.

## Guide: compare two documents

Start by calling the `startComparingDocuments` method. It compares the current document of the editor with another document of your choice. The method takes one parameter: `otherDoc`, the document to compare against.

```ts
const toolkit = getAiToolkit(editor)

// Start comparing changes with another document
toolkit.startComparingDocuments({
  otherDoc,
})
```

If `otherDoc` is not provided, the AI Toolkit will start tracking the changes in the current document from the moment that `startComparingDocuments` was called, and display a diff of the document before and after the changes.

The diff is displayed as [suggestions](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md) in the editor. Add this CSS file to your app to format suggestions as a red and green diff:

```css
/* Highlight inserted text in green */
.tiptap-ai-suggestion,
.tiptap-ai-suggestion > * {
  background-color: oklch(87.1% 0.15 154.449);
}

/* Lighter background for change groups (sub-changes carry the stronger highlight) */
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group,
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group > *:not(.tiptap-ai-suggestion-sub-change) {
  background-color: oklch(0.962 0.044 156.743);
}

/* Highlight sub-changes within inline groups */
.tiptap-ai-suggestion-sub-change {
  background-color: oklch(87.1% 0.15 154.449);
}

/* Highlight deleted text in red */
.tiptap-ai-suggestion-diff,
.tiptap-ai-suggestion-diff > * {
  background-color: oklch(80.8% 0.114 19.571);
  color: oklch(0.396 0.141 25.723);
}

/* Lighter background for diff change groups (sub-changes carry the stronger highlight) */
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group,
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group
  > *:not(.tiptap-ai-suggestion-diff-sub-change) {
  background-color: oklch(0.936 0.032 17.717);
}

/* Highlight sub-changes within the replacement diff widget */
.tiptap-ai-suggestion-diff-sub-change {
  background-color: oklch(80.8% 0.114 19.571);
}

/* Render table row deletions correctly */
.tiptap-ai-suggestion-diff:has(tr) {
  display: contents;
}

.tiptap-ai-suggestion-diff:has(tr) td,
.tiptap-ai-suggestion-diff:has(tr) th {
  background-color: oklch(80.8% 0.114 19.571);
}
```

When comparing documents, changes are displayed as suggestions. To accept or reject individual changes or all changes at once, use the suggestion methods:

- [`acceptSuggestion`](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#acceptsuggestion): Accept a specific change
- [`rejectSuggestion`](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#rejectsuggestion): Reject a specific change
- [`acceptAllSuggestions`](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#acceptallsuggestions): Accept all changes
- [`rejectAllSuggestions`](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#rejectallsuggestions): Reject all changes

Call `getSuggestions` to get a list of changes between the documents, stored as [suggestions](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md).

```ts
// Get all changes (as suggestions)
const suggestions = toolkit.getSuggestions()
```

Then, call `acceptSuggestion` or `rejectSuggestion` to accept or reject the changes.

```ts
// Accept the first change
toolkit.acceptSuggestion(suggestions[0].id)

// Reject the first change
toolkit.rejectSuggestion(suggestions[0].id)

// Accept all changes
toolkit.acceptAllSuggestions()

// Reject all changes
toolkit.rejectAllSuggestions()
```

To stop comparing documents, use the `stopComparingDocuments` method. It hides the diff view and clears the suggestions.

```ts
toolkit.stopComparingDocuments()
```

## Example demo

Below is a demo of how to compare two documents in real-time.

> **Interactive demo:** [AiToolkitCompareDocuments](https://deploy-preview-405--tiptap-pro.netlify.app/preview/Extensions/AiToolkitCompareDocuments)

## Next steps

- [Compare documents API reference](https://tiptap.dev/docs/content-ai/capabilities/ai-toolkit/api-reference/diff-utility.md)