What's new in Liveblocks: June 2024

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.

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.

// ❌ Beforeconst client = createClient(/* options */);
// ✅ After<LiveblocksProvider /* options */>  <App /></LiveblocksProvider>;

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.

// ❌ 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";

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.

export function Editor() {  return (    <LexicalComposer initialConfig={initialConfig}>      <RichTextPlugin contentEditable={<ContentEditable />} />      <LiveblocksPlugin>        <FloatingComposer className="floating-composer" />      </LiveblocksPlugin>    </LexicalComposer>  );}

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.

await withLexicalDocument(  { roomId: "my-room-id", client: liveblocks },  async (doc) => {    await doc.update(() => {      // Adding a "hello world" paragraph to your editor      const root = $getRoot();      const paragraphNode = $createParagraphNode();      paragraphNode.append($createTextNode("Hello world"));      root.append(paragraphNode);    });  });

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.

function DeleteThread({ thread }) {  const deleteThread = useDeleteThread();
  return (    <button onClick={() => deleteThread(thread.id)}>🗑️ Delete thread</button>  );}

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.

function StatusBadge() {  const status = useStorageStatus();
  return <div>{status === "synchronized" ? "✅ Saved" : "🔄 Saving..."}</div>;}

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.

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

Contributors include:

12 authors