WildflowerJS Demos
Status Page
Server-rendered, adopted, live, and editable
You are the on-call operator syncing…
🛠 Scheduled maintenance Sunday 02:00–02:30 UTC.

Services

Open incidents

The first paint is the server's

Everything above was in the HTML before any JavaScript ran: the services, the incident, the notice. In production the server renders this page from current data at request time; here a small script at the bottom of the file plays that role, rendering the rows from the canonical table before the framework loads. The framework adopts that content as the query's first data (row identities ride data-seed), so there is no loading flash and nothing re-renders on startup. A catch-up sync then validates the adopted rows against the server. Because the page was rendered from current data, the validation has nothing to change; when the data does move while a page is open, the differences patch in quietly. Make a change and reload: the first paint already shows it.

Always current, always polite

The queries poll every fifteen seconds and refresh on focus and reconnect, with fresh:10 keeping tab-flicks from firing requests when the data is seconds old. Against a URL source, an etag: rung would make the polls conditional, so unchanged data costs a 304 and no body.

Edits are writes

Pick any status for a service; the current one is highlighted, and the write sends the value you chose, so two operators racing to the same choice agree. The banner recomputes instantly from the rows while the save syncs behind the gesture. Post an incident and watch its tmp- id become the server's id when the write confirms. Resolving an incident is a tombstone delete: one declared field, and the row leaves the screen before the server answers. Arm the rejection and try any of it; the exact fields you changed roll back, and nothing else moves.

Where the server is

The canonical data lives in your browser's storage with real latency simulated, and a channel message stands in for whatever tells clients about changes. In production, from and to point at your API and nothing else changes. Open this page in another window: it is a second operator on the same status page, and both pages converge.