Real-time updates with Server-Sent Events and polling.

Server-Sent Events (SSE)

Use data-sse to connect to an SSE endpoint:

When messages arrive, they're swapped into the element using the specified strategy.

SSE Server Example

Your server should send events in this format:

When data-sse-events is set, html★ calls source.addEventListener() for each named type, so the server can dispatch different kinds of updates over a single connection:

Without data-sse-events, only unnamed messages (plain data: lines with no event: field) are handled:

Tip: You can combine both — the default onmessage handler always fires for unnamed messages, and each entry in data-sse-events adds a named listener on top of that.

State Attributes

html★ automatically sets data attributes on elements to reflect connection state. Use these for CSS-driven status indicators:

When an SSE connection opens, data-sse-connected is added and data-sse-error is removed. On error, data-sse-error is set. For polling, data-poll-error is set whenever a fetch fails (non-OK response or network error).

Polling

For servers that don't support SSE, use polling. Add data-poll with an interval and data-href with the URL to fetch:

Supported interval formats:

A plain number without a unit suffix is treated as milliseconds. The default swap strategy for polling is inner (replacing the element's content with the response).

Closing Connections

SSE connections and polling intervals are automatically cleaned up when their elements are removed from the DOM (via a MutationObserver). You can also stop them programmatically:

SSE vs Polling: SSE is more efficient for real-time updates — the connection stays open. Polling is simpler and works with any server, but uses more bandwidth.

Warning: html★ intentionally doesn't support WebSockets. WebSocket requires a different programming model. If you need WebSocket, use a dedicated library alongside html★.