Home Assistant new user interface and UI editor

With Home Assistant version 0.86, Lovelace became the default user interface, bringing a new way to set up entities with different card styles. There is also a new building UI editor making it easier to configure the frontend directly on the browser. In this article, I’m going to show you how to use the new UI editor. We’re going to set up a few cards so we can check the Card configuration window, which includes a Live preview showing the card that is being configured. We’re also going to take a look at the included text editor in Home Assistant, and last but not least, I’m going to show you how to enable Yaml mode so you can configure Lovelace UI from any text editor.

Whether you just installed Home Assistant or upgraded to the latest version, all your entities are set up automatically within cards. Also, by default Home Assistant would maintain your user interface, updating it with new entities whenever new ones become available. The default setup looks just like the previous user interface. The reason for that is because all entities are set up using the Entities card. However, you can take control and manually configure all the cards and use all other available Lovelace card styles. Just have in mind that if you take control, Home Assistant won’t automatically add new entities to the frontend. You would have to add them into cards manually.

How to access the UI editor

To access the UI editor, click on the More Options icon at the top right corner of the window, and then, click on Configure UI. There are several editing options that you can use. At the bottom of each card, there is a new row with the options to edit the card, move it up and down, move it to another View or delete it. In addition to that, you can also change the default Home Assistant title at the top, add new Views and also add new cards.

At the time of this video, there are a total of 24 card styles available for Lovelace. To add a new card, you can click on the “+” icon on the lower right corner of the window. Then, a pop-up window comes up showing the available cards for you to select.

Card Configuration

Because the Lovelace UI editor is relatively new, not all card styles have a simple interface where you can easily configure all the available settings. Some card styles would only present a regular text editor for you to configure them using Yaml manually. However, this is something that continues to be worked on and on almost every update done to Home Assistance, the UI editor gets improved.

Let’s take a look at a couple of cards styles that have been already updated to have a simple interface.

Entity Button card

The first one would be the Entity Button. With this card, you can easily select the entity that you would like to set up from a drop-down. Change the default name, the icon and also the theme for the card. In addition to that, you can also set up the Tap Action and the Hold Action. At the bottom of the editor, you have the Live Preview window where you can check all the changes that are being done to the card and even test it out before saving it.

If you want to configure the card using Yaml, you can click on Toggle Editor to switch between the UI editor and the Text editor. The Live Preview is also available while using the Text editor so you can still see the changes before saving the card. In fact, this is how the card configuration looks like for the cards that don’t have a simple interface yet.

Glance card

The next card that we are going to look at is the Glance card, which allows adding multiple entities one next to the other minimizing the overall size of the card. Because the card was already updated to work with the UI editor, you can easily select the entities from a drop-down. Also, set up a title for the card, change the theme, specify the number of columns that you want per row, and even choose if you want to show the name or the state of the entities. At the bottom, you also have the Live preview window and the option to toggle between the UI editor and the Text editor.

Manual card

What if you want to set up custom cards? Like for example the Mini Media Player which is a popular custom card for Lovelace. Well, you can use the Manual card which allows configuring any custom card using the text editor. Also, like on the other cards, you have access to the Live Preview window. So you can check the configuration before you save the card.

Views Configuration

Views are tabs in Home Assistant. To add a new View, you can click on the Plus “+” icon at the top. Then, inside the View Configuration, you can set up a title or an icon that would represent the View. If you set up both, you would only see the title for the View when you hover over the icon.

By default, Views are shown in the URL path as a number. So the main View is set to 0 “zero” and the second one to 1 and so on. However, if you set up a name in the URL Path, which I usually just set the same name as the title, it would now show that name instead of the number in the URL path.

You also have the option to set up a Theme for each View, enable Panel Mode which is perfect for when you want to set up a floor plan. So, instead of having a small card in the middle of the view, it would show the card in full width. Lastly, you can add Badges at the top of the View displaying information from sensors and trackers.

How to use a Text editor to configure the Lovelace UI

So far we looked at how to configure everything using the UI editor. We also checked some cards that would only provide a text editor to configure them using Yaml. However, what if you want to see the whole Lovelace configuration in Yaml, and configure everything using just a text editor? Well, there are a couple of ways that you can do this. You can use the included text editor in Home Assistant. Which allows editing from a browser, or you can enable Yaml mode and use any Text editor that you would like on your computer.

Home Assistant Text editor

To access the included text editor, go into Configure UI. Click on the More Options icon and then, click on Raw config editor. The text editor in Home Assistant is simple. It has a color scheme making it easy to understand what you are reading. And, it also follows the 2 spaces indentation for Yaml. So, even though it’s a simple editor, it still gets the job done.

Enable Yaml mode

To use any text editor on your computer, you would need to enable Yaml mode by entering the following on your configuration.yaml file:

lovelace:
  Mode: yaml

Then, create a new file called ui-lovelace.yaml inside your Home Assistant Config folder. After that restart Home Assistant and then you can start editing the frontend using any text editor you want.

Pros and Cons of enabling Yaml mode

Somethings to have in mind when enabling Yaml mode is that you won’t be able to use the UI editor in Home Assistant. That means that you won’t have the Live preview or the ability to edit the frontend from anywhere you are. You would only be able to configure Lovelace using the text editor on your local computer. However, at the same time, you have the advantages that you can use a better editor with a lot more features than the one included in Home Assistant.