---
title: "Integrate Comments into your editor"
canonical_url: "https://tiptap.dev/docs/editor/extensions/functionality/comments"
---

# Integrate Comments into your editor

Integrate and manage comments within your editor using the Tiptap Comments extension. Create threads and comments in your editor or via REST API.

> **More details:**
>
> For more detailed information on how to integrate, install, and configure the Tiptap Comments extension, please visit our [feature page](https://tiptap.dev/docs/comments/getting-started/overview.md).

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

## Events

The Comments extension emits events you can listen to with `editor.on()`. These events are useful for building custom UIs, syncing state, and integrating with other extensions like [Tracked Changes](https://tiptap.dev/docs/editor/extensions/functionality/tracked-changes.md).

### Thread Events

#### comments:threadCreated

Fired when a new comment thread is created.

```js
editor.on('comments:threadCreated', ({ threadId, thread, initialComment, position, threadType }) => {
  // threadType: 'block' | 'inline'
  console.log(`Thread ${threadId} created at ${position.from}-${position.to}`)
})
```

#### comments:threadUpdated

Fired when a thread's data or metadata changes.

```js
editor.on('comments:threadUpdated', ({ threadId, thread, changes, updatedBy }) => {
  console.log(`Thread ${threadId} updated by ${updatedBy}`)
})
```

#### comments:threadResolved

Fired when a thread is resolved.

```js
editor.on('comments:threadResolved', ({ threadId, thread, resolvedBy, resolvedAt }) => {
  console.log(`Thread ${threadId} resolved by ${resolvedBy} at ${resolvedAt}`)
})
```

#### comments:threadUnresolved

Fired when a previously resolved thread is reopened.

```js
editor.on('comments:threadUnresolved', ({ threadId, thread, unresolvedBy }) => {
  console.log(`Thread ${threadId} reopened by ${unresolvedBy}`)
})
```

#### comments:threadDeleted

Fired when a thread is deleted.

```js
editor.on('comments:threadDeleted', ({ threadId, thread, deletedBy, soft }) => {
  // soft: whether this is a soft delete (archived) or hard delete
  console.log(`Thread ${threadId} deleted by ${deletedBy}`)
})
```

#### comments:threadRemovedFromDocument

Fired when a thread's mark is removed from the document (e.g., the annotated text was deleted or the thread was archived).

```js
editor.on('comments:threadRemovedFromDocument', ({ threadId, thread, removedBy, canRestore }) => {
  // removedBy: 'edit' | 'command'
  console.log(`Thread ${threadId} removed from document`)
})
```

### Comment Events

#### comments:commentCreated

Fired when a new comment is added to a thread.

```js
editor.on('comments:commentCreated', ({ threadId, commentId, comment, thread }) => {
  console.log(`Comment ${commentId} added to thread ${threadId}`)
})
```

#### comments:commentUpdated

Fired when a comment's content is edited.

```js
editor.on('comments:commentUpdated', ({ threadId, commentId, comment, oldContent, newContent }) => {
  console.log(`Comment ${commentId} updated`)
})
```

#### comments:commentDeleted

Fired when a comment is deleted from a thread.

```js
editor.on('comments:commentDeleted', ({ threadId, commentId, comment, deletedBy }) => {
  console.log(`Comment ${commentId} deleted by ${deletedBy}`)
})
```

### Selection & Hover Events

#### comments:threadSelected

Fired when a thread is selected (e.g., user clicks on a comment annotation).

```js
editor.on('comments:threadSelected', ({ threadId, thread }) => {
  // Show thread details in your sidebar
  console.log(`Thread ${threadId} selected`)
})
```

#### comments:threadUnselected

Fired when a thread is deselected.

```js
editor.on('comments:threadUnselected', ({ threadId }) => {
  console.log('Thread deselected')
})
```

#### comments:threadHovered

Fired when the user hovers over a thread annotation in the document.

```js
editor.on('comments:threadHovered', ({ threadIds, threads }) => {
  console.log(`Hovering over threads: ${threadIds.join(', ')}`)
})
```

#### comments:threadUnhovered

Fired when the user stops hovering over a thread annotation.

```js
editor.on('comments:threadUnhovered', ({ threadIds }) => {
  console.log('Threads unhovered')
})
```