What’s new in Liveblocks: June edition
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.
![Picture of Chris Nicholas](/_next/image?url=%2Fimages%2Fpeople%2Fchris-nicholas.jpg&w=96&q=75)
![What’s new in Liveblocks: June edition](/_next/image?url=%2Fimages%2Fblog%2Fupdates%2Fjune-2024.jpg&w=2048&q=90)
This June we released Liveblocks 2.0, text editor packages, and plenty of content:
- Liveblocks 2.0: The platform for adding collaboration in days, not months.
- Lexical packages: Text Editor packages enabling collaboration & server edits.
- New examples: Get started with Lexical and custom notifications.
- New hooks: Delete threads and display Storage synchronization indicators.
- Figma kit: Interactive components for designing your product in Figma.
Liveblocks 2.0
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.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-2-0%2Fliveblocks-2-0.jpg&w=1920&q=90)
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.
TypeScript improvements
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.
Tutorial rewrite
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.
Upgrade guide
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.
Lexical packages
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.
New examples
We’ve released two new examples in June, for Text Editor and Notifications, and you can try live demos of both below.
Lexical text editor
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.
Custom notifications
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.
New hooks
In Liveblocks 2.1 we released two new hooks, one for Comments and one for Storage.
useDeleteThread
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.
useStorageStatus
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.
Figma kit
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.
![](/_next/image?url=%2Fimages%2Fblog%2Fliveblocks-collaboration-kit-for-figma%2Fliveblocks-collaboration-kit-for-figma.jpg&w=1920&q=90)
Learn more in our blog post which introduces the Liveblocks Collaboration Kit.
More information
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
12 authors