Live Presence Bar
Realtime presence strip with stacked avatars, status dots for editing and viewing states, and a plus-overflow count.
Realtime presence strip with stacked avatars, status dots for editing and viewing states, and a plus-overflow count.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Live Presence Bar is the realtime collaboration header strip for a shared surface, showing Q3 roadmap and the subtitle Last edited by Avery Stone just now, alongside five stacked avatars (Avery Stone, Priya Nair, Maya Chen, Jordan Lee, Daniel Ross) each with a status dot: a filled dot for Editing, a dimmed dot for Idle, a mid-weight dot for Viewing. A plus-three overflow badge accounts for Noah Park, Hana Kim, and Omar Haddad without crowding the rail. A name list beside the stack breaks down the top three with their status inline.
Viewers are one array from ui/avatars; overflow is a second array holding the remaining avatars for the count. Status dot weight is the only visual signal for editing versus viewing versus idle, no colors, no labels in the stack.
Reach for this block at the top of any collaboratively edited page or document, wired to your presence WebSocket or polling endpoint. Presence is updated every 10 seconds and drops users after 30 seconds of inactivity.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document co-editing header. Other presence bars:
Tip: the overflow badge must show the count, not just a plus sign, so users know the room size at a glance.