Use 0.73.0 branch for stable version docs

Please follow official docs and developer docs for Lovelace UI.

Cards are the smallest unit of organisation, and provide a great setup to group functionality.

• entities
• entity-filter
• glance
• history-graph
• horizontal-stack
• iframe
• markdown
• media-control
• picture
• picture-elements
• picture-entity
• picture-glance
• plant-status
• vertical-stack
• weather-forecast

These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep links like /lovelace/0. You can also assign your own custom ids.

• Using custom id in view, for nicer navigation paths in URLs
• Using icons for tabs instead of text
• Using a card to fill a complete view, just like panels
• Using themes in views

To make the Lovelace UI the default dashboard view use one of the methods below.

Click the >> Set lovelace as default page page on this device << in dev-info panel to make Lovelace the default interface when visiting /.

This is a hack that will bind /lovelace to Overview option in the menu instead of /states using javascript. It will also set default dashboard for / using the same mechanic as Using UI method.

1. Create a new file under your config/www folder and name it lovelace.html

Content of lovelace.html

<script>
    var hack_element = document.querySelector('home-assistant').shadowRoot.querySelector('home-assistant-main').shadowRoot.querySelector('ha-sidebar').shadowRoot.querySelector('paper-icon-item[data-panel="states"]');
    if (hack_element) {
        hack_element.setAttribute("data-panel", "lovelace");
        localStorage.defaultPage = 'lovelace';
    }
</script>

2. Tell Home Assistant to load this file by referencing it inside your configuration.yaml

Example configuration:

frontend:
  extra_html_url:
    - /local/lovelace.html

3. Restart your Home Assistant and force a clear cache on your browser and a few force reloads on IOS app
4. [Optional] To view the old dashboard just navigate to /states

To see what entities you left out, you can now use the menu Unused entities in the header of Lovelace, the top right corner.

Due to popular request, a new custom card is now available ("monster card") to achieve similar results as the previous entity-filter. The rebirth of entity-filter from 0.72.

views:
- icon: mdi:settings
  id: debug
    cards:
      - type: "custom:monster-card"
        card: 
          type: glance
          title: My lovely card
        filter:
          include: [{}]
          exclude:
            - domain: group
            - domain: zone

To get you started you can use the demo platfrom in your configuration.yaml and experiment with the various examples inside card docs.

Other examples:

• ui-schema repo used by devs
• arsaboo own setup

Thare are two migration scripts:

The scripts might not be up to date with 0.73.0 on release day. Please be patient.

• Thanks to @OttoWinter for the migration script
• Thanks to @dale3h for the migration script that works also for packages