HaDe - A simple Home Assistant Dashboard Editor

I’ve created a small and simple alternative dashboard editor based on vanilla JavaScript, CSS, and HTML. It allows you to easily create custom DOM structures, styles, and functions for every single DOM element you add. Each element can also contain any attribute value from any entity.

It allows you to use every entity attribute as a fully styleable and customizable HTML element. Just create your own template (or use an existing one), set the CSS, and add it to your custom-generated elements inside your custom dashboard. Take full control of the output — set custom IDs, classes, and attributes on every single DOM element you’re using for the custom dashboard.

It’s the first time I’ve ever created something like this, so please be aware that there may be errors — but I’m happy to fix them.

Please keep in mind: to use this, you’ll need to write at least a little bit of CSS, but it gives you the freedom to do almost anything within your customized dashboard. It’s entirely up to you. There are no limitations. HTML, CSS, and JavaScript can be used just like on a normal webpage — no :root or inline definitions required. Just treat it like a standard HTML/CSS/JS page. No selector restrictions of any kind.

If everything works well, maybe people will later be able to easily share their templates with others — it should be as simple as copy and paste.

It provides a simple templating system and an easy-to-use interface. Just create a new dashboard using an <iframe>, and you’re done.

This is currently the very first release, and I hope you have fun with it. If so, please let me know.

This is just minimal basic styling — there are no limits! Simply switch to a template of your choice at any time, for any element, via the UI.

2 Likes