Liveblocks Comments Beta

Enable discussion to any product effortlessly

Seamlessly embed a customizable commenting experience into your product using ready-made React components.

  • Real-time
  • Customizable
  • Accessible
was created in 2021
Jonathan
Jonathan8m ago
@Alicia Is this correct?
Alicia
Alicianow
I’ll double-check with @Steven.
Nimesh
Nimesh36m ago
00:46 Can we remove the reverb here?
Olivier
Olivier16m ago
We should change this into a circle.
👍3
1
Chris
Chris2m ago (edited)
Can we make the logo bigger?
😅6
All threads
Steven
Steven16m ago
00:10 Can we switch these shots?
Pierre
Pierrenow
Yep!
Adri
Adri5m ago
00:42 This looks a bit off.
Vincent
Vincent2m ago
01:12 I love the color grading! 👌
Guillaume
Steven
Reply to thread…Create a new thread…
Mark as resolvedAttach to current time
Comment
Send
Flexible

Shape it to your needs

Adapt Liveblocks Comments to any app, be it a text editor, media player, or whiteboard, using custom metadata.

{  "threadId": "th_aFc3G9t2HvNkR8PqO_zU5L",  "metadata": {    "quote": "Which one?"    "resolved": false,  }}
{  "threadId": "th_X7m9R4_p5qOzE1VZ3JkY6u",  "metadata": {    "shape": "circle",    "x": 720,    "y": 142  }}
{  "threadId": "th_dOqjuyEV1ZR_A3k2Yk4hN",  "metadata": {    "time": 36    "priority": "important",  }}
Customizable

Integrate flawlessly into your design

Rely on versatile ready-made components, or use primitives to build a completely custom interface using React.

Guillaume
Guillaume4h ago

@Marc This looks great! Can I make it look like my brand?

Marc
Marc2h ago

Sure! Try to tweak --lb-radius and --lb-accent for example.

Alicia
Alicia8m ago

@Marc So cool!

Nimesh
Nimeshnow

Reply to thread…

Theme
Border radius
Accent color

Default componentsMake it your own

Default components allow you to customize colors, spacing, and more, via CSS variables and classes.

PrimitivesAbove and beyond

Primitives are unstyled, headless components which allow you to create fully custom commenting experiences.

import cx from "classnames";import { Suspense } from "react";import {  Comment as CommentPrimitive,  Timestamp as TimestampPrimitive,} from "@liveblocks/react-comments/primitives";import { User } from "./User";
export function Comment({ comment, className, ...props }) { return ( <div className={cx(className, "p-4")} {...props}> <div className="flex items-center gap-3"> <span className="font-semibold"> <Suspense fallback={comment.userId}> <User userId={comment.userId} /> </Suspense> </span> <TimestampPrimitive date={comment.createdAt} className="text-sm text-gray-500" /> </div> <CommentPrimitive.Body className="prose mt-3" body={comment.body} components={{ Mention: ({ userId }) => ( <CommentPrimitive.Mention className="font-semibold text-blue-500"> @ <Suspense fallback={userId}> <User userId={userId} /> </Suspense> </CommentPrimitive.Mention> ), }} /> </div> );}
Notifications

Keep users engaged in the conversation

Use the REST API and webhooks to send emails, Slack notifications, and more—improving engagement and usage.

Before finding Liveblocks Comments, we were anticipating having to try and build something similar ourselves. Not only does Comments do everything we were planning (and more!) but it’s extremely easy to implement and the support from the Liveblocks team has been first class. Brilliant.
Image of MEDDICC
Image of Andy Whyte
Andy WhyteCEO at MEDDICC

Designed for developers

Liveblocks Comments comes with a set of pre-built React components. Get started for free today!

import "@liveblocks/react-comments/styles.css";import { Composer, Thread } from "@liveblocks/react-comments";import { useThreads } from "./liveblocks.config";
function Room() { const { threads } = useThreads(); return ( <div> {threads.map((thread) => ( <Thread key={thread.id} thread={thread} /> ))} <Composer /> </div> );}
Opensource examples

Explore our examples

Start making your product collaborative with the Liveblocks toolkit today