There’s a reason why fast-growing companies like Figma, Linear, and Notion are
thriving. Their secret? They’ve perfected collaboration with realtime comments,
intelligent notifications, and multiplayer editing. I witnessed this first hand
in 2016-2020 while working on InVision Studio, a design tool from a company that
once was valued at nearly $2B with over $100M in annual recurring revenue. We
were killing it, but Figma was becoming increasingly popular within the design
community, thanks to their incredible browser-based collaborative design tool.

To compete, we knew we had to perfect collaboration in the product, and we knew
we had to do it fast. So leadership spun up a dedicated squad to convert
InVision Studio from a desktop-based single-user application into a
browser-based collaborative-by-default platform. Unfortunately, it was too
little, too late. What seemed easy-enough at first glance turned into
months-long battles for quality. And fast forward a few years, InVision
officially announced they’d be shutting down.

That’s why we created Liveblocks—so that you could write a different story for
your company.

## Introducing Liveblocks 2.0, the platform to unlock collaboration in your product

Today, I’m thrilled to introduce Liveblocks 2.0, a set of products to quickly
add engaging collaborative features to your application in days, not months:

- [Liveblocks Text Editor](#text-editor): all the collaborative features
  embedded in your editor.
- [Liveblocks Comments](#comments): enable feedback in your product.
- [Liveblocks Notifications](#notifications): the notification system designed
  for collaboration.
- [Liveblocks Realtime APIs](#realtime-apis): build any realtime collaborative
  experience.

### Liveblocks Text Editor [#text-editor]

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/text-editor-cover.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

To start things off, we’re introducing a brand new beta product:
[Liveblocks Text Editor](/text-editor). It enables you to add table stakes
collaborative features like mentions, comments, notifications, and AI to your
text editor with just a few lines of code.

<Slideshow
  slides={[
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/text-editor.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/text-editor-comments.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/text-editor-mention.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/text-editor-notifications.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/text-editor-AI.jpg",
    },
  ]}
/>

Our goal with Liveblocks Text Editor is to enhance existing text editor
frameworks through dedicated integrations that make it trivial to add all the
table stakes collaborative features you use and love every day in tools like
Notion, Linear, and Google Docs:

- Collaborative editing
- Multiplayer undo/redo
- Annotations
- Inline mentions
- AI suggestions
- Dynamic UI positioning for annotations, cursors, and text selection
- Notifications
- And more!

You can start using Liveblocks Text Editor today with the `@liveblocks/lexical`
package. We also expect to release a `@liveblocks/tiptap` package in the coming
weeks as well. Please, [let us know on X](https://x.com/liveblocks) if there is
a text editor framework you’d like to be supported.

---

### Liveblocks Comments [#comments]

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/comments-cover.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

After nearly a year in beta, [Liveblocks Comments](/comments) is now officially
generally available, enabling you to quickly add a commenting system to your
product.

<Slideshow
  slides={[
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/comments-video-editor.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/comments-website.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/comments-AI.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/comments-audio-player.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/comments-text-editor.jpg",
    },
  ]}
/>

Liveblocks Comments supports all the table stakes features you’re used to from
tools like Figma, Notion, Linear, and more. Thanks to our pre-built React
components, you can customize things as much or as little as you want. Companies
like Zapier, Agility CMS, and many others are already using it in production and
seeing great results.

<BlogPostQuote
  quote="Liveblocks has enabled us to test and validate collaborative use‑cases without needing to invest several months of dev time into a solution that might work. It helps us de-risk our roadmap meaningfully, especially for a small team."
  author={{
    name: "Luke Thomas",
    title: "Director of New Products at Zapier",
    avatarUrl: "/images/people/luke-thomas.jpg",
    companyAvatarUrl: "/images/companies/avatars/zapier.jpg",
    companyName: "Zapier",
  }}
/>

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/comments-code-snippet.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

---

### Liveblocks Notifications [#notifications]

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/notifications-cover.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

[Liveblocks Notifications](/notifications) is the notification system optimized
for collaboration, and is now generally available as well. When notifications
land in your inbox at just the right time, without feeling like spam, something
special happens: people engage and your business grows. That’s what we’re doing
with Liveblocks Notifications.

<Slideshow
  slides={[
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/notifications-UI.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/notifications-custom-UI.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/notifications-email.jpg",
    },
  ]}
/>

Liveblocks Notifications are special because they’re crafted to match the UX
patterns world‑class companies like Figma, Notion, and Linear spent years
optimizing. This means you can focus on your own product, not building, scaling,
and optimizing notifications. What’s nice is that it seamlessly integrates with
Liveblocks Comments, meaning that people will automatically receive a
notification when they’re mentioned in a thread. And if you’d like, you can send
custom notifications as well.

<BlogPostQuote
  quote="Liveblocks took us from 0-100 really fast. Instead of having to micromanage all the implementation details of the collaborative functionality, we could focus more on how we wanted that to work for our customers."
  author={{
    name: "Joel Varty",
    title: "CTO at Agility CMS",
    avatarUrl: "/images/people/joel-varty.jpg",
    companyAvatarUrl: "/images/companies/avatars/agility-cms.png",
    companyName: "Agility CMS",
  }}
/>

---

### Liveblocks Realtime APIs [#realtime-apis]

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/realtime-apis-cover.jpg"
    alt=""
    width={672}
    height={378}
    quality={90}
  />
</Figure>

[Liveblocks Realtime APIs](/sync-datastore) is the foundational layer we built
the company on back in 2021. Whether you use Storage—our proprietary sync
engine—or Yjs, you can build, host, and scale any multiplayer experience with
the Liveblocks Realtime APIs.

<Slideshow
  slides={[
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/realtime-apis-spreadsheet.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/realtime-apis-yjs.jpg",
    },
    {
      width: 656,
      height: 437,
      imageUrl: "/images/blog/liveblocks-2-0/realtime-apis-whiteboard.jpg",
    },
  ]}
/>

---

## Improved pricing

Based on your feedback, we’re updating our pricing to make it easier to
understand, more predictable, and more granular based on the collaborative
features needed for your product.

- You’ll now be charged based on two main levers: monthly active users (MAU) and
  products included in your plan
- We’re reducing the price per MAU significantly
- Mix and match products to get the bundle that’s right for you
- Our Starter plan remains free up to 100 MAU

[These changes](/pricing) are effective today for people subscribing to a new
plan. For our Pro customers, they will go into effect on October 1st, 2024.
Emails with next steps for your account will be sent to account owners. And for
our Enterprise customers, existing contracts are unaffected. Please
[reach out](/contact) if you have any questions or want to discuss these
changes.

---

## Upgrade to 2.0 for a better developer experience

With 2.0, we’re not only simplifying our product offering and pricing, we are
also simplifying how you configure Liveblocks in your codebase. By removing most
of the setup friction, we are massively improving the developer experience.

It’s never been simpler to get started with Liveblocks afresh, but existing
users benefit equally because quite some boilerplate code that was previously
needed can now be removed.

```ts
// ❌ Before
const client = createClient(/* options */);

// ✅ After
<LiveblocksProvider /* options */>
  <App />
</LiveblocksProvider>
```

Using our React hooks will now feel a lot more natural: simply import and use
them. You no longer have to set up a `liveblocks.config.ts` upfront. Instead,
this can be opted into progressively if you want better type support in your
code editor. Across the board, we have vastly improved type-safety. Any custom
types you provide for your application are automatically shared between your
frontend and Node backend code.

```ts file="liveblocks.config.ts"
// ❌ Before
export const {
  suspense: {
    RoomProvider,
    useRoom,
    // etc
  },
} = createRoomContext<Presence, Storage>(client);

// ✅ After
declare global {
  interface Liveblocks {
    Presence: Presence;
    Storage: Storage;
  }
}
```

```ts file="MyComponent.tsx"
// ❌ Before: get hooks exported from your Liveblocks config
import { RoomProvider, useRoom, ... } from "./liveblocks.config";

// ✅ After: import hooks directly
import { RoomProvider, useRoom, ... } from "@liveblocks/react";
import { RoomProvider, useRoom, ... } from "@liveblocks/react/suspense";
```

Lastly we created a dedicated `@liveblocks/react-ui` package that contains all
of the pre-built React components provided by Liveblocks.

This update comes with a number of breaking changes, so we recommend following
our [Liveblocks 2.0 upgrade guide](/docs/platform/upgrading/2.0) to get started.

---

Along with this process, we’re excited to welcome Matrix as a key investor in
Liveblocks. Here is what Diana Berlin had to say.

<BlogPostQuote
  quote="As a former product leader, I’ve seen up close how hard it can be to get multiplayer experiences right. Presence, comments, notifications, and collaborative text editing are features with sky-high user expectations, but also sky-high payoff in engagement, retention, and just plain usefulness and fun. When I met the remarkable team at Liveblocks, I finally saw a way to get all of the gain of collaboration with none of the pain. Liveblocks brings every app to life."
  author={{
    name: "Diana Berlin",
    title: "Partner at Matrix",
    avatarUrl: "/images/people/diana-berlin.jpg",
    companyAvatarUrl: "/images/companies/avatars/matrix.png",
    companyName: "Matrix",
  }}
/>

Today marks a significant milestone towards our mission of becoming the
collaboration platform that powers the digital experiences we all use and love
every day. On behalf of the whole Liveblocks team, I’d like to thank our
community, customers, and investors for the continued support and trust!

<Figure>
  <Image
    src="/images/blog/liveblocks-2-0/liveblocks-team-curacao.jpg"
    alt="Thank you from the Liveblocks team"
    width={1290}
    height={860}
    quality={90}
  />
</Figure>