We've released Liveblocks 2.0 and our new core products, one of which includes new text editor packages for Lexical. We've also added some new React hooks, and created lots of new content.
Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.
This June we released Liveblocks 2.0, text editor packages, and plenty of content:
Liveblocks 2.0 marked the release of our four core products, each enabling a different aspect of collaboration: Comments, Notifications, Text Editor, and Realtime APIs.
You can learn all about our new products in our Introducing Liveblocks 2.0 blog post, and if you’d like more technical information, make sure to read the Products section in our documentation.
A large part of the new update is the TypeScript improvements, which makes
handling types easier than before. In Liveblocks 2.0 you now define a
<LiveblocksProvider>, instead of creating a client.
You then define your types in your config file, and import the hooks from our package. These types are automatically shared across all Liveblocks packages, even on Node.js, not just the React package.
We have a full interactive tutorial that teaches you the concepts behind setting up your collaborative React application, and we’ve just rewritten it to support Liveblocks 2.0.
Each page guides you through a different facet of setting up your app, and using basic Liveblocks features. Get started with our interactive tutorial now.
We’ve also made a number of other changes too, such as renaming packages, and APIs. To get Liveblocks 2.0, make sure to read our upgrade guide.
As part of our new Text Editor product, we’ve released new packages for
Lexical. The first package,
@liveblocks/react-lexical,
allows you to easily create, or convert your existing Lexical editor, into a
collaborative text editor with real-time editing, mentions, comments, and
notifications.
The second package,
@liveblocks/node-lexical,
allows you to connect to the editor from the server, and make changes in
real-time, for example adding a new paragraph.
This API mirrors the client API for Lexical, and all changes occur in real-time.
We’ve released two new examples in June, for Text Editor and Notifications, and you can try live demos of both below.
Our new Next.js Lexical example shows you how to set up a collaborative rich-text editor with inline mentions, comments and notifications, powered by Liveblocks.
This example uses our Text Editor package for Lexical, which we released as part of Liveblocks 2.0.
Our new Next.js custom notifications example guides you through triggering custom notifications on the server, before rendering custom React components to match.
This example uses our Notifications product.
In Liveblocks 2.1 we released two new hooks, one for Comments and one for Storage.
The new
useDeleteThread
hook can be used to delete a thread and all its associated comments.
Only the creator of the thread can call the function.
The
useStorageStatus
is a hook that returns whether local Storage changes have been synchronized or
not. This is helpful for building a status badge in your application, that tells
users if their changes have been saved or not.
We’ll soon be enabling a similar UI pattern in our Text Editor package for Lexical.
We recently released the Liveblocks Collaboration Kit for Figma, a set of UI elements to help you visualize what a collaborative version of your product would look like.
Learn more in our blog post which introduces the Liveblocks Collaboration Kit.
This post is a summary of June’s changes, make sure to read our Changelog to learn about every change we’ve made, no matter how minor.
Contributors include:
12 authors
