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. A common use case is to compare documents before and after an AI edits them. See the Review changes guide.

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);
}

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

Call getSuggestions to get a list of each individual change between the documents, stored as suggestions. Then, call acceptChange or rejectChange to accept or reject them individually.

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

// Accept the first change
toolkit.acceptChange(suggestions[0].id)

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

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.

Try clicking the "Start comparing documents" button, and a diff will appear. Then, try editing the document and see the diff change.

Next steps

PreviouslySchema awareness