Post

Liveblocks Sync is the sync engine designed for the agentic web. Add conflict-resolved multiplayer to any React app, so that humans and agents can edit the same state, at the same time. lblcks.io/sync Here's how it works ↓

Storage is the main building block, a primitive for storing multiplayer state. It comes with conflict-free data types such as `LiveObject`, which is similar to a JS object that multiple users can edit simultaneously For example, here's how a slideshow app might be constructed.

In React, you can read and edit Storage values with two hooks. 1. `useStorage`: Return a plain JSON representation of your data. 2. `useMutation`: Edit your data with live structures. Combining these allows you to, for example, render your slides, and add a "New slide" button.

Another feature is presence. Connected users can show their activity, like with cursors, selections around elements, or an avatar in a stack.

`useOthers` allows you to show other users presence in real-time, for example this is how to create a live avatar stack.

More complex presence need `useUpdateMyPresence`, allowing you to attach live JSON values to users. For example, you can add an outline to a `textarea`, when a user selects it, by giving each user a `selection: string | null` value, representing the box they're editing.

Agents can collaborate too, using server-side methods like `mutateStorage`. Trigger these from chats, buttons, comments, or wherever you choose. AI can show its presence too, as it makes changes, and it'll appear in `useOthers`.

For example, with a spreadsheet, you might generate a new cell value, and then apply it to the document. Running the following code will update the spreadsheet in real-time for all connected users.

Feeds allows you to create paginated streams of data, ideal for creating multiplayer chats, storing workflow data, or sharing an agent's status in your UI.

Here's one way to hook `useFeedMessages` into a chat app. You can quite easily do it with any existing UI library.

On the server, you can create a new feed message, then render in each chunk as it's generated. In React, you'll see the message stream in for all connected users in real-time. Refresh the page whilst streaming, and it'll all still work.

Your Storage data comes with version history, allowing you to revert documents to their previous state. I'd recommend creating a new snapshot before applying changes made by AI, but you can also set it up to periodically save state.

Additionally, Storage comes with ready-made undo and redo hooks, making it trivial to undo changes. Crucially, pressing undo only reverts your own changes, and not changes made by others.

Permissions are built in, allowing you to control which users, and groups of users, should have access to the document. Use REST APIs to create share dialogs like you'd find in Notion or Google Docs.

And speaking of Google Docs, you can enable real-time text editing too. There's two ways to do this, Yjs, and LiveText, both with their advantages. In a few lines of code, add it to your editor, such as Tiptap or BlockNote.

Code editors are supported too! For example, here's the popular CodeMirror editor.