Mixed GUI lovelace design but with yaml implementation?

I like using the GUI to experiment with cards. But if you use

lovelace:
   mode: yaml

then you can’t use the GUI. Is there a better way to use the GUI without changing this back and forth?

Why not just use the frontend?

Moe !
You’re gonna have to give him a bit more than that. :roll_eyes:

Where’s that smacked wrist emoji ? :rofl:

Why not JUST use the frontend?

Is that better? :wink:

Yes that’s SO much better. :rofl:

Future, I can’t help you much with this I Edit all my ui by hand

My only beef with the UI is when you go to the “raw” yaml is it is huge and unwieldy.

It’s long but I have section markers, clear card markers, and am consistent with my entities.
I use HA to automate my home not use HA as a big remote control, so the ui is less important for me

How do you create these markers?

I use Visual Studio Code (vsc) as an editor on my workstation (mine a Windows pc, I know, don’t berate me) I’ve loaded the home assistant plugins, the rainbow spaces plugins and the rainbow brackets plugins.
One of the things it does is give you a view of the whole file on the right hand side. This (for a big file) is far to small to read but it shows you the shape of the file.
Using blank lines a comment lines (ie staring with a hash #) you can see the start of sections, it’s not ideal but it works.
You can also look for a particular word in you full installation
Vsc loads your whole config, looks at syntax an report errors (even in code that works but maybe has spacing errors). It also does auto completion on ha entities, though I have a lot of entities and it takes a while to get down to the level where I can just click. But it does reduce errors overall.
Just my thoughts

I think the issue is that he is using the GUI editor and when using the “raw” link the GUI editor puts everything in one long yaml configuration file and completely removes comments so there is no way at that point to insert “markers”.

But to answer the original question…

As far as I know there is no way to make the RAW editor code into smaller more manageable chunks.

you either have to use the GUI with the one huge file or yaml without the GUI.

Now, that said, I know others here use a sort of “hybrid” in which they use the GUI to make changes and then copy the changes to a yaml file that they can edit and then paste back in to the raw file.

TBH, it sounds like a big PITA to me to do it like that but it works for some people.

I just use yaml mode. It’s easy enough to write the code and I have a ready spot that I can go to make changes and backup things without needing to jump thru hoops to do it.

Yeah, I’m going the opposite route. I’m building yaml (with the gui sometimes) and then inserting into the GUI. Since I’m almost always doing an entire view at a time, I have to go hunt for the existing one. Which is why I’d love to see view marking comments.

Can you switch back and forth between the two? I’ve tried and messed everything up so badly I’ve had to restore my VM.

What’s the end benefit in doing that you are trying to achieve?

Take advantage of the GUI to design views, and then use the result in !include files for readability.

that sounds very similar to this:

but you are just starting out with a yaml file instead of the raw config.

yes, you can (as you have found) but then it’s easy to get things confused and then you get lost in the “am I running yaml or GUI” situation with a high possibility of error (as you have found out).

I would be surprised if they ever change the GUI editor to include comments and I don’t think they would ever change the GUI to allow different chunks of files to be saved.

When Lovelace was first introduced it took a several complaints to be allowed the use of !includes in the ui-lovelace.yaml file. In the beginning it was all designed to be just one long monolithic config file whether in GUI or yaml mode.

1 Like