Presence

Make people feel like they’re in the same room

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

Designed for developers

Add real‑time presence to your product in minutes

Liveblocks integrates directly with popular frameworks and state‑management libraries, making it easy to add real‑time presence to any online experience.

User A
Move your cursor
User B
Move your cursor
import {  useOthers,  useUpdateMyPresence} from "./liveblocks.config";
// Pass this to RoomProviderconst initialPresence = { cursor: { x: 0, y: 0 } };
export default function Presence() { const updateMyPresence = useUpdateMyPresence(); const others = useOthers(); // On client A: [{"cursor":null}] // On client B: [{"cursor":null}]
return ( <div onPointerMove={(event) => { updateMyPresence({ cursor: { x: event.clientX, y: event.clientY, }, }) }} > {others.map(({ connectionId, presence }) => { return ( <Cursor key={connectionId} cursor={presence.cursor} /> ) })} </div> )}

Start making your product collaborative with the Liveblocks toolkit today