---
title: "Compare documents"
description: "Compare two Tiptap JSON documents and show their differences."
canonical_url: "https://tiptap.dev/docs/compare/guides/compare-documents"
---

# Compare documents

Compare two Tiptap JSON documents and show their differences.

Use the [`compareDocuments` command](https://tiptap.dev/docs/compare/api-reference/commands.md#comparedocuments) to compare two Tiptap JSON documents and display the changes.

> **Interactive demo:** [CompareDocuments](https://embed-pro.tiptap.dev/preview/Extensions/CompareDocuments)

## Compare the documents

First, create the documents you want to compare.

```ts
import { Editor } from '@tiptap/core'

const editorA = new Editor()
const docA = editorA.toJSON()

const editorB = new Editor()
const docB = editorB.toJSON()
```

Create a diff editor with the `Compare` extension. This is the editor where the changes will be displayed. Then call `compareDocuments` with the two Tiptap JSON documents.

```ts
import { Editor } from '@tiptap/core'
import { Compare } from '@tiptap-pro/compare'

// The diff editor
const editor = new Editor({
  extensions: [
    Compare,
    // ...other extensions
  ],
})

editor.commands.compareDocuments({
  docA,
  docB,
})
```

The [`compareDocuments` command](https://tiptap.dev/docs/compare/api-reference/commands.md#comparedocuments) creates the comparison and immediately displays the changes as suggestions.

## Style the changes

Compare adds CSS classes to the current document B content and the replacement content from document A. Add these styles to display the changes as a red and green diff.

```css
.compare-documents {
  --diff-document-a-color: oklch(0.396 0.141 25.723);
  --diff-document-a-group-color: oklch(0.936 0.032 17.717);
  --diff-document-a-highlight-color: oklch(80.8% 0.114 19.571);
  --diff-document-b-color: var(--black);
  --diff-document-b-group-color: oklch(0.962 0.044 156.743);
  --diff-document-b-highlight-color: oklch(87.1% 0.15 154.449);
}

/* Document B: current, added, or changed content */
.diff-suggestion,
.diff-suggestion > *,
.diff-suggestion-nested-change {
  background-color: var(--diff-document-b-highlight-color);
  color: var(--diff-document-b-color);
}

/* Keep formatting correct inside replacement content */
strong .diff-suggestion-diff {
  font-weight: normal;
}

em .diff-suggestion-diff {
  font-style: normal;
}

code:not(pre code) .diff-suggestion-diff {
  font-family: sans-serif;
}

.diff-suggestion-diff strong {
  font-weight: bold;
}

.diff-suggestion-diff em {
  font-style: italic;
}

.diff-suggestion-diff code:not(pre code) {
  font-family: monospace;
}

/* Lighter backgrounds for grouped changes */
.diff-suggestion.diff-suggestion--change-group,
.diff-suggestion.diff-suggestion--change-group > *:not(.diff-suggestion-sub-change) {
  background-color: var(--diff-document-b-group-color);
}

.diff-suggestion-sub-change {
  background-color: var(--diff-document-b-highlight-color);
}

/* Document A: removed or replacement content */
.diff-suggestion-diff,
.diff-suggestion-diff > * {
  background-color: var(--diff-document-a-highlight-color);
  color: var(--diff-document-a-color);
}

.diff-suggestion-diff.diff-suggestion-diff--change-group,
.diff-suggestion-diff.diff-suggestion-diff--change-group > *:not(.diff-suggestion-diff-sub-change) {
  background-color: var(--diff-document-a-group-color);
}

.diff-suggestion-diff-sub-change {
  background-color: var(--diff-document-a-highlight-color);
}

/* Keep table changes inside their table cells */
.diff-suggestion-diff:has(tr) {
  display: contents;
}

.diff-suggestion-diff:has(tr) td,
.diff-suggestion-diff:has(tr) th {
  background-color: var(--diff-document-a-highlight-color);
}
```

### Colorblind styles

The following stylesheet uses orange and blue to display the diff. The colorblind styles are activated when the diff is wrapped inside an element with the `colorblind-mode` class.

```scss
.colorblind-mode {
  --diff-document-a-color: oklch(0.396 0.08 55);
  --diff-document-a-group-color: oklch(0.95 0.05 70);
  --diff-document-a-highlight-color: oklch(83% 0.13 70);
  --diff-document-b-group-color: oklch(0.95 0.035 250);
  --diff-document-b-highlight-color: oklch(83% 0.1 250);
}
```