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.

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!

Previous

Show slide 1Show slide 2Show slide 3

Next

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.”

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.

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.

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.

Previous

Show slide 1Show slide 2

Next

Getting started

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

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.

• Comments on a website
• Comments on a text editor
• Comments on a video player

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!