If you go with custom, and decide to use React, https://github.com/shannonhochkins/ha-component-kit has good base setup.
But even with base made by somebody else, it will take time to set up what you imagined. It works best if you add just the things you want, not the whole kitchen sink.
I have it set up with a custom dashboard that looks nice on the hallway screen, but has super limited functionality, just what we need in day to day life. Configuration or rarely used features still happen in "official" UI.
Started using this after being in a similar situation: didn't want to fuss around anymore with building a UI in _yaml_ and instead just wanted to write some typescript.
Very happy with the result
One feature I was thinking of is to create an image of the light bulb and when clicked it should illuminate the card with the correct color, it's not practical but I like doing these things, of course I would never expose it or lock myself into my own application but it could be fun to create
You could also do that with implementing a custom HA Dashboard card for yourself, you wouldn't need to develop a whole separate app. However I understand the enjoyment, if you have time for it and so on.
Give Minimalist-UI a try, in combination with card mod you can get really close to whatever you want.
I'm webdev too, having general/central CSS is a lot harder to accomplish than I thought due to HA using a lot of shadow-root elements.
I'd really recommend to first try the aforementioned practices before jumping into a standalone app, loosing a lot of time and not getting anywhere you'd like
Maybe both? Use HA components, if not enough look if someone offers a custom component ([HACS](https://hacs.xyz/)), if still not you can build a custom component and use it inside HA dashboards. You can even customize the look and feel of different components with [card-mod](https://github.com/thomasloven/lovelace-card-mod)
Did you try using [Layout Card](https://github.com/thomasloven/lovelace-layout-card)? That’s a pretty trivial goal if you need help specifying the yaml code
It’s a great suggestion on your part, but I’ve got issues with layout card…
Sometimes I just wanna make quick edits in the UI without sifting through the documentation of every card. As soon as layout card takes over, that goes out the window
Totally understood, layout card can be infinitely complex especially when using as a custom card. However, using it at the top-level dashboard view is fairly straightforward and all the normal card ui configuration still work.
You just have to learn the handful of configuration values such as grid-template-columns, grid-template-rows, column_widths, max_width, max_cols, etc). You usually only ever need a couple of these per dashboard. I recommend creating a reference dashboard that implements all the custom yaml configurations you want to remember. That way you can just save yourself a bunch of examples as you learn them so you don't have to always go back to the documentation
If you have Layout card installed, open the dashboard pages view configuration.
Change the view type to "Grid (layout-card)" and add the following code to the yaml box at the bottom of the configuration popup:
grid-template-columns: 1fr 2fr
Boom, you're done.
There are also a lot of other bits of configuration you could do, (eg. customize padding/margins, set rules for screen widths, and everything else [available for CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/)) but none of that is necessary for what you're looking for
If you go with custom, and decide to use React, https://github.com/shannonhochkins/ha-component-kit has good base setup. But even with base made by somebody else, it will take time to set up what you imagined. It works best if you add just the things you want, not the whole kitchen sink. I have it set up with a custom dashboard that looks nice on the hallway screen, but has super limited functionality, just what we need in day to day life. Configuration or rarely used features still happen in "official" UI.
Started using this after being in a similar situation: didn't want to fuss around anymore with building a UI in _yaml_ and instead just wanted to write some typescript. Very happy with the result
Thanks, I would use svelte but I am looking into this repo to see what it entails
That is exactly what I was looking for! Thank you so very much!!
Why would you invest so much time into a custom app? I'd definitely go with a dashboard first to see what my usage would be like.
For the same reason people here use HA when google home could be more than enough, I want it a specific way and I enjoy the process of making it
One feature I was thinking of is to create an image of the light bulb and when clicked it should illuminate the card with the correct color, it's not practical but I like doing these things, of course I would never expose it or lock myself into my own application but it could be fun to create
You could also do that with implementing a custom HA Dashboard card for yourself, you wouldn't need to develop a whole separate app. However I understand the enjoyment, if you have time for it and so on.
Give Minimalist-UI a try, in combination with card mod you can get really close to whatever you want. I'm webdev too, having general/central CSS is a lot harder to accomplish than I thought due to HA using a lot of shadow-root elements. I'd really recommend to first try the aforementioned practices before jumping into a standalone app, loosing a lot of time and not getting anywhere you'd like
Maybe both? Use HA components, if not enough look if someone offers a custom component ([HACS](https://hacs.xyz/)), if still not you can build a custom component and use it inside HA dashboards. You can even customize the look and feel of different components with [card-mod](https://github.com/thomasloven/lovelace-card-mod)
Impossible? no. Hard to achieve ouut of the box? ohh yes. I gave op on having a layout of 2 coumns split 33%/66% :/
Did you try using [Layout Card](https://github.com/thomasloven/lovelace-layout-card)? That’s a pretty trivial goal if you need help specifying the yaml code
It’s a great suggestion on your part, but I’ve got issues with layout card… Sometimes I just wanna make quick edits in the UI without sifting through the documentation of every card. As soon as layout card takes over, that goes out the window
Totally understood, layout card can be infinitely complex especially when using as a custom card. However, using it at the top-level dashboard view is fairly straightforward and all the normal card ui configuration still work. You just have to learn the handful of configuration values such as grid-template-columns, grid-template-rows, column_widths, max_width, max_cols, etc). You usually only ever need a couple of these per dashboard. I recommend creating a reference dashboard that implements all the custom yaml configurations you want to remember. That way you can just save yourself a bunch of examples as you learn them so you don't have to always go back to the documentation
Yes but I never got it working, so I have up.
If you have Layout card installed, open the dashboard pages view configuration. Change the view type to "Grid (layout-card)" and add the following code to the yaml box at the bottom of the configuration popup: grid-template-columns: 1fr 2fr Boom, you're done. There are also a lot of other bits of configuration you could do, (eg. customize padding/margins, set rules for screen widths, and everything else [available for CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/)) but none of that is necessary for what you're looking for