Liveblocks Presence Config Builder

Liveblocks is a real-time collaboration infrastructure for building multiplayer features. It provides presence (who is online and what are they doing), storage (shared state via CRDT data structures), and broadcasting — all with React hooks and TypeScript support. Common use cases include collaborative document editors, live cursors, shared whiteboards, and multi-user dashboards.

Presence is ephemeral per-user state that is broadcast to all other users in the room in real-time. It's ideal for cursor positions, user focus states, active selections, or typing indicators. Presence data is not persisted — when a user leaves the room, their presence disappears. Access it with useMyPresence() to set your own and useOthers() to read other users' presence.

Presence is ephemeral and per-user — each user has their own presence object that others can read. Storage is shared persistent state using CRDT data structures (LiveObject, LiveList, LiveMap) that multiple users can edit simultaneously without conflicts. Use Presence for cursors and real-time feedback; use Storage for the actual document content that needs to persist between sessions.

The throttle option (in milliseconds) limits how frequently presence updates are sent to other users. Lower values (16ms) mean near-real-time updates but more bandwidth usage. Higher values (100ms+) reduce bandwidth but make movements appear less smooth. For cursor tracking, 16-50ms is typical. For typing indicators, 100-200ms is sufficient. Default is 100ms.

LiveObject is a CRDT map where each key can be independently edited — similar to a shared JavaScript object. Best for document-like data. LiveList is an ordered list of items that handles concurrent insertions gracefully — good for comment threads. LiveMap is a key-value store where keys can be added/removed independently — good for collections of named items. All three handle concurrent edits without conflicts using operational transforms.

Create an API endpoint (e.g. /api/liveblocks-auth) that uses @liveblocks/node to issue room access tokens. Use liveblocks.prepareSession(userId) then session.allow(roomId, session.FULL_ACCESS) to grant access, and return session.authorize(). Pass your endpoint URL as authEndpoint in createClient(). For public rooms (no auth), use publicApiKey in createClient() instead.