Skip to main content
A radial gauge displaying a live temperature value received from an MQTT topic

A gauge made live by a single BIND line — every message on the topic moves the needle

A binding is the live wire between a component and your data. When the source changes, the widget updates — no polling, no refresh. Most “why is my widget blank?” questions are answered on this page.
Like plugging an appliance into a socket. The widget is the appliance, the topic is the socket — once plugged in, the power (data) flows on its own.
Start by wiring one widget to one topic; the deeper reference — targets, coercion, JSON extraction — follows after.

​
Bind a widget in 30 seconds

Pick a topic you can see updating in the Data Viewer, and point a component at it with one BIND line:
Save, publish a number to sensor/temperature, and the needle moves. That one highlighted line is all a binding is: which aspect of the widget (VALUE) gets fed from where (TOPIC "sensor/temperature").

​
Where data comes from

Today, bindings read from MQTT topics — the widget updates on every message. Browse what’s available in the Data Viewer:

​
Extracting from JSON payloads

Real device payloads are rarely a bare number. When the topic carries a JSON object, add JSON_PATH on the component to pick a field:
Always inspect the payload in the Data Viewer before binding — you’ll see immediately whether you need JSON_PATH, AS NUMBER, or neither.
That covers most panels. The rest of the page is the reference: the full grammar, every bind target, and the transformation options that work today.

​
Anatomy of a binding

Three parts, all required:
  • Target — which aspect of the component receives the data (VALUE, STATE, DATA, …).
  • TO TOPIC — both words are mandatory; the source is always an MQTT topic path.
  • Topic path — the topic string in quotes.

​
Bind targets

​
Type coercion

If a topic publishes text but the component expects a number or boolean, append a coercion keyword to the bind line:
Validated on a live panel: a text payload "87.5" coerced with AS NUMBER displays as 87.50 on a value component.

​
Formatting readouts

Apply units and decimal places on the component, not on the BIND line:
SET UNIT and SET DECIMALS are documented per widget in Display components.

​
Common mistakes

Check the binding line word by word — these are the usual silent breakers:
The topic carries JSON — add SET JSON_PATH "$.field" to the component, as shown in Extracting from JSON payloads.

​
Next Steps

Actions & events

The other half of interactivity: reacting to clicks, changes, and thresholds.

Display components

Which target each widget accepts, with rendered examples.
Last modified on August 28, 2026