Product updates

Liveblocks Comments is available for everyone

Earlier this year, we announced that Liveblocks Comments was entering private beta and have since collaborated with dozens of design partners to help shape the best product possible. Today, we’re excited to open up Liveblocks Comments to everyone as a public beta.

Liveblocks Comments is available for everyone

Earlier this year, we announced that Liveblocks Comments was entering private beta and have since collaborated with dozens of design partners to help shape the best product possible. Today, we’re excited to open up Liveblocks Comments to everyone as a public beta.

To try these Comments for yourself, create a Liveblocks account and get started for free.

Get started for free

Flexible by design

Each thread of comments can have metadata associated with it, providing enormous flexibility. This means that, with Liveblocks Comments, you can embed a full commenting experience into any product effortlessly—be it a text editor, a media player, a whiteboard, a chart, a website. Or anything, really!

Fully customizable

There are different layers of abstraction in which you can integrate Liveblocks Comments within your product, depending on your needs and requirements. If you use React, you can rely on versatile ready-made components, or pick-and-choose primitives to compose a completely custom interface using components and styles from your design system.

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

Here’s what the default React components look like in action—try it out, it’s a live demo.

Loading

And here’s how this looks in code: Start by adding useThreads to receive the threads in the current room, before adding the Thread and Composer default components to render them and enable creating more.

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> );}

Primitives

The default components used above rely on primitives which you can also use directly, should you wish to compose a fully custom user interface in a pixel-perfect way. Here’s a primitives example, demonstrating how to build a custom rich-text editor component that creates new threads.

import { Composer } from "@liveblocks/react-comments/primitives";import { useCreateThread } from "../liveblocks.config";import { Button } from "../your-design-system";
function Room() { const createThread = useCreateThread();
function handleSubmit({ body }, event) { event.preventDefault(); const thread = createThread({ body, metadata: {}, }); }
return ( <Composer.Form onComposerSubmit={handleSubmit}> <Composer.Editor components={/* Optional primitives */} /> <Composer.Submit asChild> <Button>New thread</Button> </Composer.Submit> </Composer.Form> );}

You can learn more about the React primitives here.

Keep people engaged with notifications

Each action taken in Comments has a webhook event associated with it, for example creating a thread, editing a comment, or adding an emoji reaction. Combined with the REST API, they enable you to build powerful and fully customizable notification flows. Whether that’s sending emails when someone’s mentioned, firing a Slack notification, or integrating Liveblocks into your current notification system.

Here’s a list of each Comments-related webhook event: threadMetadataUpdated, threadCreated, commentDeleted, commentCreated, commentEdited, commentReactionAdded, commentReactionRemoved.

Webhooks events triggered by Liveblocks Comments

Manage comments and webhooks events from the Liveblocks dashboard

Both comments and webhook events can be managed directly from the Liveblocks dashboard, making it easy to monitor the integration in your application.

Comments in the dashboard
Comments in the dashboard
Webhooks in the dashboard
Webhooks in the dashboard

Getting started

Get started with 1,000 comments per month for free. Add unlimited comments to the the Pro plan for $199/month.

Get started for free

To get started, you can also look at the step-by-step quickstart guide for React. We also have a few open-source examples for different comments use cases, including the live demo posted in this article.

You can also try the Liveblocks Starter Kit for Next.js which now includes a collaborative text editor with comments powered by Liveblocks Comments.


We wouldn’t be here without the awesome work from Olivier, Marc, Florent, Nimesh, Guillaume, Adrien, Chris, and Pierre who’ve been working on this initiative for nearly a year. We’d also like to thank our customers and design partners who’ve been incredibly helpful with their feedback during the private beta phase.

Let’s make the web more collaborative!

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.