Live Cursors / Presence

Remote cursor with a name tag (and optional live chat bubble). Position is in px within the container.

Import

import { Cursor, PresenceAvatars, LiveCursorsDemo } from '@marbleui/ui'

Props

<Cursor>

Prop	Type	Default	Description
peer *required	`Peer`	`—`

<PresenceAvatars>

Presence stack for the toolbar.

Prop	Type	Default	Description
peers *required	`Peer[]`	`—`

<LiveCursorsDemo>

Demo canvas with simulated collaborators wandering around; pass real peers from your realtime layer instead.

Prop	Type	Default	Description
children	`ReactNode`	`—`
className	`string`	`—`

Usage notes

Cursor and PresenceAvatars show collaborators’ pointers and who’s here; LiveCursorsDemo fakes them. Real positions must come from your realtime layer.

<div className="relative h-96">
  <ArtboardView />
  {peers.map((p) => <Cursor key={p.id} peer={p} />)}
</div>
<PresenceAvatars peers={peers} />

Simulated: LiveCursorsDemo invents three peers and moves them at random every 1.3 s (they stay put under reduced motion). Use it for previews only.
Your app provides the rest: tracking the local pointer, sending it to others, and keeping the Peer[] list (id, name, color, x, y, optional message). Nothing here opens a connection.
x/y are px from the top-left of the nearest positioned ancestor, so make the container relative and convert between screen sizes yourself (for example, send fractions and scale).
Cursors are aria-hidden; PresenceAvatars reads as “3 people here: …” and shows initials only. message swaps a cursor’s name tag for a chat bubble.

Example source · show

import { LiveCursorsDemo } from './live-cursors'

export const styles = { Default: () => <LiveCursorsDemo className="w-[30rem]"><div className="absolute top-10 left-10 h-24 w-48 rounded-lg border border-border bg-surface-muted" /><div className="absolute top-40 left-56 h-20 w-40 rounded-lg border border-border bg-surface-muted" /></LiveCursorsDemo> }

Source: packages/ui/src/live-cursors/live-cursors.tsx

Catalog

Category: editor
Priority: Extra
Primitive: custom