Esphome web ui black screen for validate, install, and log

ESPHome shows blank black validate, install, and log window for every device. ESPHome is installed on the latest stable HAOS on raspberry pi. I did a fresh install completely from scratch and still have this problem. I can program my ESP8266 module with VSCode (VSCodium) with no problem. The configuration log shows expected activity and appears to be doing something, but the web ui interface has a black display window.

Am I viewing a black text on black screen display?
Can I change either the screen color or text color?

1 Like

I originally posted this under HassOS because I thought the problem could be with the operating system text configuration. I found others with this problem, but never found a solution. I spent all week on this with no success.


I figured out a work around that lets me see the text on the black window in firefox:

  1. In ESPHome: OPEN WEB UI or click the ESPHome icon in left sidebar.

  2. Click “Validate” in any configuration.

  3. Black window with no text is displayed.

  4. Click mouse right in black window and a menu pops up.

  5. Click “This Frame” → “Only Show This Frame” in menu.

  6. The ESPHome window is reloaded without a sidebar on the left side.

  7. Click “Validate” in any configuration. [Again]

  8. Black window shows up, this time there is text in it.

My guess is that somehow embedding the ESPHome web ui inside the home assistant ui is broken on current firefox browsers. Anyway, now I can see what is happening in ESPHome and make adjustments to my configurations.

Try clearing your browser cache.

Already tried that - no change.

Having the same problem here but only in Firefox browser. Using another browser it works out of the box. @thebitpit are you also using Firefox?

I am getting a similar issue. Home Assistant Ingress seems broken

From the supervisor log:

21-10-15 00:14:31 ERROR (MainThread) [supervisor.api.ingress] Ingress error: Cannot connect to host ssl:default [Connect call failed ('', 65116)]
21-10-15 00:14:37 ERROR (MainThread) [supervisor.api.ingress] Ingress error: 403, message='Invalid response status', url=URL('')

It helps if you connect to it directly

HI Mac Michales,

I have chrome (and edge) and I am also getting a black screen. The option you mention in nr 5 doesn’t appear for me. Do you know how to resolve this for chrome?

Highly appreciated!

I’ve got the same issue, black screen, but I see it in Firefox, Edge, and Chrome and the Firefox workaround does not seem to work for me. I see this with Validate, Install, Log, and Download. Only “edit” shows me a white screen with text in it. When I inspect the black window and look at the underlying code, I only see a blank div tag with no content, which leads me to believe that something else is going on for me. <div class="log"></div> Not really sure what to do except maybe rip ESPHome out and reinstall it again.

In case it helps anyone, I think I narrowed down my issue. When trying to access ESPHome outside of my home network (coming in via a duckdns url), it doesn’t look like ESPHome handles that out of the box. I’m sure there is probably some sort of workaround config setup, but the easiest solution for me seems to be to make sure I’m connecting directly to the HA instance with the local reference rather than the global URL.


Hi Brin, thanks! This work-around works for me too.

1 Like

Hi Brin,
Thanks for that, connecting locally was what I needed as well. :slight_smile:

There is still this problem. I can’t connect remotly to esphome (black screen without text). Does anyone trying to fix it?

Also having the same issue, looked at the ESPHome addon log and saw this error

2022-12-22 11:20:02,039 ERROR Uncaught exception GET /info?configuration=esphome-web-5509cb.yaml (
HTTPServerRequest(protocol='http', host='', method='GET', uri='/info?configuration=esphome-web-5509cb.yaml', version='HTTP/1.1', remote_ip='')
Traceback (most recent call last):
  File "/usr/local/lib/python3.9/dist-packages/tornado/", line 1711, in _execute
    result = method(*self.path_args, **self.path_kwargs)
  File "/esphome/esphome/dashboard/", line 133, in decorator
    return func(self, *args, **kwargs)
  File "/esphome/esphome/dashboard/", line 158, in decorator
    return func(self, *args, **kwargs)
  File "/esphome/esphome/dashboard/", line 807, in get
AttributeError: 'NoneType' object has no attribute 'to_json'
2022-12-22 11:20:02,044 ERROR 500 GET /info?configuration=esphome-web-5509cb.yaml ( 7.52ms

i dont know what i did to get this working just now, i thought it was something to do with different versions of python being installed on the host so i started messing around with trying to install a SSH certificate to get into the Host CLI but then installed Home Assistant Community Add-on: SSH & Web Terminal instead as it was an easier way to get Host cli access and for some reason its working the ESPhome screen is now working and showing actions for updating, compiling, etc…

Update: it stopped working again same error just a couple of hours later, i reimaged my machine with fresh install of HA OS and same error message straight away.

I am having the same issue. I’ve been using Home Assistant for years on RPi but just now decided to take ESPHome for a spin. The validate, install, and log modals are all blank when running through my nginx proxy but work fine when directly connected without SSL on port 8123.

Looking at the network traffic in the browser tools, I see the WebSocket disconnects immediately when on the nginx proxy.

The SSL traffic is also port fowarded by my OPNSense router. The WebSocket traffic for other requests such as streaming the CPU and memory metrics works fine.

Found this is the supervisor logs

23-06-09 15:59:18 ERROR (MainThread) [supervisor.api.ingress] Ingress error: 403, message='Invalid response status', url=URL('')

I have no idea where is coming from. This is not my WAN IP or any LAN IP.

I found ESPHOME and NGINX Proxy Manager SSL proxy HA addon don't play nicely · Issue #4327 · esphome/issues · GitHub but I’m using the official “NGINX Home Assistant SSL proxy” add on and it’s working great otherwise so I’m hesitant to mess around with that.

OK so I ended up switching from the “Let’s Encypt” + “NGINX Home Assistant SSL proxy” add-ons to the “Nginx Proxy Manager” add-on and added the custom location and proxy_set_header directive. Now it’s working as expected.

This was also failing for me (Chrome / installed app on PC, using NGINX SSL Proxy addon), but worked if I accessed it through the unproxied IP and port. Other addons were all working fine.

The verify/compile endpoints are websockets, and the frontend was connecting to the right URL, and getting a 101 status correctly, but the supervisor logs showed:

23-07-13 09:40:53 ERROR (MainThread) [supervisor.api.ingress] Ingress error: 403, message='Invalid response status', url=URL('')

This initially led me to this post:

Sadly, that config is already included on the NGINX SSL Proxy addon config, so this didn’t help.

I ended up using a sniffer to intercept the connection between the supervisor and the esphome container, and this is what happens:

HTTP/1.1 403 Forbidden
Cross origin websockets not allowed

It seems that the ESPHome container requires the Origin and Host headers to match, including the port, and the default config doesn’t add the port to the Host header, but it’s present on the Origin header.

I fixed it updating the solution on the link above taking this into account. So, to fix this, make sure that default is uncommented on the customize config of the NGINX addon, and create a file at /share/nginx_proxy_default_ingress.conf, with this content:

location /api/hassio_ingress {
    proxy_set_header Host $http_host;
    proxy_redirect http:// https://;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_set_header X-Forwarded-Host $http_host;

This is exactly the same config used for the root location on the NGINX SSL Proxy addon, just replacing $host with $http_host on the 2nd rule.

I’ll try to get it fixed on the addon itself, but in the meanwhile, this makes it work correctly.


I just added a rule to the firewall to gain access to the container with esphome

iptables -I INPUT -i hassio -j ACCEPT
1 Like

Thanks for that tip. That’s helped me with this problem.