UX Patterns Guide
UI + UX Collaboration And Social Interaction established

Live cursors

Provide live cursor and selection overlays with identity, color, accessible labels, coordinate anchoring, opt-in or visibility controls, cursor-chat limits, stale and disconnected states, permission boundaries, and clear separation from comments, mentions, notifications, and logs.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Collaborators need real-time spatial awareness in a shared visual or text surface.
  • People need to point, follow, teach, present, co-edit, or avoid editing collisions during a live session.
  • The product can keep cursor data ephemeral, fresh, permission-aware, and unobtrusive.
  • Users can control pointer visibility and reduce visual noise.

Avoid when

  • The collaboration is asynchronous and durable comments or annotations would be more useful.
  • The product cannot reliably transform, refresh, or permission-filter cursor locations.
  • Showing pointer location would reveal sensitive activity, private regions, or unwanted surveillance signals.
  • The surface is too dense or small to support cursor overlays without blocking primary work.

Problem it prevents

Real-time collaboration becomes disorienting when people cannot tell where others are pointing, or overwhelming when remote cursors are unlabeled, stale, noisy, privacy-leaking, or mistaken for durable comments and audit evidence.

Pattern anatomy

What a strong implementation has to make clear

User need

Users are co-editing a document, design canvas, slide, diagram, whiteboard, code editor, map, media timeline, spreadsheet, or shared object where spatial attention matters.

Pattern promise

Provide live cursor and selection overlays with identity, color, accessible labels, coordinate anchoring, opt-in or visibility controls, cursor-chat limits, stale and disconnected states, permission boundaries, and clear separation from comments, mentions, notifications, and logs.

Required state

Local pointer visible, local pointer hidden, remote pointer visible, remote pointer hidden, and reduced-cursor mode.

Recovery path

Cursor overlays are offset after zoom, scroll, pan, or resize.

Access contract

Provide text labels for cursor owner, role, and state rather than color-only cursor identity.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A whiteboard shows Priya's pointer with a labelled color chip, Dana's text selection range, a stale cursor fading after reconnect loss, and a toggle to hide your pointer.
  • A slide editor shows live pointers only while collaborators choose to share them, with a follow-person control and cursor chat that expires after the quick exchange.
  • A presenter enables live pointers during a design review, follows Dana's cursor to a problem area, then hides extra cursors while editing text.
  • A collaborator loses connection, their cursor becomes stale with last-updated text, and the app stops showing it as active until awareness resumes.
Weak implementation

Vague, hidden, hard to recover from

  • Remote cursors are unlabeled colored arrows that overlap form controls and stay frozen after users leave.
  • Cursor chat looks like a permanent comment even though it is not anchored, timestamped, or retrievable.
  • A user is trying to edit a small control while five cursor labels cover the target and there is no reduce-cursors mode.
  • A live cursor exposes that an external viewer is hovering over a restricted section they should not be able to see.
UI guidance
  • Render live cursors as lightweight overlays tied to the shared coordinate system, with person label, color, shape, current object or selection, recency, and stale or hidden state that does not obscure primary content.
  • Provide controls for showing or hiding the user's pointer, reducing other users' cursor noise, following a collaborator, pinning cursor chat, and distinguishing pointer, text cursor, selection range, viewport, and temporary cursor-attached message states.
UX guidance
  • Use live cursors when collaborators need immediate spatial awareness of where other people are pointing, selecting, hovering, typing, or presenting in the same shared surface.
  • Treat cursor data as ephemeral awareness rather than durable communication; add freshness, permissions, visibility controls, and fallbacks for lag, disconnects, privacy boundaries, and assistive technology.
Implementation contract

What the implementation must handle

States

  • Local pointer visible, local pointer hidden, remote pointer visible, remote pointer hidden, and reduced-cursor mode.
  • Remote text caret, remote selection range, selected object, hover target, viewport-follow, and presentation pointer states.
  • Cursor label, avatar, color, name, role, anonymous user, external guest, and duplicate-name states.
  • Fresh, delayed, stale, disconnected, reconnecting, permission-hidden, and out-of-viewport cursor states.

Interaction

  • Sending cursor data updates ephemeral awareness state with coordinate, target, viewport, selection, identity, color, timestamp, and visibility preference, not the saved document content.
  • Remote cursors are anchored to the same transformed coordinate space as the shared content and remain accurate across scroll, zoom, pan, resize, and object transforms.
  • Cursor overlays avoid blocking primary controls; users can hide their own pointer, reduce other pointers, or follow one collaborator without losing editing focus.
  • Stale cursors fade, label themselves stale, or disappear according to a clear timeout instead of freezing as if live.

