Skip to content
Syndra

Core concepts

Presence

Show who's online, where they're looking and what they're doing.

On this page

Presence is per-client state that lives as long as the connection does. Use it for avatars, live cursors and selection highlights.

ts
const presence = doc.presence<{ name: string; cursor?: { x: number; y: number } }>();

presence.set({ name: 'Ada' });

addEventListener('pointermove', (e) => {
  presence.patch({ cursor: { x: e.clientX, y: e.clientY } });
});

Observing others

ts
presence.subscribe((peers) => {
  avatars.render(peers.map((p) => p.state.name));
});

Each peer includes a stable clientId, a userId when the client is authenticated, and a lastActive timestamp.

Throttling

Presence updates are coalesced to 30 per second by default. High-frequency data like cursors stays smooth without flooding the network.

ts
const presence = doc.presence({
  // Send at most 60 updates per second
  throttle: 1000 / 60,
});