Live Edit Presence — Free HTML CSS JS Card Snippet

Tools like Notion, Google Docs, and Figma all share a small but instantly recognizable UI moment: a block of content briefly flashes a colored highlight the instant a collaborator edits it, with a small name label appearing to identify who did it, before both fade away and leave the content looking normal again. That moment does real communicative work — without it, simultaneous editing feels invisible and confusing; with it, every teammate's presence becomes legible at a glance. This snippet recreates that exact interaction on a static card using nothing but setTimeout scheduling, CSS custom properties, and two independently-timed fade transitions, standing in for what a real product would drive from WebSocket or CRDT change events.

Per-collaborator color assignment: a small fixed palette keyed by user id

The COLLABORATORS array is the entire identity system: four objects, each with an id, display name, avatar initial, and a matching pair of colors — a soft background tint (bg) and a saturated border/badge color (border). Critically, these colors are assigned once, per person, not generated randomly per edit. This mirrors how real collaboration tools work: your cursor and highlights are always the same shade of blue (or pink, or green) no matter which document you are in or which block you touch, because the color is a stable property of your user id, not a property of the current action. Here that stability comes from simply reading a fixed array entry; in a production app the same idea scales to hashing a user id into an index in a fixed palette array, guaranteeing the same person always maps to the same color even across sessions without needing to persist a color choice anywhere.

Applying color per-block with CSS custom properties

Rather than generating a new CSS class for every possible collaborator/block combination, each block element receives two inline custom properties at edit time — element.style.setProperty('--hl-bg', collaborator.bg) and --hl-border — which the stylesheet's .block.highlight rule simply references via var(--hl-bg) and var(--hl-border). This means the CSS only has to define the highlight and border-left treatment once, and any of the four (or four hundred) possible collaborator colors can be applied to any block just by setting two custom properties before toggling the .highlight class, keeping styling and identity cleanly separated.

The two-stage fade: why the label disappears before the highlight does

This is the detail that makes the effect read as polished rather than jarring. Two separate setTimeout calls are scheduled from the same triggerEdit() call: one at AVATAR_VISIBLE_MS (1800ms) removes the .show class from the presence tag, fading out just the little name badge, while a second, longer timeout at HIGHLIGHT_VISIBLE_MS (2600ms) removes the .highlight class from the block itself, fading the background tint back to transparent. If both faded on the same timer, the highlight would vanish at the exact moment attention was still on the name label, making the "who did this" information feel like it was snatched away. Staggering them lets the reader register who made the edit first, then gives the background tint extra time to visually fade on its own, mimicking the way Notion's own highlight lingers slightly after the little avatar toast disappears.

Staggered scheduling instead of a fixed interval

Rather than a single setInterval firing edits at a constant, predictable cadence, scheduleNextEdit() recursively calls itself with a new random delay between 1800ms and 4400ms each time, chosen fresh on every call via 1800 + Math.random() * 2600. This recursive-setTimeout pattern (sometimes called a "self-adjusting timer") produces a much more organic, bursty rhythm that reads as several independent people typing at their own pace, rather than the mechanically even cadence a fixed setInterval would produce — and because each call schedules only the next single edit, it is trivial to change the delay range or pause scheduling entirely without clearing and resetting a recurring interval.