Today, I'm thrilled to introduce Liveblocks 2.0, the platform for adding collaborative editing, comments, and notifications into your application in days, not months.
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.
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:
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.
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.
After nearly a year in beta, Liveblocks Comments is now officially
generally available, enabling you to quickly add a commenting system to your
product.
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.”
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.
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.”
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.
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.
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.
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.
// ❌ 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!