Accessibility

  • Provide text labels for cursor owner, role, and state rather than color-only cursor identity.
  • Expose a concise collaborator-location summary for screen-reader users, such as Dana selecting headline text.
  • Avoid announcing every pointer movement; announce only meaningful events such as collaborator joined, selected object, stale, or requested attention.
  • Support keyboard access to follow, stop following, hide cursors, reduce cursor noise, and convert cursor chat to a durable comment.

Review

  • What shared coordinate system anchors each remote cursor?
  • Can users identify each cursor without relying only on color?
  • What happens when cursor data is delayed, stale, disconnected, or out of viewport?
  • Can users hide their own cursor or reduce other cursor overlays?
Interactive lab

Inspect the states before you copy the pattern

Follow collaborators on a shared canvas

Show remote pointer, text caret, object selection, cursor chat, follow collaborator, hide my pointer, reduce cursor noise, inspect stale, disconnected, privacy-hidden, and transformed-canvas states, then compare frozen cursor, unlabeled color, overlay-blocking, privacy leak, history noise, and offset cursor failures.

Live cursors
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Local pointer visible, local pointer hidden, remote pointer visible, remote pointer hidden, and reduced-cursor mode.

Keyboard / Access

Keyboard users can toggle show my pointer, reduce others, follow collaborator, stop following, and open collaborator location summaries.

Avoid Generating

Using live cursors as durable comments, decision records, or audit history.
Evidence trail

Source-backed claims behind this guidance

Liveblocks tutorial: Using presence

Liveblocks - checked

Liveblocks documents presence values such as cursor objects and displaying current and other users' presence in collaborative rooms.

Yjs Docs: Awareness and presence

Yjs Docs - checked

Yjs documents awareness data such as presence, cursor locations, user names, and colors as ephemeral collaboration metadata.

Yjs Docs: Awareness API

Yjs Docs - checked

Yjs awareness API documents user status, cursor location, username, and email address as network-agnostic CRDT state.

Tiptap Docs: Awareness in Collaboration

Tiptap - checked

Tiptap documents awareness as real-time user activity information including presence, cursor positions, and custom user states without historical records.

Full agent/debug reference

Problem Context

  • Users are co-editing a document, design canvas, slide, diagram, whiteboard, code editor, map, media timeline, spreadsheet, or shared object where spatial attention matters.
  • Remote signals may include mouse pointer, touch pointer, text caret, selected object, selection range, viewport focus, temporary cursor chat, and follow-mode target.
  • Cursor data changes quickly, may lag or drop during network issues, and should usually remain outside durable document history.
  • The surface may have many collaborators, anonymous viewers, external guests, private regions, presentation mode, mobile touch input, or assistive technology users.

Selection Rules

  • Choose live cursors when users need immediate spatial awareness of other collaborators' current pointer, caret, selection, viewport, or focus inside the same shared surface.
  • Use presence when the user only needs to know who is available, online, viewing, away, or recently active, not exactly where they are pointing.
  • Use comments when feedback must persist on a region, line, object, or document with author, timestamp, replies, resolution, and moderation state.
  • Use mentions when the user needs to call attention to a person or group inside authored content.
  • Use notification center when collaboration events need retained inbox triage; do not notify on ordinary cursor motion.
  • Use activity log when a durable event must be recorded; do not treat raw cursor paths as history unless the product explicitly records a session.
  • Use sync state and offline state for transport freshness, reconnecting, failed awareness updates, and stale cursor fallbacks.
  • Use tooltip only for static help; live cursor labels and cursor chat need identity, motion, recency, and visibility behavior.

Required States

  • Local pointer visible, local pointer hidden, remote pointer visible, remote pointer hidden, and reduced-cursor mode.
  • Remote text caret, remote selection range, selected object, hover target, viewport-follow, and presentation pointer states.
  • Cursor label, avatar, color, name, role, anonymous user, external guest, and duplicate-name states.
  • Fresh, delayed, stale, disconnected, reconnecting, permission-hidden, and out-of-viewport cursor states.
  • Cursor chat open, typing, sent, expired, dismissed, pinned temporarily, and converted-to-comment states where supported.
  • Many collaborators, overlapping cursors, mobile touch pointer, high zoom, low zoom, transformed canvas, and scrolled document states.
  • Follow collaborator, stop following, jump to cursor, reveal location, and do-not-follow-presenter states.
  • Screen-reader summary, keyboard focus equivalent, privacy-hidden section, and reduced-motion states.

