Sign in

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.

Get started with Comments

Follow the Next.js Comments guide or choose another Comments get-started guide.

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