Zustand

Shared collaborative state for Zustand

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

Sign up for free
Read the docs

Companies of all sizes and industries use Liveblocks

Presence

Show who’s in a document

Add presence features to your product to make people feel like they’re together in the same room.

Sign up 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);

Conflict‑free data types

Shared real‑time document state

Use conflict‑free data types to enable people to edit the same document in real‑time.

Sign up 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;

Start shipping faster with Liveblocks fully hosted collaboration toolkit

Sign up for free