Skip to content
This repository has been archived by the owner. It is now read-only.


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time A lovelace configuration generator for homeassistant

This is deprecated. Use lovelace_gen instead.

This script is a pre-processor for your lovelace configuration.

It will read the file lovelace/main.yaml and generate ui-lovelace.yaml from it.

Using this generator will allow you to use jinja2 templates in your lovelace yaml configuration. It can also simplify cache invalidation when including scripts and images in your configuration.


Create a directory <homeassistant config dir>/lovelace and the file <homeassistant config dir>/lovelace/main.yaml.

Inside your homeassistant config directory, run the command:


This will create the file ui_lovelace.yaml.

Note: lovelace-gen requires some non-standard python packages to be installed, namely ruamel and Jinja2. Those are all required by home-assistant, so by running the script in the same environment as hass, you'll get them for free. Also, python3 is required.

Optional arguments

lovelace-gen will try to find the location of the lovelace/ directory automatically. If you wish to specify it manually, you can do so as an argument:

python3 /opt/homeassistant/config/lovelace

By default ui-lovelace will be generated in the parent directory of the lovelace/ directory. This can be changed with the -o flag:

python3 -o ui-lovelace-example.yaml

Usage in

In your configuration.yaml file, make a shell command:

  lovelace_gen: 'python /config/ > /config/lovelace-gen.log'

Restart Home Assistant. Then run the service shell_command.lovelace_gen, preferably from <hass_ip_address:port>/dev-service.

This will create the file /config/ui_lovelace.yaml. Any errors will be written to /config/lovelace-gen.log to help you find the problem.


If the processing fails, the script will try to tell you why.

However, if you are running it as a shell_command from Home Assistant, you will - by default - only get the return code in the log.

The possible return codes for errors are:

Code Problem
2 Could not find lovelace/main.yaml.
3 Something failed in the yaml processing.
4 Could not write ui-lovelace.yaml.

However, you can probably get more information by setting your log level to debug.

Special directives

The following directives can be used in lovelace/main.yaml or any file included using the !include directive.

!include <filename>

Includes the file lovelace/<filename>. Works exactly the same way as the built-in include directive, except it's rooted in the lovelace/ directory.

!file <path>

Is replaced with <path>?XXX where XXX is a random number that changes each time you run lovelace-gen. The reason for this is that e.g.

image: !file /local/images/photo.png

may be replaced with

image: /local/images/photo.png?234567890234567893456789.234567

which - to your browser is a totally different filename than e.g. photo.png?09876540987654098765434567890.35783290 and thus can not be loaded from cache.

Incredibly useful if you like to play around with custom plugins or change your images and have problem with things not updating as you expected them to.

Note about !secret

The built in !secret directive is of course also usable as normal. lovelace-gen ignores it, and it is instead processed by Home Assistant at run-time.

Jinja2 templates

Lovelace-gen allows you to use jinja templating anywhere in your configuration:


title: My Awesome Home

{% set plugins = [
  ] %}

# Copy resources from anywhere to www/lovelace and include them
  {% for p in plugins %}
  - url: !file {{ p }}
    type: js
  {% endfor %}

  - title: Bottom floor
      - !include floorplan.yaml


type: picture-elements
image: !file /local/bottom_floor.png
  {% set lamp = """
    type: state-icon
    tap_action: {action: toggle}
    """ %}
  {% set dimlamp = """
    type: state-icon
    tap_action: {action: toggle}
    hold_action: {action: more-info}
    """ %}

  - entity: light.ceiling_hallway
    style: { left: 50%, top: 50% }
    {{ lamp }}

  - entity: light.kitchen_table
    style: {left: 25%, top: 30% }
    {{ dimlamp }}

  - entity: light.her_bed
    style: {left: 75%, top: 30% }
    {{ lamp }}
  - entity: light.his_bed
    style: {left: 75%, top: 35% }
    {{ lamp }}


A lovelace configuration file generator for home assistant






No releases published


No packages published

Contributors 4