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

# Designer Toolbar

> Every tool on the Dashboard Designer toolbar — editing, alignment, grid, zoom, and modes.

The toolbar sits at the top of the [Dashboard Designer](/dashboard/overview) and
gives you the canvas-level controls: history, clipboard, alignment, grid, zoom,
and the design/preview modes.

## Editing & history

| Tool           | What it does                                                |
| -------------- | ----------------------------------------------------------- |
| **Undo**       | Step back through your changes                              |
| **Redo**       | Step forward again                                          |
| **Copy**       | Copy the selected widget(s)                                 |
| **Paste**      | Paste copied widget(s)                                      |
| **Copy Style** | Copy just the *styling* from one widget to apply to another |

## Alignment & distribution

Select two or more widgets to enable the **Align & Distribute** tools:

| Tool                                     | What it does                               |
| ---------------------------------------- | ------------------------------------------ |
| **Align left / right**                   | Line up selected widgets on an edge        |
| **Align center (horizontal / vertical)** | Center them on an axis                     |
| **Align top / bottom**                   | Line up vertically                         |
| **Distribute**                           | Even out spacing between three or more     |
| **Group widgets**                        | Combine into a single movable group        |
| **Ungroup widgets**                      | Break a group back into individual widgets |

## Grid & snapping

| Tool             | What it does                                       |
| ---------------- | -------------------------------------------------- |
| **Toggle Grid**  | Show/hide the alignment grid on the canvas         |
| **Snap to Grid** | Snap widgets to grid lines as you move/resize them |

Use these for pixel-clean layouts — snapping keeps everything aligned without
manual nudging.

## Zoom

| Tool                   | What it does                                                    |
| ---------------------- | --------------------------------------------------------------- |
| **Zoom In / Zoom Out** | Scale the canvas view to work on detail or see the whole layout |

## Preview & responsive

| Control              | What it does                                                    |
| -------------------- | --------------------------------------------------------------- |
| **Desktop / Mobile** | Preview and design for each viewport                            |
| **Design / Preview** | Switch between editing and running the dashboard with live data |
| **Script**           | Open the [Script tab](/script/overview) for custom logic        |
| **Save**             | Save the dashboard                                              |

<Tip>
  Design and Preview are the two modes you'll toggle constantly — edit in **Design**,
  then flip to **Preview** to see widgets update with real device data.
</Tip>

<CardGroup cols={2}>
  <Card title="The designer" icon="table-cells" href="/dashboard/overview">
    The canvas and the four-tab model.
  </Card>

  <Card title="General tab" icon="sliders" href="/dashboard/general-tab">
    Per-widget position, size, and identity.
  </Card>
</CardGroup>