With Home Assistant 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.
Today, 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 the Lovelace
UI from any text editor.
Whether you just installed Home Assistant or upgraded to the latest version, all
entities are set up automatically within cards.
Also, by default Home Assistant will 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, which
is the style that we are used to.
However, you can take control and manually configure all the cards and use all other
available 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 manually add them into cards.
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, 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.
Because the Lovelace UI editor is relatively new, not all card styles have a simple interface
where you can easily configure all the settings.
For some card styles, you would only be presented with a regular text editor for you to manually
configure them using Yaml.
However, this is something that continues to be worked on and on almost every update
that is done to Home Assistance, the UI editor is improved.
Let’s take a look at a couple of cards that have been already updated to have a simple
interface.
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 dropdown.
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.
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 has already been updated to work with the UI editor, you can easily
select the entities from a dropdown.
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.
Now, 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.
And, like on the other cards, you also have access to the Live Preview window so you can
check the configuration before you save the card.
If you want to check out the Mini Media Player card, you can find a link in the description.
Next, let’s talk about Views which 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.
But, 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.
All right so, so far we saw how to configure everything using the UI editor, we also saw
that some cards would only provide a text editor to configure them using Yaml.
But now, what if you want to see the whole Lovelace configuration in Yaml, and configure
everything using 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.
To access the included text editor, 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 indentation for Yaml.
So, even though it’s a simple editor, it still gets the job done.
Now, to use any text editor on your computer, you would need to enter the following in the
configuration.yaml file:
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 whatever
text editor you want to use in your computer.
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 the Lovelace UI using the text editor on your local computer.
But at the same time, you have the advantage that you can use a better editor with a lot
more features than the one included in Home Assistant.
If you would like to learn more about how to edit the Lovelace UI using a text editor,
check out a few more videos that I have on my channel.
One, showing how to set up different card styles in Lovelace, and the other one showing
how to set up a floor plan.
You can find the links in the description below.
Also, remember that everything that I show you on this video will be posted on a written
guide on my website so definitely check it out.
You can also find that link down below.
If you like this video, give it a thumbs up.
Don’t forget to subscribe to the channel if you haven’t done so already and, I will
see you in the next video.