Core concepts

playhtml gives a page four kinds of shared state. Some stay attached to a specific element, some belong to the page as a whole; some are saved forever, some are live only while people are here. Everyone visiting the same url shares one room, so whichever kind you reach for, it shows up for everyone else too.

A page running playhtml with four kinds of shared state called out: element data bound to a specific element, page data read by name anywhere on the page, live presence cursors, and one-off events. Element and page data persist; presence and events are ephemeral. Faded pages behind show that everyone on the same url shares one room.

Once you can reach for the right one, everything else is just attribute names.

Element data (defaultData / can-play): persistent state scoped to a single DOM element. A toggle’s on/off, a draggable’s position, a shared count. Survives reload. See data essentials for shape, updates, and cleanup.
Page data (playhtml.createPageData): persistent state keyed by a name, not tied to any element. A page-level counter, a shared prompt, an open vote. See page-level data.
Presence (playhtml.presence / cursor awareness): ephemeral per-user state: “who’s online”, “who’s typing”, “where’s my cursor”. Disappears when users disconnect. See presence and cursors.
Events (playhtml.dispatchPlayEvent): one-off broadcasts with no persisted state. Confetti, chimes, notifications. See events.

Not sure which one you want? The decision table on data essentials lays out the tradeoffs side by side.