With Liveblocks 1.10, we’re adding Notifications support for Comments. This
update comes with a brand new notification system optimized for collaboration,
pre-built React components and hooks to add a notifications inbox to your app,
as well as a new webhook event to send engaging and non-spammy email
notifications.

- [The Liveblocks notification system](#notification-system)
- [Pre-built React components and hooks](#react-components-and-hooks)
- [A new webhook event for email notifications](#email-notifications)
- [New open source examples](#new-open-source-examples)

If you wish to upgrade to 1.10, we recommend following our
[Liveblocks 1.10 upgrade guide](/docs/platform/upgrading/1.10) to get started.

<Figure highlight={false}>
  <Image
    src="/images/blog/liveblocks-1-10/notifications-inbox.jpg"
    alt=""
    width={672}
    height={448}
    quality={95}
  />
</Figure>

## The Liveblocks notification system [#notification-system]

Notifications are essential for any collaborative product, but most companies do
not have the capacity to build a robust notification system that includes things
like: batching logic to avoid spamming people, per-user notification
preferences, a realtime and actionable notifications inbox interface, a
synchronized system aware of read statuses, and more.

Instead, most companies seek a pragmatic solution that works exactly like how
Figma, Notion, and Linear do it. So that’s the approach we’ve taken at
Liveblocks. We recognized this need and developed a notification system
optimized for collaboration that requires minimal configuration.

Our system not only tracks when comments are read but also groups notifications
efficiently to prevent overload across in-app and email inboxes. As a result,
people can collaborate more efficiently with less noise.

<Slideshow
  slides={[
    {
      width: 1055,
      height: 623,
      imageUrl: "/images/blog/liveblocks-1-10/batching-1.jpg",
      caption: "The user has read the thread, no emails get sent.",
      quality: 100,
    },
    {
      width: 1055,
      height: 623,
      imageUrl: "/images/blog/liveblocks-1-10/batching-2.jpg",
      caption:
        "The user hasn’t read the last comment in the thread, one email gets sent with one comment in it.",
      quality: 100,
    },
    {
      width: 1055,
      height: 623,
      imageUrl: "/images/blog/liveblocks-1-10/batching-3.jpg",
      caption:
        "The user hasn’t read all comments, they get batched into one email notifcation.",
      quality: 100,
    },
  ]}
/>

## Pre-built React components and hooks [#react-components-and-hooks]

### Notifications inbox

In most cases, notifications inboxes live at the workspace and user level so
they can be accessed from anywhere. That’s why Liveblocks notifications aren’t
available on the existing
[`createRoomContext`](/docs/api-reference/liveblocks-react#createRoomContext)
nor within [`RoomProvider`](/docs/api-reference/liveblocks-react#RoomProvider).
Instead, you’ll need to rely on the new
[`createLiveblocksContext`](/docs/api-reference/liveblocks-react#createLiveblocksContext)
to configure
[`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider)
in your application. This will enable you to retrieve notifications and use the
pre-built React components and hooks outside of rooms.

```tsx
import {
  InboxNotification,
  InboxNotificationList,
} from "@liveblocks/react-comments";
import { useInboxNotifications } from "../../liveblocks.config";

function Component() {
  const { inboxNotifications } = useInboxNotifications();

  return (
    <InboxNotificationList>
      {inboxNotifications.map((inboxNotification) => {
        return (
          <InboxNotification
            key={inboxNotification.id}
            inboxNotification={inboxNotification}
          />
        );
      })}
    </InboxNotificationList>
  );
}
```

You can learn more about this on
[the Notifications page](/docs/products/comments/notifications#LiveblocksContext),
or to see an example of it in use, look no further than the Liveblocks
[Next.js Starter Kit](/starter-kit).

<Figure>
  <figcaption className="sr-only">
    Highlights the new notifications inbox in the Liveblocks Starter Kit.
  </figcaption>
  <video width={672} height={504} autoPlay loop muted playsInline>
    <source
      src="/images/blog/liveblocks-1-10/starter-kit-notifications.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

The code is all
[open source](https://github.com/liveblocks/liveblocks/tree/main/starter-kits/nextjs-starter-kit)
and you can configure and deploy it to Vercel in just a few minutes with the
following command line.

```bash
npx create-liveblocks-app@latest --next
```

### Unread indicators

Notifications and unread comments are tighly coupled together. That way, when
someone reads a thread, the notification associated with that will automatically
be marked as read as well.

We’ve added this behavior to the default
[`Thread`](/docs/products/comments/default-components#Thread) component. And it
also includes a brand new UI indicator above all unread comments that
automatically disappears once the notification or thread has been read.

<Figure highlight={true}>
  <Image
    src="/images/blog/liveblocks-1-10/unread-indicator.jpg"
    alt=""
    width={672}
    height={448}
    quality={95}
  />
</Figure>

If you’re building your own custom `Thread` component, you can use the
[`useMarkThreadAsRead`](/docs/api-reference/liveblocks-react#useMarkThreadAsRead)
and
[`useThreadSubscription`](/docs/api-reference/liveblocks-react#useMarkThreadAsRead)
hooks to replicate this behavior—or even customize it if you want to.

### Customizable notification settings

By default, people only receive notifications for threads they’re participating
in. But sometimes, that might not be what you want.

For instance, if you want to build a settings UI that allows people to change
their own notification preferences for the current room, you can use
[`useRoomNotificationSettings`](/docs/api-reference/liveblocks-react#useRoomNotificationSettings)
to set the setting to either `all`, `replies_and_mentions`, or `none` to mute
the room entirely.

You can also use
[`updateRoomNotificationSettings`](/docs/api-reference/liveblocks-node#post-rooms-roomId-users-userId-notification-settings)
directly on the server. For example, this can be useful to make sure the creator
of a document gets notified about everything within the room.

We plan to enable more notification settings over time. If there is anything
you’d like to be added, please [let us know on Discord](/discord) and we’ll make
sure to get that prioritized.

## A new webhook event for email notifications [#email-notifications]

Using Liveblocks webhooks, it’s possible to trigger your API endpoints when
certain events occur, such as a thread being created, or a comment being
modified. With 1.10, we’re introducing a new
[`notification`](/docs/platform/webhooks#NotificationEvent) webhook event that’s
directly tied to the Liveblocks notification system.

As a result, the [`notification`](/docs/platform/webhooks#NotificationEvent)
event only gets triggered once within a configurable timeframe and only when a
thread is still unread. This enables you to send an email notification that is
genuinely useful and non-spammy for people. And those are the kind of
notifications that drive engagement and organic user growth for your product.

<Figure highlight={false}>
  <Image
    src="/images/blog/liveblocks-1-10/notifications-email.jpg"
    alt=""
    width={672}
    height={448}
    quality={95}
  />
</Figure>

It’s also important to note that Liveblocks doesn’t send the actual email
notification on your behalf. We do this for security and deliverability reasons
as you definitely don’t want a potential bad actor to influence the ability for
your users to receive an email or not. So you’ll need to rely on an email
provider to
[implement your own logic in your endpoint](/docs/products/comments/email-notifications#Your-endpoint).
You can learn more about this on
[the dedicated page](/docs/products/comments/email-notifications) and
[the step-by-step tutorial](/docs/guides/how-to-send-email-notifications-of-unread-comments)
as well.

If you’ve made it this far, you’ll also most likely be interested in custom
notifications. We’re currently working on APIs to enable you to send custom
notifications that might not be directly related to collaboration and comments.
We’ll release custom notifications soon, so don’t hesitate to
[follow Liveblocks on X](https://x.com/liveblocks) to get notified when it’s out
(no pun intended)!

## New open source examples [#new-open-source-examples]

Since our last update, we’ve added new open-source examples, the first being our
[audio comments example](/examples/audio-comments/nextjs-comments-audio).

<Figure>
  <figcaption className="sr-only">
    Highlights of the new audio example’s interface.
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/liveblocks-1-10/nextjs-comments-audio.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

This example shows you how to build a waveform timeline that’s automatically
generated from an audio file. We’ve then used Liveblocks to add realtime
comments along the timeline, as well as below the player.

We’ve also created examples and guides for
[BlockNote](https://www.blocknotejs.org/), a modern block-based text editor.
Here’s how our new examples look alongside our
[DevTools browser extension](https://liveblocks.io/devtools).

<Figure>
  <figcaption className="sr-only">
    Real-time collaboration in our new BlockNote example showing live cursors,
    avatars, and text editor features. The video also shows the Liveblocks
    DevTools.
  </figcaption>
  <video autoPlay loop muted playsInline>
    <source
      src="/images/blog/liveblocks-1-10/nextjs-yjs-blocknote.mp4"
      type="video/mp4"
    />
  </video>
</Figure>

Try it live, and get the source code, by visiting our
[BlockNote text editor example](/examples/collaborative-text-editor/nextjs-blocknote)
page.

## Upgrade guide and get started with Liveblocks Comments

Remember that there are a number of breaking changes in this update, so we
recommend following our
[Liveblocks 1.10 upgrade guide](/docs/platform/upgrading/1.10) to get started.
And if you’d like to add Comments to your application, make sure to check out
our guides and examples.

- [Get started with Comments](/docs/get-started/nextjs-comments)
- [Comments examples](/examples/browse/comments)
- [Comments guides](/docs/guides?topics=comments)

## Contributors

Huge thanks to everyone who contributed and specifically to
[Adrien Gaudon](https://x.com/adigau31),
[Florent Lefebvre](https://x.com/florentpml),
[Guillaume Salles](https://x.com/guillaume_slls),
[Marc Bouchenoire](https://x.com/marcbouchenoire),
[Nimesh Nayaju](https://x.com/nayajunimesh),
[Olivier Foucherot](https://www.linkedin.com/in/olivier-foucherot),
[Chris Nicholas](https://x.com/ctnicholasdev) for all their work on Comments and
Notifications, and [Pierre Le Vaillant](https://x.com/levaillantp) for his work
on the audio example. Keep checking out the
[changelog](https://github.com/liveblocks/liveblocks/blob/main/CHANGELOG.md) for
the full release notes—see you next time!