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.

Lovelace Resources

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:

See also  Transferring my Z-Wave Network to Home Assistant from Vera

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:

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.
See also  Finalizing My Year-Round LEDs and Holiday Lights

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!

Interested in supporting HomeTechHacker?

Have you found the content on this site useful? If so, are you interested in supporting me and this site? There’s no obligation of course, but I would really appreciate any support you can give. Below are a few ways you can show support:

  • Share this site with your friends and on social media (use the sharing links at the end of this page for your convenience)
  • Subscribe to this site
  • Purchase my book, The Smart Home Manual, for yourself or as a gift.
  • Put a link to HomeTechHacker on a site you have access to. Be sure to let me know about it!
  • Reach out to me via my contact page or Twitter and let me know something I should write about
  • Shop at Amazon through my affiliate links and ads on these pages. See my disclosures for more details about affiliate links. You can also just shop from the link below:

Thank you! I really appreciate it!

Share this:

Home Assistant: Getting Started With Lovelace

by HomeTechHacker time to read: 3 min