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.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
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
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!
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.Andy WhyteCEO at MEDDICC
Here’s what the default React components look like in action—try it out, it’s a live demo.
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.
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.
You can learn more about the React primitives here.
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.
Both comments and webhook events can be managed directly from the Liveblocks dashboard, making it easy to monitor the integration in your application.
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!
