Build Your First Home Assistant Dashboard: Beginner's Guide

1. Default Dashboard vs Custom Lovelace

When you first install Home Assistant, it builds an automatic dashboard from your entities — every device appears in the room it's assigned to, in a grid layout. This is great for getting started, but it's limited: you can't control the order, group things your own way, or show exactly the information you want at a glance.

The custom Lovelace dashboard is what serious HA users build. You define every view, every card, every entity — exactly where you want it. It takes more setup but gives you complete control. This guide uses YAML mode, which is the most powerful approach and lets you easily back up, version-control, or share your dashboard config.

2. Enabling YAML Mode

To take control of your dashboard:

1. Open your dashboard (the default one is called "Overview")
2. Click the pencil icon (top right) to enter edit mode
3. Click the three-dot menu → Edit Dashboard
4. You'll see a prompt: "You are about to take control of this dashboard" — click Take Control
5. Now click the three-dot menu again → Edit in YAML

You'll see the raw YAML for your current dashboard. Delete everything and start fresh with the examples below — or keep the existing content and modify it.

3. Dashboard YAML Structure

A Lovelace dashboard is made of views (tabs) and cards (individual panels within a view). The basic skeleton looks like this:

views:
  - title: Home
    path: home
    cards:
      - type: entities
        title: Example Card
        entities:
          - entity: light.living_room

You can have multiple views (they appear as tabs at the top of the dashboard). Each view has a title, an optional path (used in the URL), and a list of cards.

4. Entities Card

The entities card is the workhorse of HA dashboards — it shows a list of entities with their current state and a toggle where applicable.

- type: entities
  title: Lights
  entities:
    - entity: light.living_room
      name: Living Room
    - entity: light.kitchen
      name: Kitchen
    - entity: light.bedroom
      name: Bedroom
    - type: divider
    - entity: switch.garden_pump
      name: Garden Pump
      icon: mdi:water-pump

Notice you can override the name displayed, set a custom icon, and add a divider between groups of entities. The card shows toggle switches for lights and switches, and state text for sensors.

5. Glance Card

The glance card shows multiple entities in a compact grid — perfect for a "quick status at a glance" view at the top of your dashboard.

- type: glance
  title: Quick Status
  entities:
    - entity: binary_sensor.front_door
      name: Front Door
    - entity: sensor.living_room_temperature
      name: Temperature
    - entity: light.living_room
      name: Living Room
    - entity: sensor.outdoor_humidity
      name: Humidity
    - entity: binary_sensor.motion_hallway
      name: Hallway

Each entity shows its icon, name, and current state. For binary sensors, it shows "on"/"off" — you can make this more readable by setting device_class on the entity (e.g., door, motion, window) which changes the displayed text to "Open/Closed" or "Detected/Clear".

6. Button Card

The built-in button card creates a big tappable button for a single entity — great for things you want one-tap access to:

- type: button
  entity: switch.garden_pump
  name: Garden Pump
  icon: mdi:water-pump
  tap_action:
    action: toggle
  hold_action:
    action: more-info

The button shows the entity's current state as its background colour (active = on colour, inactive = grey). tap_action: toggle means tapping the button toggles the switch. hold_action: more-info opens the detail panel on long-press.

7. Camera Card

If you have IP cameras integrated (Reolink, Amcrest, Frigate, etc.), a camera card shows a live thumbnail that refreshes automatically:

- type: picture-entity
  entity: camera.front_door
  name: Front Door Camera
  camera_view: live
  show_state: false

Use camera_view: live for a live stream (requires the camera to support HLS/MJPEG streaming). Use camera_view: auto for a still image that refreshes every 10 seconds — less bandwidth-intensive.

8. Making It Look Better: Horizontal and Vertical Stacks

Stack cards together to create multi-column layouts. A horizontal-stack puts cards side by side; a vertical-stack stacks them — and you can nest them to build grids:

views:
  - title: Home
    cards:
      - type: glance
        title: Quick Status
        entities:
          - entity: binary_sensor.front_door
            name: Front Door
          - entity: sensor.living_room_temperature
            name: Temp
          - entity: light.living_room
            name: Living Room
      - type: horizontal-stack
        cards:
          - type: entities
            title: Lights
            entities:
              - entity: light.living_room
              - entity: light.kitchen
              - entity: light.bedroom
          - type: entities
            title: Switches
            entities:
              - entity: switch.garden_pump
              - entity: switch.tv_power
      - type: button
        tap_action:
          action: toggle
        entity: switch.garden_pump
        name: Garden Pump
        icon: mdi:water-pump

The horizontal-stack puts your Lights and Switches entity cards side by side. On mobile they'll stack vertically automatically.

9. Tablet Kiosk Mode

If you're mounting a tablet on the wall as a home control panel, you want it to stay on the dashboard permanently — no screensaver, no browser chrome, full-screen. The best solution is Fully Kiosk Browser (Android, ~$7 one-time). Configure it to:

• Open your HA dashboard URL on launch
• Keep the screen on when plugged in
• Block navigation away from the dashboard
• Reload the page if HA becomes unavailable and reconnects

In Fully Kiosk, go to Web Content Settings → set your HA URL. In Device Management, enable Keep Screen On While Plugged. Install the Fully Kiosk Browser HACS integration in HA to control the tablet (brightness, screensaver) from automations.

10. Troubleshooting

Dashboard shows "Error: Invalid config" after saving YAML

YAML indentation errors are the most common cause. In Lovelace YAML, every level of nesting must be indented by exactly 2 spaces. Open the raw editor and look for the line number in the error message. Common mistakes: mixing tabs and spaces, forgetting a colon after a key, or misaligning a card's property.

Card shows entity unavailable

The entity ID in your YAML doesn't match the actual entity ID in HA. Go to Developer Tools → States and search for the entity to get its exact ID. Entity IDs are case-sensitive.

Camera card shows a still image instead of live video

Change camera_view: auto to camera_view: live. If that still doesn't work, your camera may not support the streaming protocol HA is trying to use — check the camera's integration documentation.

Changes to YAML don't appear on the dashboard

Hard-refresh your browser (Ctrl+Shift+R or Cmd+Shift+R). If you're on mobile, clear the app cache. HA caches frontend resources aggressively.

11. FAQ

SmartWired participates in the Amazon Associates Programme. We may earn a commission from qualifying purchases at no extra cost to you.