How to access the hass object in the frontend?

Development
1

I am interested in making some changes to the frontend. I have followed the development guide and have a working dev environment in Visual Studio with dev containers for core and frontend, but there doesn’t seem to be a lot of documentation on how the framework is actually set up or how to make changes. For example here are some snippets from the documentation:

“The frontend passes a single hass object around.”
“In order to interact with hass in your code, make sure it is passed to your code correctly.”

But it doesn’t specify exactly how this is done, how do I get the hass object in the frontend code, like for example I am trying to make modification to the Gauge element (ha-gauge.ts). Does anybody have any examples?

2

Did you ever find a solution to this?

3

No. I managed to not having to use the hass object at all.

4

Oh dang. I just figured out how to do it. It’s ridiculously simple, yet not documented anywhere I can find. I worked it out with Chat-GPT revealing the answer in incorrect information :rofl:
You can access the hass object like so:
document.querySelector('home-assistant').hass
And to get an entity’s state:
document.querySelector('home-assistant').hass.states['<entity_id>'].state
I know it’s a year late, but hopefully this will help you in the future.

1 Like