iot-value The latest reading of a single variable, large and legible. Drop it on a wall display or tuck it into a corner of the grid.
Attributes
data-title, data-unit Widgets
Bind data to the screen.
Every widget ships as a native, framework-agnostic Web Component. It takes data in through properties and emits command intents as DOM events — it knows nothing about Cloudflare, WebSockets, or any particular frontend. Use them on the built-in dashboard, or embed them in your own app.
Display
Show the data
Read-only widgets that render the live value of a variable.
iot-gauge An arc gauge for a numeric variable with configurable min / max bounds — perfect for temperature, battery, or fill level.
Attributes
data-title, data-min, data-max, data-unit iot-chart A multi-series time-series chart powered by ApexCharts. Line, area, bar, or stepline, with optional drag-to-zoom.
Attributes
data-title, data-chart-type, data-zoom iot-map Geographic markers from static coordinates or live lat / lng variables, on a configurable basemap — ideal for fleets, sensors in the field, or asset tracking.
Attributes
data-title, data-basemap, data-zoom Control
Write it back
Interactive widgets that emit an iot-command event. The platform turns it into a pending control write your hardware picks up.
iot-toggle An on / off switch that writes a value to a variable and reflects the last reported state so it never drifts out of sync.
Attributes
data-title, data-variable, data-on-value, data-off-value iot-slider A horizontal slider for a numeric write. Commits on release — not every frame — so the wire never floods while you drag.
Attributes
data-title, data-variable, data-min, data-max, data-step iot-push A momentary push button for one-shot commands — restart a node, fire a routine, kick off a script. No toggle state.
Attributes
data-title, data-variable, data-value, data-label A contract, not a coupling
Display widgets receive their value through a property — the dashboard sets
el.value as updates arrive
over the WebSocket. Control widgets dispatch an
iot-command event that
bubbles up; the page forwards it as a control write. That clean boundary is why you can
lift any widget straight into your own project.
embed anywhere
<!-- display: push a value in -->
<iot-gauge data-title="Temp" data-max="50"></iot-gauge>
gauge.value = 23.4;
<!-- control: read an intent out -->
toggle.addEventListener('iot-command', (e) => {
// { variable, value }
send(e.detail);
});