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](/comments) to everyone as a public beta.

<YouTube id="dYjNKvkoee0" />

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

<ButtonLink className="mb-6" appearance="primary" href="/dashboard">
  Get started for free
</ButtonLink>

## 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!

<Slideshow
  slides={[
    {
      width: 820,
      height: 412,
      imageUrl:
        "/images/blog/liveblocks-comments/flexible-by-design-text-editor.png",
    },
    {
      width: 820,
      height: 412,
      imageUrl:
        "/images/blog/liveblocks-comments/flexible-by-design-whiteboard.png",
    },
    {
      width: 820,
      height: 412,
      imageUrl:
        "/images/blog/liveblocks-comments/flexible-by-design-audio-player.png",
    },
  ]}
/>

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

<BlogPostQuote
  quote="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."
  author={{
    name: "Andy Whyte",
    title: "CEO at MEDDICC",
    avatarUrl: "/images/people/andy-whyte.png",
    companyAvatarUrl: "/images/companies/avatars/meddicc.jpeg",
    companyName: "MEDDICC",
  }}
/>

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

<div className="relative my-8 flex flex-col gap-2 rounded-xl bg-marketing-surface-faded-subtle p-2 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle md:my-10">
  <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <Embed
      src="https://nextjs-comments.liveblocks.app/"
      className="absolute origin-top-left"
      style={{
        width: `${1.2 * 100}%`,
        height: `${1.2 * 100}%`,
        transform: `scale(${1 / 1.2})`,
      }}
    />
  </div>
</div>

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.

```tsx
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.

```tsx
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](/docs/api-reference/liveblocks-react-ui#Primitives).

## 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`.

<Figure highlight={true}>
  <Image
    src="/images/blog/liveblocks-comments/webhooks-events.png"
    alt="Webhooks events triggered by Liveblocks Comments"
    width={820}
    height={482}
    quality={90}
  />
</Figure>

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

<Slideshow
  slides={[
    {
      width: 820,
      height: 412,
      imageUrl: "/images/blog/liveblocks-comments/dashboard-comments.png",
      caption: "Comments in the dashboard",
    },
    {
      width: 820,
      height: 412,
      imageUrl: "/images/blog/liveblocks-comments/dashboard-webhooks.png",
      caption: "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.

<ButtonLink className="mb-6" appearance="primary" href="/dashboard">
  Get started for free
</ButtonLink>

To get started, you can also look at the
[step-by-step quickstart guide for React](/docs/get-started/react-comments). 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](/examples/overlay-comments)
- [Comments on a text editor](/examples/text-editor-comments)
- [Comments on a video player](/examples/video-comments)

You can also try the [Liveblocks Starter Kit for Next.js](/starter-kit) which
now includes a collaborative text editor with comments powered by Liveblocks
Comments.

---

We wouldn’t be here without the awesome work from
[Olivier](https://twitter.com/ofoucherot),
[Marc](https://twitter.com/marcbouchenoire),
[Florent](https://twitter.com/florentpml),
[Nimesh](https://twitter.com/nayajunimesh),
[Guillaume](https://twitter.com/guillaume_slls),
[Adrien](https://twitter.com/adigau31),
[Chris](https://twitter.com/ctnicholasdev), and
[Pierre](https://twitter.com/levaillantp) 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!