> ## 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.

# Dashboard Designer

> The canvas and the four-tab properties model.

The Dashboard Designer is a drag-and-drop canvas. You place widgets, bind them to
device data, style them, and wire interactions. The same designer powers a
product's default dashboard and custom multi-device dashboards.

## The canvas

Drag widgets from the library onto the canvas, then position, resize, and rotate
them. There are 50 widgets across five categories — see the
[Widget Reference](/dashboard/widgets/overview).

## The four-tab properties model

Select a widget and its settings appear in four tabs, **always in the same
order**. This is what makes the panel predictable: a given setting always lives
in the same place across every widget.

| Tab          | What lives here                                       |
| ------------ | ----------------------------------------------------- |
| **General**  | Title, ID, type, content, behavior, layout            |
| **Style**    | Colors, background, border, icon, typography, effects |
| **Triggers** | Interactions, commands, event mapping                 |
| **Data**     | Device binding, field paths, polling, transforms      |

The rule of thumb: **a color is always Style; a font is always Style → Typography;
a label is always General → Content; an on-click command is always Triggers.**
Only which sections appear varies per widget — never their position.

## Design, Preview, Script

The designer has three modes:

* **Design** — edit the canvas and widget properties
* **Preview** — run the dashboard with live data
* **Script** — add JavaScript logic (see the [Script API](/script/overview))

<CardGroup cols={2}>
  <Card title="Binding data" icon="diagram-project" href="/dashboard/binding-data">
    Connect widgets to device payloads.
  </Card>

  <Card title="Widget reference" icon="table-cells" href="/dashboard/widgets/overview">
    All 50 widgets by category.
  </Card>
</CardGroup>