Tiptap Docs

Compare documents

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

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.

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 in the editor. Add this CSS file to your app to format suggestions as a red and green diff:

/* 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:

Call getSuggestions to get a list of changes between the documents, stored as suggestions.

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

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

// 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.

toolkit.stopComparingDocuments()

Example demo

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

Next steps

PreviouslyAI engineering