Presence block

Presenceblock

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

Designed for developersAdd 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import {
useOthers,
useUpdateMyPresence
} from "@liveblocks/react";
// Pass this to RoomProvider
const 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>
)
}

Packed with featuresEverything you need to make any product multiplayer

Focus on your core product. Liveblocks APIs are carefully crafted to enable you to create world-class multiplayer experiences in minutes, not months.

Tim
Ellen

Customer story

Clover is a productivity tool that helps people take notes and whiteboard in one unified solution. Liveblocks enabled them to add real‑time presence to their application in hours instead of weeks.

Read customer story

More than just presenceYour end-to-end real‑time collaboration solution

Liveblocks is a set of APIs and tools that helps you create performant and reliable multiplayer experiences in minutes. Storage and analytics blocks are also included.