Introducing Liveblocks 2.0

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: all the collaborative features embedded in your editor.
• Liveblocks Comments: enable feedback in your product.
• Liveblocks Notifications: the notification system designed for collaboration.
• Liveblocks Realtime APIs: build any realtime collaborative experience.

Liveblocks Text Editor

To start things off, we’re introducing a brand new beta product: Liveblocks 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.

Previous

Show slide 1Show slide 2Show slide 3Show slide 4Show slide 5

Next

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 if there is a text editor framework you’d like to be supported.

Liveblocks Comments

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

Previous

Show slide 1Show slide 2Show slide 3Show slide 4Show slide 5

Next

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.

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

Luke ThomasDirector of New Products at Zapier

Liveblocks Notifications

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

Previous

Show slide 1Show slide 2Show slide 3

Next

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.

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

Joel VartyCTO at Agility CMS

Liveblocks Realtime APIs

Liveblocks Realtime APIs 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.

Previous

Show slide 1Show slide 2Show slide 3

Next

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

// ❌ Beforeconst 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.

// ❌ Beforeexport const {  suspense: {    RoomProvider,    useRoom,    // etc  },} = createRoomContext<Presence, Storage>(client);
// ✅ Afterdeclare global {  interface Liveblocks {    Presence: Presence;    Storage: Storage;  }}

// ❌ Before: get hooks exported from your Liveblocks configimport { RoomProvider, useRoom, ... } from "./liveblocks.config";
// ✅ After: import hooks directlyimport { 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 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.

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

Diana BerlinPartner at 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!