Overview

Liveblocks Comments adds contextual discussions to your product. Threads can be attached to a room, document position, text selection, table cell, or any location represented by metadata.

Features

• Realtime threads, comments, replies, reactions, and resolution
• User mentions and notification subscriptions
• Ready-made React components and lower-level primitives
• Custom thread metadata for positioning and filtering
• Attachments, rich comment bodies, and edit history
• In-app, email, and webhook notification workflows
• Client, server, and REST APIs

Render room threads

Use useThreads to retrieve threads and Thread to render the default interface.

import { useThreads } from "@liveblocks/react/suspense";import { Thread } from "@liveblocks/react-ui";
export function Comments() {  const { threads } = useThreads();
  return threads.map((thread) => <Thread key={thread.id} thread={thread} />);}

Use the default components for the quickest integration, or combine hooks and primitives for a custom interface.

Attach comments to content

Store application-specific placement data in thread metadata. For text annotations, use a supported text editor integration. For canvases and tables, store the shape, coordinate, row, or cell identifier.

Next steps

• Learn the Comments concepts.
• Configure users and mentions.
• Browse Comments guides.
• Explore Comments examples.