> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Binding Data

> Connect widgets to device payloads with widget IDs and field paths.

Binding is how a widget shows live device data and sends commands back. Two ideas
do all the work: the **widget ID** and **field paths**.

## The widget ID

Every widget has an ID. Firmware pushes values to that ID, and the widget
updates. This is the core loop from [How It Works](/learn/how-it-works):

```cpp theme={null}
// Firmware (Arduino)
device.updateWidget(targetId, "tempGauge", 27.4);
```

A Gauge whose widget ID is `tempGauge` now reads `27.4`. Set a widget's ID in the
**General** tab; reference that same ID from firmware.

## Field paths

When a device sends a structured payload, a widget reaches into it with a
**field path** in the **Data** tab. Paths use dot-notation for nested objects and
numeric indices for arrays.

Given this payload:

```json theme={null}
{ "sensors": { "cargo_temp": 6.2 }, "speed": 48, "gps": { "lat": 18.9 } }
```

| Field path           | Resolves to |
| -------------------- | ----------- |
| `speed`              | `48`        |
| `sensors.cargo_temp` | `6.2`       |
| `gps.lat`            | `18.9`      |

The platform resolves what it can and ignores what it can't — your payload shape
is entirely up to you.

## Commands back to the device

Control widgets (Switch, Button, Slider, …) send commands in the **Triggers**
tab. The firmware receives them through its command handler:

```cpp theme={null}
device.setUserCommandHandler([](JsonObject &msg) {
  // act on the command
});
```

## Multi-device dashboards

Different widgets on the same canvas can target different devices — bind each
widget to the device it represents. This is how a single dashboard monitors a
whole set of devices.

<CardGroup cols={2}>
  <Card title="The core loop" icon="diagram-project" href="/learn/how-it-works">
    Values up, commands down.
  </Card>

  <Card title="Widget reference" icon="table-cells" href="/dashboard/widgets/overview">
    What each widget binds to.
  </Card>
</CardGroup>