Headless Hass Frontend

Dear community,

I’m in the process of creating a headless frontend solution. Meaning a totally separate application with its own look and feel, inspired by the Homey dashboard.

Background info

I’ve been working a long time on creating custom dashboards with LovelaceUI. One of my projects for example was Nolu.

Since then build on top of that and time and time again kept running into the limitations of working with yaml based code. For me the the yaml and lovelace ui way of working felt too bloated and restricting me in my ideas. Even though the way of creating custom frontends within HA with lovelace ui works for a lot of people I needed something closer to ‘real’ frontend development as I’m a (frontend) developer by profession. Working with yaml’s and the templating code has been a terrible (developer) experience imho.

What does this project consist of?

The project consist of a custom NextJS application that connects with HomeAssistant through the official home-assistant-js-websocket library.

Authentication works pretty straight forward. Meaning you’ll be prompted to enter your home assistant url or nabucasa url and you’ll be redirected to the homeassistant login page of your running server. After login you’ll be redirected back to the custom NextJS application. Entities, devices, etc. are all fetched from a real HomeAssistant server. Everything works amazing and I will continue adding features. Since the application works with websockets the data is updated in realtime. States change and devices can be turned on/off.

Feedback appreciated

What do you guys think? Do you think this has a place in the whole HomeAssistant universe? I’m looking forward to your suggestions, opinions.

The eye candy

Last but not least, how the hell does this look? Well here you go!


2 Likes