---
title: "Styling"
description: "Style suggestion marks with CSS data attributes in the Tiptap Tracked Changes extension."
canonical_url: "https://tiptap.dev/docs/tracked-changes/api-reference/styling"
---

# Styling

Style suggestion marks with CSS data attributes in the Tiptap Tracked Changes extension.

The suggestion mark renders as a `<span>` element with data attributes that can be targeted with CSS.

## CSS selectors

```css
/* All suggestions */
[data-suggestion] {
  /* Base styles for all suggestions */
}

/* Insertions */
[data-suggestion-type="add"] {
  background-color: rgba(0, 255, 0, 0.2);
  text-decoration: underline;
}

/* Deletions */
[data-suggestion-type="delete"] {
  background-color: rgba(255, 0, 0, 0.2);
  text-decoration: line-through;
}

/* Replacement deletions (old text being replaced) */
[data-suggestion-type="replaceDeletion"] {
  background-color: rgba(255, 0, 0, 0.2);
  text-decoration: line-through;
}

/* Replacement insertions (new text replacing old) */
[data-suggestion-type="replaceInsertion"] {
  background-color: rgba(0, 255, 0, 0.2);
  text-decoration: underline;
}

/* Style suggestions by user */
[data-suggestion-user="user-123"] {
  border-bottom: 2px solid blue;
}
```

## Available data attributes

| Attribute                       | Description                                                                    |
| ------------------------------- | ------------------------------------------------------------------------------ |
| `data-suggestion`               | Always present on suggestion mark elements                                     |
| `data-suggestion-id`            | The unique suggestion ID                                                       |
| `data-suggestion-type`          | `'add'`, `'delete'`, `'replaceDeletion'`, or `'replaceInsertion'`              |
| `data-suggestion-user`          | The ID of the user who created the suggestion                                  |
| `data-suggestion-created`       | ISO timestamp when the suggestion was created                                  |
| `data-suggestion-user-metadata` | JSON-serialized user metadata object (only present when `userMetadata` is set) |

## Known limitations

This extension is in active development and will change significantly over the coming months. The following limitations are known and will be addressed in future releases:

- Attribute or mark changes (e.g. toggling bold, changing a link URL) are not tracked
- Node type changes (e.g. converting a paragraph to a heading) are not tracked
- Inserting new lines or removing text-based nodes (e.g. deleting an entire paragraph) is not handled
- There is no explicit suggestion mode that renders a separate "clean" document alongside the tracked version