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

# Styling

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

Suggestion marks and node-level suggestions render 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;
}

/* Mark changes (formatting added or removed) */
[data-suggestion-type='markChange'] {
  background-color: rgba(255, 200, 0, 0.2);
}

/* Node attribute changes */
[data-suggestion-type='attributeChange'] {
  outline: 2px solid rgb(59, 130, 246);
  outline-offset: 2px;
}

/* Suggested block splits (the block created by a tracked Enter) */
[data-suggestion-type='blockSplit'] {
  box-shadow: inset 2px 0 0 rgb(59, 130, 246);
}

/* 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 and node-level suggestion elements                                                                                 |
| `data-suggestion-id`                | The unique suggestion ID                                                                                                                                      |
| `data-suggestion-type`              | The internal type: `'add'`, `'delete'`, `'replaceDeletion'`, `'replaceInsertion'`, `'markChange'`, `'attributeChange'`, `'sink'`, `'lift'`, or `'blockSplit'` |
| `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)                                                                                |
| `data-suggestion-attribute-changes` | JSON-serialized attribute changes (only present for `attributeChange` suggestions)                                                                            |

`data-suggestion-type` holds the internal [SuggestionNodeType](https://tiptap-docs.lin52025i.qzz.io/tracked-changes/api-reference/types.md#suggestionnodetype), not the public one. A [block split](https://tiptap-docs.lin52025i.qzz.io/tracked-changes/usage/advanced-usage.md#block-splits) is `blockSplit` here, even though the query API reports it as `split`.

Node type proposals also expose `data-suggestion-node-type-change`, which contains JSON-serialized original and proposed types and original attributes. When a deletion or split shares the block, it also includes the formatting proposal's identity. Target `[data-suggestion-node-type-change]` to style these proposals independently of the block's primary suggestion type.

## Block split marker

A suggested block split also renders a marker at the end of the block **before** the split, showing where the break was added. The default marker is a `<span>` with the class `tiptap-tracked-change-split-marker`:

```css
.tiptap-tracked-change-split-marker {
  color: rgb(59, 130, 246);
  opacity: 0.7;
  margin-left: 0.15em;
  user-select: none;
}
```

Every marker also carries `data-tracked-change-split="true"`, so you can target custom markers too:

```css
[data-tracked-change-split] {
  color: rgb(59, 130, 246);
}
```

The marker is a widget, not document content. The extension always sets `contenteditable="false"` and disables selection and pointer events on it, so it cannot be typed into, selected, or clicked. Use [`blockSplitMarker`](https://tiptap-docs.lin52025i.qzz.io/tracked-changes/getting-started/install.md#blocksplitmarker) to change the character or element, or set it to `null` to render nothing.

## 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:

- Nesting is supported for inline suggestions only. Nested suggestions spanning whole blocks are out of scope
- Tracking [node type changes](https://tiptap-docs.lin52025i.qzz.io/tracked-changes/usage/advanced-usage.md#node-type-changes) as `attributeChange` suggestions requires the opt-in `nodeTypeChangeTypes` setting, which is available for local editors. When using Tiptap Collaboration (Y.js document), leave this setting at `[]` to track type conversions as replacements.
- There is no explicit suggestion mode that renders a separate "clean" document alongside the tracked version