Interaction Contract

  • Sending cursor data updates ephemeral awareness state with coordinate, target, viewport, selection, identity, color, timestamp, and visibility preference, not the saved document content.
  • Remote cursors are anchored to the same transformed coordinate space as the shared content and remain accurate across scroll, zoom, pan, resize, and object transforms.
  • Cursor overlays avoid blocking primary controls; users can hide their own pointer, reduce other pointers, or follow one collaborator without losing editing focus.
  • Stale cursors fade, label themselves stale, or disappear according to a clear timeout instead of freezing as if live.
  • Permission and privacy rules filter cursor location, object names, private regions, anonymous viewer identity, and external collaborator details before broadcasting.
  • Cursor chat remains temporary unless the user deliberately converts it to a comment, task, or other durable artifact.
  • Assistive technologies receive concise collaborator-location summaries and change announcements without a noisy stream of every pointer movement.

Implementation Checklist

  • Define awareness payloads for pointer coordinates, text caret, selection range, user identity, color, timestamp, viewport, target object, visibility preference, and privacy scope.
  • Map cursor coordinates through scroll, zoom, pan, transforms, responsive layouts, and canvas scale before rendering remote overlays.
  • Design cursor labels, colors, avatars, stale states, hidden states, follow mode, cursor chat, collision behavior, and reduced-cursor controls.
  • Throttle and debounce pointer updates so motion feels live without flooding the network, history, notifications, or assistive announcements.
  • Respect permissions for private objects, external guests, anonymous viewers, hidden pointers, view-only mode, and restricted canvas regions.
  • Test many collaborators, high zoom, mobile touch, keyboard-only editing, screen reader summaries, reconnects, stale state, out-of-viewport cursors, and cursor-chat expiry.

Common Generated-UI Mistakes

  • Using live cursors as durable comments, decision records, or audit history.
  • Leaving stale cursor arrows frozen after users disconnect.
  • Rendering cursor labels that cover the object users are trying to edit.
  • Relying only on color to identify collaborators.
  • Broadcasting cursor position in private or permission-limited regions.
  • Triggering notifications or feed items for ordinary pointer motion.
  • Showing every collaborator cursor in dense sessions with no reduce, hide, or follow controls.
  • Failing to transform cursor position correctly when the canvas is zoomed, panned, or scrolled.

Critique Questions

  • What shared coordinate system anchors each remote cursor?
  • Can users identify each cursor without relying only on color?
  • What happens when cursor data is delayed, stale, disconnected, or out of viewport?
  • Can users hide their own cursor or reduce other cursor overlays?
  • Are private regions, anonymous users, and external guests filtered before cursor location is shared?
  • Does cursor chat expire or convert deliberately into a durable comment?
  • How do keyboard and screen-reader users learn where collaborators are working?
Accessibility
  • Provide text labels for cursor owner, role, and state rather than color-only cursor identity.
  • Expose a concise collaborator-location summary for screen-reader users, such as Dana selecting headline text.
  • Avoid announcing every pointer movement; announce only meaningful events such as collaborator joined, selected object, stale, or requested attention.
  • Support keyboard access to follow, stop following, hide cursors, reduce cursor noise, and convert cursor chat to a durable comment.
  • Respect reduced motion and avoid cursor animations that distract from editing or cause motion sensitivity.
  • Ensure cursor labels and chat bubbles do not cover focused controls, text insertion points, or selected content.
Keyboard Behavior
  • Keyboard users can toggle show my pointer, reduce others, follow collaborator, stop following, and open collaborator location summaries.
  • Focus remains in the editor or canvas while remote cursor updates render.
  • Jump to collaborator moves viewport intentionally and announces the new location or selected object.
  • Escape closes cursor chat or collaborator detail without hiding all awareness state.
  • Tab order includes cursor visibility controls only when they are actionable, not every moving cursor.
  • Screen-reader summaries update at a controlled cadence instead of following pointer movement frame by frame.
Variants
  • Mouse cursor
  • Touch pointer
  • Text caret
  • Selection range
  • Object selection halo
  • Viewport following
  • Presenter pointer
  • Cursor chat
  • Anonymous live pointer
  • Reduced cursor mode

Verification

Last verified: