General help on configuration of Lovelace UI


I’m still very new to all this coding and learning fast but could someone please point me in the right direction to learn how to configure the Lovelace UI

I have added loads of sensors, lights, tracking devices into the UI using the GUI itself but when looking at all the great stuff others have done I’ve decided I need to learn more

I have watched hours of youtube videos and still very confused. Lots of conflicting information and not sure what is the right approach I should be learning

For example do I create a new file called ui-lovelace.yaml or use the RAW edit in the GUI

Thanks all

My advise would be to just treat it as a learning experience when you’re first getting started. Check out the Home Assistant Cookbook and the forums to get examples of other people’s setups. There’s no shame in copying some of somebody’s YAML as a starting point.

Generally, though, I’d advise playing around with the different card types, sticking to the core Lovelace cards at first to get a hang of the configuration before adding any custom cards to the mix, and not getting too hung up on perfectionism early on. Play around with things, get used to how Lovelace works, and then attempt to make a “real” setup when you have developed a comfort level.

I’d also say start with the GUI mode, as you can optionally use the RAW editor but can also use the GUI editor. There are some disadvantages to the GUI mode, as the RAW editor will strip out comments and I think reorder things sometimes. And if you want to use advanced YAML techniques such as splitting up the configuration across multiple files or using anchors, you’ll need to switch to YAML mode (ui-lovelace.yaml). For now, I’m maintaining a .yaml file and copying/pasting into the RAW editor to make changes, so that I have the option of using the GUI mode if I want to. But I’m probably going to switch to YAML mode soon as I’ve been playing with anchors and also want to split up my growing Lovelace config.

1 Like

I think the YAML was introduces before the raw config editor was available. I copy any yaml I need into the raw config editor.

I guess if your configuration got too complex, using YAML split into multiple files might make sense.

YAML mode is considered to be used for advanced users, though the config within those two are exactly the same. If you want to know the differences between YAML mode and the RAW editor I suggest to check my previous answer here:

Btw, if you just started out, I suggest playing around with it before you will actually make a setup that you use on a daily basis. You will find that you will be keeping changing everything all the time every now and then and have things break after HA updates every now and then. So I think you should be prepared. To know what I actually mean you can see these screenshots below of how my setup evolved over 9 months:

First setup:

First Lovelace setup:

Second Lovelace Setup:

Current Setup:

Ofcourse these are just examples of my own setup but there are numerous other setups that look completely different. Search around the forums and you’ll probably find something that might inspire you (or you’d just blatantly copy all of it).

For my second Lovelace setup you can check the discussion here (don’t be afraid to ask questions, I will try to answer them as thoroughly as possible):

If you want to skip the screens and explanation you can go to:

I hope this information helps you.

1 Like

The limit is (almost) the starry sky :slight_smile: