WildflowerJS Demos
Mission Control: SSR + data-query (record, list, append, tombstones) + data-pool + Stores, Pure DOM, Zero Chart Dependencies
Mission Control
teal border = SSR-adopted + live data-query --:--:-- FPS: -- Entities: --
Record-shape data-query. This value was server-rendered as display text ($1.3M) while the machine number (revenue: 1284500) rode the data-seed attribute and was adopted as data — no state blob, no hydration re-render. Every 1.5s the simulated backend mutates and invalidate() re-syncs the record in place.
Revenue
$1.3M
+12.5%
Record-shape data-query. Server-rendered "8,472" is display truth; orderCount: 8472 in data-seed is machine truth, adopted at load so derived figures compute from real numbers before any fetch. The backend re-syncs via invalidate().
Orders
8,472
+8.2%
Record-shape data-query, adopted from server-rendered markup via data-ssr. The first fetch is a stale refresh of content you can already read; isLoading never fires because seeded rows are data.
Avg Latency
142ms
-3.1%
Record-shape data-query. One query feeds all six KPI cards: they bind component computeds that format the single adopted record. The query owns the data; the component owns the presentation.
Uptime
99.97%
+0.0%
Record-shape data-query. The data-seed carries only the scalar KPIs, so the headline numbers are exact from the server render. The sparkline history isn't seeded; it arrives with the query's first fetch, which runs on load and lands within a frame, so it fills in immediately. The backend then re-syncs every 1.5s via invalidate().
Requests/s
2,847
+15.3%
Record-shape data-query. Writes never touch this store from app code: the simulator mutates the backend, then invalidate() re-syncs — the mutate-then-invalidate pattern. Query stores are engine-owned (WF-950 guards them in dev builds).
Error Rate
0.12%
-0.0%
data-pool at 30fps. Thirty bars re-render from the rps history through one batched flush per frame. Per-frame visualization is pool territory: no server behind it, so no query. The plain border is the point of the color coding.
Requests / Second: 30s Window
data-pool. Each dot is a pool entity spawned per request sample, animated and recycled per frame. Hundreds of short-lived DOM nodes at 60fps: exactly the job pools exist for, and not a data-query job.
Endpoint Latency
500ms250ms0ms
data-pool at 20fps. 144 cells lerp toward shifting targets each frame in one batched flush. Pool territory again: the data is generated in-page for rendering, so there is nothing to query.
Endpoint Traffic: 24h Heatmap
/api/users /api/orders /api/products /api/search /api/auth /api/payments
00:0006:0012:0018:00Now
A plain reactive store driving SVG arcs via data-bind-style. In-page infrastructure state with no external source of truth: a store is the right tool, and the contrast with the teal-bordered query widgets is deliberate.
System Load
-- CPU
-- Memory
List-shape data-query. The items below were server-rendered and adopted (text and time parsed from the markup; ids and icon colors ride data-seed). Simulators push events into the backend and invalidate() — new items merge in at the top, keyed and in place.
Activity Feed
  • System initialized1m ago
  • System initialized2m ago
  • System initialized3m ago
  • System initialized4m ago
  • System initialized5m ago
  • System initialized6m ago
  • System initialized7m ago
  • System initialized8m ago
List-shape data-query, full story: these 8 rows arrived server-rendered (view source — they are really in the HTML) and were adopted as data, row ids riding data-seed. New orders merge in at the top without disturbing rows you have scrolled to. "Load older orders" appends pages with keyed dedup. And when the backend cancels an order it arrives flagged cancelled: true — the declared tombstone field removes it from wherever it sits, even deep in loaded history.
Recent Orders
OrderCustomerAmountStatus
ORD-8472Sofia Ramirez$2,840Completed
ORD-8471Liam Chen$1,120Processing
ORD-8470Ava Patel$4,205Completed
ORD-8469Noah Kim$860Completed
ORD-8468Mia Torres$3,410Pending
ORD-8467Ethan Brooks$505Completed
ORD-8466Zoe Nakamura$2,150Processing
ORD-8465Lucas Weber$1,975Completed
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
CPU
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
Memory
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
Disk
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
Net In
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
Net Out
Plain reactive store + data-bind. Simulated in-page every 2s; no external source of truth, so no query. Standard border = store or pool driven.
Connections