Introducing Liveblocks 2.0
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.
![Picture of Steven Fabre](/_next/image?url=%2Fimages%2Fpeople%2Fsteven-fabre.jpg&w=96&q=75)
![Introducing Liveblocks 2.0](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fliveblocks-2-0.jpg&w=2048&q=90)
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
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor-cover.jpg&w=1920&q=90)
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.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor-comments.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor-mention.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor-notifications.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Ftext-editor-AI.jpg&w=1920&q=75)
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
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-cover.jpg&w=1920&q=90)
After nearly a year in beta, Liveblocks Comments is now officially generally available, enabling you to quickly add a commenting system to your product.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-video-editor.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-website.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-AI.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-audio-player.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-text-editor.jpg&w=1920&q=75)
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
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fcomments-code-snippet.jpg&w=1920&q=90)
Liveblocks Notifications
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fnotifications-cover.jpg&w=1920&q=90)
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.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fnotifications-UI.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fnotifications-custom-UI.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fnotifications-email.jpg&w=1920&q=75)
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
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Frealtime-apis-cover.jpg&w=1920&q=90)
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.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Frealtime-apis-spreadsheet.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Frealtime-apis-yjs.jpg&w=1920&q=75)
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Frealtime-apis-whiteboard.jpg&w=1920&q=75)
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
Before | After | |
---|---|---|
Starting price | $99/month | $30/month |
Price per monthly active user | $0.40 | $0.03-0.28 |
Per-product pricing | No | Yes |
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.
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.
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!
![Thank you from the Liveblocks team](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fliveblocks-team-curacao.jpg&w=3840&q=90)