Home Assistant: Getting Started With Lovelace

I got my start in Home Assistant a few months ago and it has been great. One thing to know about Home Assistant is that it has a rapid pace of development and improvements. As of release .86 Home Assistant uses a new UI framework called Lovelace instead of it’s old “States” UI framework. With the change in UI, I figured now is the time to build out a custom interface for my family and me to use. I am still in the process of building this and there is a lot to learn. On my journey I’ve discovered a frew resources that I’d like to share with you in case you are interested in building a Lovelace UI interface.

What is Lovelace?

The Lovelace UI name comes from Ada Lovelace, a 19th-century English mathematician widely considered to be the world’s first computer programmer. Lovelace has technically been a part of Home Assistant releases since June of 2018, but in January (release .86) it became the default UI.

How does Lovelace work?

Unlike the current states UI, Lovelace uses a single configuration file to define the UI separately from the states. This allows for more detailed control of the interface, as well as the ability to see updates to the UI without restarting Home Assistant. You can edit Lovelace directly in the Home Assistant UI and immediately see the results. Many of the features are drag and drop, while some still require some YAML coding. There are currently 24 out of the box “cards” to choose from when making your UI. You can also design your own custom cards, or use ones others have created. Here is an example of the Lovelace UI configuration:

You can also demo the functionality, including configuration!

What are some resources to help me with Lovelace?

In addition to the demo site and video there are a few more resources that might be of interest to you:

• Home Assistant Podcast 42 – .86 Getting to Know Lovelace with Zack – This has a great overview of Lovelace, its current state, and future plans directly from one of the developers!
• Lovelace Home Assistant page – This is the official documentation that also includes links to the cards and the demo video above.
• How Lovelace works – This page gives a brief description of how Lovelace works and how it differs from the old UI.
• Lovelace YAML Mode – If you want fine-grained control or just like writing YAML this page is the official documentation for configuring Lovelace using YAML.
• Home Assistant Forum – The forum is the place to go for questions, examples, custom cards, and general discussion.

Things I’ve Noticed

• When you upgrade to .86 or higher you will be sent to the Lovelace interface by default. It does a great job (at least it did for me) of replicating your states UI as a starting point.
• You can still revert back to the states UI temporarily and make it the default by clicking on the appropriate link on your dev-info page.
• New devices I’ve added to Home Assistant don’t automatically show up in the Lovelace UI like they would after a restart in the states UI.
• You can see a list of entities not in cards by selecting “Unused Entities” in the top right settings menu.
• Once you use the UI YAML editor to modify a card, you have to keep using the editor add to make changes to the card.
• There seems to be no UI way to change the order of the views. I think you would have to do it by using the raw config editor in the settings menu and rearranging the YAML. The demo seems to have that capability in the UI so maybe something is wrong with my setup.

Final Thoughts

Lovelace is a big change that provides a great foundation for better Home Assistant UIs. It might take some getting used to and learning (I know, I’m in the middle of it!) but it is well worth it. Plus, I’m sure the functionality and supported cards will rapidly improve and mature. I hope this information has helped you to learn and use it.

What do you think of Lovelace? Reach out and let me know!