home-assistant.io/source/lovelace/yaml-mode.markdown

layout, title, description, date, sidebar, comments, sharing, footer

layout	title	description	date	sidebar	comments	sharing	footer
page	Lovelace YAML mode	Advanced users can switch on the advanced YAML mode.	2018-07-01 10:28 +00:00	true	false	true	true

It is possible to write your Lovelace config in YAML instead of via the UI. To do so, you will need to configure the Lovelace component to be in yaml mode by adding the following to your configuration.yaml:

lovelace:
  mode: yaml

Restart Home Assistant for the mode to be changed. Create a new file <config>/ui-lovelace.yaml and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.

As a super minimal example, here's the bare minimum you will need for this to work:

title: My Awesome Home
views:
    # View tab title.
  - title: Example
    cards:
        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

A slightly more advanced example shows additional elements which can be used to customize your frontend.

title: My Awesome Home
# Include external resources
resources:
  - url: /local/my-custom-card.js
    type: js
  - url: /local/my-webfont.css
    type: css

# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router
views:
    # View tab title.
  - title: Example
    # Unique path for direct access /lovelace/${path}
    path: example
    # Optional background (overwrites the global background).
    background: radial-gradient(crimson, skyblue)
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
    # The cards to show on this view.
    cards:
        # The filter card will filter entities for their state
      - type: entity-filter
        entities:
          - device_tracker.paulus
          - device_tracker.anne_there
        state_filter:
          - 'home'
        card:
          type: glance
          title: People that are home

        # The picture entity card will represent an entity with a picture
      - type: picture-entity
        image: https://www.home-assistant.io/images/default-social.png
        entity: light.bed_light

    # Specify a tab icon if you want the view tab to be an icon.
  - icon: mdi:home-assistant
    # Title of the view. Will be used as the tooltip for tab icon
    title: Second view
    cards:
        # Entities card will take a list of entities and show their state.
      - type: entities
        # Title of the entities card
        title: Example
        # The entities here will be shown in the same order as specified.
        # Each entry is an entity ID or a map with extra options.
        entities:
          - light.kitchen
          - switch.ac
          - entity: light.living_room
            # Override the name to use
            name: LR Lights

        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.

Navigate to <YOUR HASS URL>/lovelace. When you make changes to ui-lovelace.yaml, you don't have to restart Home Assistant or refresh the page. Just hit the refresh button in the menu at the top of the UI.