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.

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.