Lovelace Tips and Tricks


The Lovelace UI is a very powerful UI. Here are a few tips and tricks that might help you when working with Lovelace.

Have a tip or trick of your own? Click the “Edit this page on GitHub” at the top of this page to share it with everyone!

Tools

We have some amazing users that have created various tools to help you get started with Lovelace.

Lovelace Migration Script

The Lovelace Migration Script by @dale3h converts your current “old UI” configuration to the new Lovelace format. The idea behind this tool is to help give you something to start playing with right away.

Lovelace Config Generator

The Lovelace Config Generator by @thomasloven provides you with the ability to split your Lovelace configuration into multiple files.

Split configuration is currently possible directly in Lovelace, but it is expected to be removed in the near future due to fact that Home Assistant will be writing directly to the ui-lovelace.yaml file.

Tips and Tricks

Header Using Panel and Stacks

You can create a header by using panel: true with nested Vertical Stack and Horizontal Stack cards. See the code here. (@dale3h)

Disable Click on Elements

If you do not want an element to be clickable you can add pointer-events: none to the element’s style: configuration. This is quite useful when building a Picture Elements card that will be viewed mostly in a mobile browser. (@Toast)