Shared collaborative state for Zustand

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

Start building for free
Read the docs
Companies of all sizes and industries use Liveblocks
Liveblocks Presence

Show who’s in a document

Liveblocks Presence enables you to add things like live avatars and cursors to you product.

Start building 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);
Liveblocks Storage

Sync engine for creative tools

Liveblocks Storage is a realtime sync engine designed for multiplayer creative tools such as Figma, Pitch, and Spline.

Start building 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;

Add collaboration to your product today

Start building for free