Skip to content
šŸ”¹ Improve the lovelace yaml parser for Home Assistant
Branch: master
Clone or download
Latest commit 14fd723 Jan 16, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
custom_components/lovelace_gen Add fromjson filter Jan 16, 2020
.gitignore Better include syntax Aug 6, 2019
LICENSE.txt Better include syntax Aug 6, 2019 Add fromjson filter Jan 16, 2020 Add for hacs Aug 8, 2019



Improve the lovelace yaml parser for Home Assistant.

See my floorplan card for an example of what's possible.

Installation instructions

  • Copy the contents of custom_components/lovelace_gen/ to <your config dir>/custom_components/lovelace_gen/.
  • Add the following to your configuration.yaml:

  mode: yaml
  • Restart Home Assistant


This integration changes the way Home Assistant parses your ui_lovelace.yaml before sending the information off to the lovelace frontend in your browser. It's obviously only useful if you are using YAML mode.

First of all

To rerender the frontend, use the Refresh option from the three-dots-menu in Lovelace


Second of all

Any yaml file that is to be processed with lovelace_gen MUST have the following as its first line:

# lovelace_gen

Important: For some reason, which I can't seem to nail down, things stop working if you add # lovelace_gen to ui-lovelace.yaml. Adding it to any file included from ui-lovelace.yaml works, though.

Let's continue

The changes from the default generation include

Jinja2 templates

You can now use Jinja2 templates in your lovelace configuration.

This can be used e.g. to

  • Set and use variables
{% set my_lamp = "light.bed_light" %}

type: entities
 - {{ my_lamp }}
  • Loop over lists
{% set lights = ['light.bed_light', 'light.kitchen_lights', 'light.ceiling_lights'] %}

- type: entities
  {% for l in lights %}
    - {{ l }}
  {% endfor %}

- type: horizontal-stack
    {% for l in lights %}
    - type: light
      entity: {{ l }}
    {% endfor %}
  • Use macros
{% macro button(entity) -%}
  - type: entity-button
    entity: {{ entity }}
      action: more-info
      action: toggle
{%- endmacro %}

type: horizontal-stack
  {{ button("light.bed_light") }}
  {{ button("light.ceiling_lights") }}
  {{ button("light.kitchen_lights") }}

Please note that for this to work, the indentation of the code in the macro block must be equal to what it should be where it's called.

  • Add conditional parts
{% if myvariable == true %}
Do something
{% endif %}

This is NOT dynamic. The values of variables are locked down when you rerender the interface.

This might make conditions seem pointless... but they work well with the next feature.

Passing arguments to included files

Normally, you can include a file in your lovelace configuration using

  - !include lovelace/my_view.yaml

lovelace_gen lets you add a second argument to that function. This second argument is a dictionary of variables and their values, that will be set for all jinja2 templates in the new file:

type: horizontal-stack
  - !include
    - button_card.yaml
    - entity: light.bed_light
  - !include
    - button_card.yaml
    - entity: switch.decorative_lights
  - !include
    - button_card.yaml
    - entity: light.ceiling_lights
      name: LIGHT!


# lovelace_gen
{% if entity.startswith("light") %}
type: light
{% else %}
type: entity-button
{% endif %}
entity: {{ entity }}
name: {{ name }}

include args

Be careful about the syntax here. Note that the arguments are given as a list and is indented under the !include statement. The second item in the list is a dictionary.

Note: If you want to pass a dictionary of values into a file, you need to convert it to json first:

{% set mydict = {"a": 1, "b": 2} %}
variable: {{ mydict | tojson }}

And then convert it back from json inside the file:

content: The value of a is {{ (variable | fromjson)['a'] }}

The fromjson filter is a feature of lovelace_gen and not normally included in jinja.

Invalidate cache of files

If you use lots of custom lovelace cards, chances are that you have run into caching problems at one point or another.

I.e. you refresh your page after updating the custom card, but nothing changes.

The answer is often to add a counter after the URL of your resource, e.g.

  - url: /local/card-mod.js?v=2
    type: module

lovelace_gen introduces a !file command that handles this for you.

  - url: !file /local/card-mod.js
    type: module

After this, lovelace_gen will automatically add a random version number to your URL every time you rerender the frontend. You won't have to worry about cache ever again.

This can also be used for pictures.



# lovelace_gen
  # When you regenerate, the browser cache for this file will be invalidated
  - url: !file /local/card-mod.js
    type: module

 - ! include lovelace/my_cool_view.yaml


# lovelace_gen
{% set my_lights = ["light.bed_light", "light.kitchen_lights", "light.ceiling_lights"] %}
title: My view
  - type: entities
{% for light in my_lights %}
      - {{ light }}
{% endfor %}

  # Include files with arguments
  # NB: JSON format for arguments
  # And NO SPACE after the colons!
  - !include
    - lamps: true
      title: With Lamps

# Use this if you want lovelace_gen to ignore the jinja
{% raw %}
  - type: markdown
    content: |
      # Coming soon(?)

      A built-inmarkdown card with jinja templating.
      So I can tell that my light is {{ states('light.bed_light') }}!
{% endraw %}

  - !include
    - floorplan.yaml
    - title: No lights


# lovelace_gen
{% macro lamp(entity, x, y) -%}
{% if lamps %}
- type: state-icon
  entity: {{ entity }}
{% else %}
- type: custom:gap-card
{% endif %}
    left: {{ x }}%
    top: {{ y }}%
{%- endmacro %}

type: picture-elements
title: {{ title }}
  {{ lamp('light.bed_light', 25, 25) }}
  {{ lamp('light.kitchen_lights', 50, 25) }}
  {{ lamp('light.ceiling_lights', 50, 50) }}


Hidden bonus

With lovelace_gen installed, you'll be able to redefine node anchors in the same file. A feature in the YAML specification, but an error in the engine Home Assistant normally uses...


How can I do global variables?

You can add variables to the lovelace_gen configuration in configuration.yaml and then refernce them in lovelace using {{ _global }}.


    - living_room
    - kitchen
    - bed_room
type: entities
  {% for room in _global.rooms %}
  - type: custom:auto-entities
      type: custom:fold-entity-row
        type: section
        label: {{ room|capitalize }}
        - area: {{ room }}
  {% endfor %}

Can I use this for my general Home Assistant configuration?

It's called lovelace_gen for a reason... That being said - it might work. Or it might not. There's really no way to tell. It depends on what parts of the configuration are loaded before or after lovelace_gen itself.

I'd advice you not to try it.

What if I WANT jinja in my lovelace interface

Use the {% raw %} and {% endraw %} tags. There's an example above.

Is there any way to solve the indentation problem for macros

Not automatically, but you can do something like

{% macro button(entity, ws) %}
{{"  "*ws}}- type: entity-button
{{"  "*ws}}  entity: {{ entity }}
{{"  "*ws}}  tap_action:
{{"  "*ws}}    action: more-info
{{"  "*ws}}  hold_action:
{{"  "*ws}}    action: toggle
{%- endmacro %}

  - type: horizontal-stack
      {{ button('light.bed_light', 3) }}

  {{ button('light.bed_light', 1) }}

Note that included files don't have this problem.

Buy Me A Coffee

You canā€™t perform that action at this time.