Shared collaborative state for Zustand

Liveblocks empowers developers to embed performant collaborative features to any product in just days.

Get started for free
Read the docs
Companies of all sizes and industries use Liveblocks

Presence with Sync -
Show who's in a document

Liveblocks Sync lets you add live avatars, cursors, and other presence to your product.

Get started for free
Learn more
import create from "zustand";import { createClient } from "@liveblocks/client";import { middleware } from "@liveblocks/zustand";
const client = createClient({ /* ... */ });
const useStore = create(  middleware(    (set) => ({      cursor: { x: 0, y: 0 },      setCursor: (cursor) => set({ cursor })    }),    {      client,      // cursor is shared to other users in the room      presenceMapping: { cursor: true }    }  ));
// Get others people in the roomconst others = useStore(state => state.liveblocks.others);
// And get their cursorsconst othersCursors = others  .map(user => user.presence?.cursor);

Sync -
The sync engine for the agentic web

Liveblocks Sync is the sync engine for the agentic web—conflict-free collaborative editing for people and AI agents, with realtime presence, persistence, and ready-made integrations.

Get started for free
Learn more
import create from "zustand";import { createClient } from "@liveblocks/client";import { middleware } from "@liveblocks/zustand";
const client = createClient({ /* ... */ });
const useStore = create( // Enhance your store and controls which parts // of your states are synced and persisted middleware(   (set) => ({     scientist: {       firstName: "Ada",       lastName: "Lovelace",     },     setScientist: (scientist) => set({ scientist })   }),   {     client,     // scientist is synced across clients     storageMapping: { scientist: true },   } ));
export default useStore;

Turn your product into the space where people and AI collaborate

Get started for free
Contact sales