---
title: "Styling"
description: "Style diff suggestions rendered by the Tiptap Compare extension."
canonical_url: "https://tiptap.dev/docs/compare/api-reference/styling"
---

# Styling

Style diff suggestions rendered by the Tiptap Compare extension.

Compare renders its default diff UI with CSS classes. Add your own class or attributes with `displayOptions` when calling a command like [`compareDocuments`](https://tiptap.dev/docs/compare/api-reference/commands.md#comparedocuments) or [`compareVersions`](https://tiptap.dev/docs/compare/api-reference/commands.md#compareversions).

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    attributes: { class: 'my-added-content' },
    replacementAttributes: { class: 'my-removed-content' },
  },
})
```

## Default CSS classes

Every diff suggestion renders the current document content and the suggested replacement content. The following classes are applied to those elements.

### Current content

- `.diff-suggestion` — applied to every current-content element.
- `.diff-suggestion--selected` — applied when the suggestion is selected.
- `.diff-suggestion--change-group` — applied when the suggestion contains grouped inline changes.

If the suggestion is created from a change group and it has sub-changes, the sub-changes contain these classes:

- `.diff-suggestion-sub-change` — applied to each individual change within a group.
- `.diff-suggestion-sub-change--selected` — applied to a current-content sub-change when its suggestion is selected.

Nested changes are displayed in the current-content side of the review and have these classes:

- `.diff-suggestion-nested-change` — applied to every nested change.
- `.diff-suggestion-nested-change--inline` — applied when the nested change covers inline content.
- `.diff-suggestion-nested-change--block` — applied when the nested change covers block content.
- `.diff-suggestion-nested-change--selected` — applied when the parent suggestion is selected.

Use `displayOptions.getNestedChangeAttributes` to add attributes to a nested change. A returned `class` is appended to these default classes.

### Suggested content

- `.diff-suggestion-diff` — applied to every suggested-content element.
- `.diff-suggestion-diff--selected` — applied when the suggestion is selected.
- `.diff-suggestion-diff--change-group` — applied when the suggestion contains grouped inline changes.

If the suggestion is created from a change group and it has sub-changes, the sub-changes contain these classes:

- `.diff-suggestion-diff-sub-change` — applied to each individual suggested-content change within a group.
- `.diff-suggestion-diff-sub-change--selected` — applied to a suggested-content sub-change when its suggestion is selected.

## Example CSS styles

The [Compare documents guide](https://tiptap.dev/docs/compare/guides/compare-documents.md#style-the-changes) includes example CSS stylesheets that work out of the box with the default suggestions that are rendered by the Compare extension.

The [Compare versions guide](https://tiptap.dev/docs/compare/guides/compare-versions.md#style-the-changes) includes a CSS stylesheet for a diff view where changes are marked with a different color depending on their author.

## Custom suggestion rendering

The [renderDecorations](https://tiptap.dev/docs/compare/api-reference/types.md#custom-decoration-rendering) option gives you full control over how the suggestion is rendered. It's a function that receives a [DiffSuggestion object](https://tiptap.dev/docs/compare/api-reference/types.md#diffsuggestion) and returns a list of [ProseMirror decorations](https://prosemirror.net/docs/ref/#view.Decorations).

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    renderDecorations({ suggestion }) {
      return [
        Decoration.inline(suggestion.range.from, suggestion.range.to, {
          class: 'custom-decoration',
        }),
      ]
    },
  },
})
```

To combine your custom decorations with the default decorations displayed by the Compare extension, use the `defaultRenderDecorations` option:

```ts
editor.commands.compareDocuments({
  docA,
  docB,
  displayOptions: {
    renderDecorations({ suggestion, isSelected, defaultRenderDecorations }) {
      return [
        Decoration.inline(suggestion.range.from, suggestion.range.to, {
          class: 'custom-decoration',
        }),
        ...defaultRenderDecorations({
          attributes: isSelected
            ? {
                class: 'custom-selected-class',
              }
            : {},
        }),
      ]
    },
  },
})
```

## Render custom Node Views

To apply different styling to a [Tiptap Node View](https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views.md) when it's inside a diff suggestion, use the [`getSuggestionNodeViewContext` utility](https://tiptap.dev/docs/compare/api-reference/utilities.md#getsuggestionnodeviewcontext).

The function returns useful context about the suggestion. Learn more about it in the [API Reference](https://tiptap.dev/docs/compare/api-reference/utilities.md#getsuggestionnodeviewcontext).

```tsx
import { getSuggestionNodeViewContext } from '@tiptap-pro/compare'
import Heading from '@tiptap/extension-heading'
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'

const CustomHeading = Heading.extend({
  addNodeView() {
    return ReactNodeViewRenderer(({ decorations }) => {
      const { suggestion, isSelected, isReplacement } = getSuggestionNodeViewContext(decorations)

      return (
        <NodeViewWrapper style={{ position: 'relative' }}>
          {suggestion && (
            <span>
              Suggestion {suggestion.id} is {isSelected ? 'selected' : 'not selected'} and rendered
              in the {isReplacement ? 'replacement' : 'document'}.
            </span>
          )}
        </NodeViewWrapper>
      )
    })
  },
})
```