---
title: "CollaborationCaret extension"
description: "Use the Collaboration Cursor extension in Tiptap to show other user’s carets and their names while they type. More in the docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/collaboration-caret"
---

# CollaborationCaret extension

Use the Collaboration Cursor extension in Tiptap to show other user’s carets and their names while they type. More in the docs!

This extension adds information about all connected users (like their name and a specified color), their current caret position and their text selection (if there’s one).

It requires a collaborative Editor, so make sure to check out the [Tiptap Collaboration Docs](https://tiptap.dev/docs/collaboration/getting-started/overview.md) for a fully hosted or on-premises collaboration server solution.

> **Public Demo:**
>
> The content of this editor is shared with other users.

> **Interactive demo:** [CollaborationCaret](https://embed.tiptap.dev/preview/Extensions/CollaborationCaret?hideSource)

> **Interactive demo:** [CollaborationCaret](https://embed.tiptap.dev/preview/Extensions/CollaborationCaret)

Open this page in multiple browser windows to test it.

## Install

```bash
npm install @tiptap/extension-collaboration-caret
```

This extension requires the [`Collaboration`](https://tiptap.dev/docs/collaboration/getting-started/overview.md) extension.

## Settings

### provider

A Y.js network provider, for example a [Tiptap Collaboration](https://tiptap.dev/docs/collaboration/getting-started/overview.md) instance.

Default: `null`

### user

Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. The values are synced with all other connected clients.

Default: `{ user: null, color: null }`

### render

A render function for the caret, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/) for an example.

### selectionRender

A render function for the selection, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/) for an example.

## Styling

This extension does not include default styles. Without the following CSS, carets will render as unstyled inline elements.

Add the following styles to your project:

```css
/* Give a remote user a caret */
.tiptap .collaboration-carets__caret {
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

/* Render the username above the caret */
.tiptap .collaboration-carets__label {
  border-radius: 3px 3px 3px 0;
  color: #0d0d0d;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}
```

## Commands

### updateUser()

Pass an object with updated attributes of the current user. It expects a `name` and a `color`, but you can add additional fields, too.

```js
editor.commands.updateUser({
  name: 'John Doe',
  color: '#000000',
  avatar: 'https://unavatar.io/github/ueberdosis',
})
```

## Source code

[packages/extension-collaboration-caret/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-caret/)

Collaboration

Fasten your seatbelts! Make your rich text editor collaborative with Tiptap Collaboration.

Real-time everything
Offline-first & conflict free
Managed and hosted by us or on your premises

[Learn more](https://tiptap.dev/docs/collaboration/getting-started/overview.md)