Collaborative documents


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



Make your users feel like they’re in the same room

Enable people to experience the same level of engagement as if they were in the same room with each other.

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, }, }) }} > {{ connectionId, presence }) => { return ( <Cursor key={connectionId} cursor={presence.cursor} /> ) })} </div> )}

Start shipping faster with Liveblocks fully hosted collaboration toolkit