---
title: Building Dashboards with the Layout Editor
description: "The Layout Editor is where you design the screen that the TV will show. Twinnoverse layouts are designed for a **16:9 landscape screen**. --- ## 1. Open the Layout Editor 1. Open **Layouts**. 2. Create a new layout or edit an existing…"
url: "https://twinnoverse.com/docs/building-dashboards-with-the-layout-editor/"
updated: "2026-06-18"
category: Dashboard Builder / Dashboard Builder Design
---

# Building Dashboards with the Layout Editor

The Layout Editor is where you design the screen that the TV will show.

Twinnoverse layouts are designed for a **16:9 landscape screen**.

---

## 1. Open the Layout Editor

1. Open **Layouts**.
2. Create a new layout or edit an existing one.
3. The editor opens with:
   - a widget library
   - the center canvas
   - an inspector panel
   - save, undo, and redo controls

You can also:

- search the widget library
- show or hide the widget library
- show or hide the inspector
- switch between select mode and pan mode
- fit the canvas back into view
- enable or disable snap to grid

![Layout editor top bar menu](https://twinnoverse.com/wp-content/uploads/2026/06/Screenshot-2026-06-18-095731-1024x61.webp)

---

## 2. Understand the Canvas

The canvas represents the TV screen.

- the base layout is **16:9 landscape**
- the working size is **1920 x 1080**
- top and bottom chrome areas can reduce the usable content space

Design with real viewing distance in mind. A layout that looks fine on a laptop can still be too crowded on a factory TV.

---

## 3. Choose Widgets Before You Place Them

Do not start by dropping random widgets onto the canvas.

First decide what each area of the screen should communicate:

- one big number
- trend over time
- target versus current
- alerts or rows
- message or image

Read these before building the layout:

- [Choosing the Right Widgets](https://twinnoverse.com/docs/how-to-choose-the-right-dashboard-widgets/)
- [Widget Reference Guide](https://twinnoverse.com/docs/dashboard-widget-reference-guide/)

---

## 4. Add Widgets

1. Click a widget in the library.
2. Twinnoverse adds it to the canvas with a default size and position.
3. Repeat until the layout structure is complete.

Each new widget gets a default setup and a label. If the widget uses live or manual data, that label becomes part of the runtime payload contract.

If a widget is already selected, clicking a widget in the library can also replace the selected widget with the new widget type.

---

## 5. Move, Resize, and Replace Widgets

Use these core interactions on the canvas:

- click a widget to select it
- click and drag a widget to move it
- drag the corner handles to resize it
- click a different widget in the library to replace the selected widget type
- use the delete action in the inspector to remove the selected widget

Layout tips:

- move widgets to create a clear reading order
- resize them based on importance
- keep enough spacing between elements
- avoid overlap

A common 16:9 pattern is:

1. top row for headline KPIs
2. middle row for charts or progress
3. lower row for lists, alerts, notes, or supporting context

If one screen becomes crowded, create another layout and rotate it through a playlist instead of forcing everything into one canvas.

---

## 6. Use the Inspector

When no widget is selected, the inspector shows **layout-level** settings such as:

- layout name
- data source assignment
- chrome and theme
- layout background color

When a widget is selected, the inspector shows **widget-level** settings such as:

- label
- size and position
- background override color
- widget-specific settings

This means there are two different editing levels:

- **layout level** for the whole screen
- **widget level** for one selected widget

If you want to assign the data source or change layout-wide visual settings, deselect all widgets first.

Use the widget reference whenever you need to know what a widget expects from the data.

---

## 7. Save the Layout

1. Save the layout.
2. Add it to a playlist.
3. Assign that playlist to a device.

The layout by itself is only the screen design. The playlist controls when the device actually plays it.