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
Table of Contents
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!
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 one of my books, The Personal Cybersecurity Manual, The Home Network Manual or 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!
- Enroll in HomeTechHacker Academy for free and premium online home technology courses.
- 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 one of the links below:
- HomeTechHacker Shop: This is a listing of products that I use, have reviewed, and that I recommend
- HomeTechHacker Technology Advisor: This suite of tools will give you customized home technology product recommendations based on your needs
- My Amazon affiliate link: Just click on this link to go to Amazon and shop
Thank you! I really appreciate it!
