Getting started

🇫🇷 Version française

Getting started

From an empty dashboard to a live plan in a few steps. Everything below is done with the mouse or a finger; the YAML at the end is only there to show what the editor writes.

1. Add the card

Choose one of these:

• A new dashboard: Settings › Dashboards › Add dashboard › Maquette. You get a dashboard with one full-width view ("Plan") holding an empty plan.

• An existing dashboard: Edit dashboard › Add card › Maquette. The card starts with one 4 × 3 m room. It works best alone in a view of type Panel (full width).

• By hand (Add card › Manual):

  type: custom:maquette-card
  title: My home

To look around first, pick Maquette — demo instead: see The demo.

2. Open the editor

Click the Edit plan button (ruler and pencil icon) at the top right of the card. It is only shown to Home Assistant administrators, and not while the dashboard itself is in edit mode: leave the dashboard editor first (Done).

On an empty plan the card offers three ways to start:

Button	What it does
Start with my areas	Lists your Home Assistant areas (those with entities are ticked). Each becomes a 4 × 3 m room with its walls, its temperature and humidity sensors and a badge for each main device. You then move and resize the rooms.
Draw a room	Arms the rectangle tool: click two opposite corners.
Import a plan	Paste or open a YAML / JSON plan exported from another Maquette card.

3. Draw the rooms

1. Press R (or the Rectangular room with walls tool) and click two opposite corners. The room and its four walls are created; walls shared with a neighbour are not duplicated.
2. The new room is selected: type its Name, then its exact Width (cm) and Height (cm) in the panel.
3. Pick its Temperature and Humidity sensors: the room is tinted by temperature (blue at 17 °C, red at 28 °C) and its label shows both values.
4. Link it to a Home Assistant area: the room view then lists the area's devices, scenes and automations, and the editor proposes the area's sensors when you add openings or widgets.

For an L-shaped room use P (Freeform room) and click every corner; close the shape on the first corner or with Enter. Outdoor spaces (terrace, garden, balcony) are rooms with Outdoor ticked: no temperature tint, but they receive the weather. See Drawing the plan.

4. Place the doors and windows

• The room panel lists the contacts and covers of its area that are not on the plan yet (To place on the walls): click one, then click its two ends on a wall.
• Or Add › Openings and pick a preset (Window + shutter + contact, Door + contact, Sliding bay window, Garage door…), then click both ends on a wall. Its sensors are looked up among the free entities of the room it borders: one match is linked, several open a short list, none leaves the field highlighted "to fill in".

An open contact turns the opening red; a shutter is drawn outside, darker as it closes.

5. Add devices and furniture

• Add › Devices › Light (or Plug / switch, Camera, Sensor…), pick the entity, click on the plan. A light gets a halo clipped to its room.
• Add › Furniture: drag the sofa, the bed, the EV charger… Furniture snaps to the walls. Give a piece an Entity to make it connected: it lights up when active, shows its power and opens its own card.

6. Add widgets next to the plan

Below the left and right columns, Add widget opens the widget catalogue: 10 basic types and 65 ready-made widgets (CO₂ gauge, water leaks, lock, solar production…), filled from your entities. See Widgets.

7. Save

Save (Ctrl+S) writes the plan into the dashboard configuration, like any other card. A dot on the button means there are unsaved changes; an unsaved draft is also kept in the browser. Exit leaves the editor.

What the editor wrote

A small plan, as stored in the dashboard (every key is in the Reference):

type: custom:maquette-card
id: home
title: My home
rooms:
  - name: Living room
    poly: [[0, 0], [500, 0], [500, 400], [0, 400]]
    label: [250, 200]
    temperature: sensor.living_room_temperature
    humidity: sensor.living_room_humidity
    area: living_room
  - name: Bedroom
    poly: [[500, 0], [850, 0], [850, 400], [500, 400]]
    label: [675, 200]
    temperature: sensor.bedroom_temperature
walls:
  - [0, 0, 850, 0]
  - [850, 0, 850, 400]
  - [850, 400, 0, 400]
  - [0, 400, 0, 0]
  - [500, 0, 500, 400]
openings:
  - type: window
    seg: [120, 0, 380, 0]
    name: Living room window
    contact: binary_sensor.living_room_window
    shutter: cover.living_room_shutter
    outside: [0, -1]
  - type: door
    seg: [500, 250, 500, 340]
badges:
  - entity: light.living_room
    pos: [250, 120]
    icon: mdi:ceiling-light
    color: "#f6c445"
    halo: 170
    room: Living room

Coordinates are in centimetres, x to the right and y downwards.

The demo

The demo is a small simulated apartment (living room, bedroom, office, bathroom, entrance, balcony) where everything works: lights, shutters, weather, people, alerts, replay, cards. Nothing is sent to your home: services and history only reach the simulation.

• Card picker: Maquette — demo, or demo: true on a Maquette card.
• Dashboards: Add dashboard › Maquette — demo.

type: custom:maquette-card
demo: true
title: Demo
language: en

With demo: true, only title and language of the configuration are used. The demo has no editor.

Next

Editor guide · Entities · Recipes