What are ESP Web Tools?

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

Ever since ESPHome was acquired by Nabu Casa, expectations for the future of the open-source application kept rising. Yesterday, the first considerable changes to how ESPHome is used were announced, with one of them being the new ESP Web Tools. While ESPHome itself will greatly benefit from the ESP Web Tools, they aren’t just a big development for it, but any project that uses either the ESP8266 or ESP32 microcontroller.

The progress of installed WLED on to an ESP8266 board using the ESP Web Tools
ESP Web Tools being used by ESPEasy

While the name and developer might hint at this project being exclusive to ESPHome, that isn’t the case. Anyone can use the ESP Web Tools and two very popular projects, WLED and ESPEasy, are already using them. As the usefulness of the ESP Web Tools start to become obvious to developers, they will hopefully be integrated in to further projects.

Table of Contents

New terminology for working with ESP8266/ESP32

In an effort to make ESPHome and other projects relying on ESP8266 and ESP32 microcontrollers more accessible, the terminology used has been made less technical. No longer are we flashing a firmware, instead we are installing projects. As this terminology is being encouraged, it will be used in upcoming articles on this website, too.

WLED and ESPEasy have also taken up this terminology on their installation websites powered by ESP Web Tools, with both opting to the button “Install”. In the ESPHome dashboard, the “Upload Firmware” button has also been replaced by an “Install” button.

What do ESP Web Tools do?

Using the ESP Web Tools, makers, such as you and me, will be able to install projects on to a microcontroller directly from a browser. That’s right, you will no longer have to download a binary and then flash it using the ESPHome-Flasher.

The ESP Web Tools use the Web Serial API, which can connect to serial devices either through a serial port on a user’s system or through removable USB and Bluetooth devices that emulate a serial port. The latter is what an ESP8266 and ESP32 board will do. In layman’s terms, the Web Serial API allows websites to communicate with serial devices in the physical world.

ESP Web Tools limitations

Unfortunately, the ESP Web Tools aren’t perfect. Though it is at no fault of their own, the ESP Web Tools can only be used when connected using HTTPS. While this isn’t problematic for the likes of WLED and ESPEasy, it can be an issue for the ESPHome dashboard. If you are accessing the dashboard using HTTP, which I’m assuming most are, you will not be able to install any project using your browser.

A message from ESPHome informing the user that a browser installation is only possible if the dashboard is opened via HTTPS.

What will be disappointing to those trying to keep their private away from big tech, the Web Serial API is currently only available in Microsoft Edge and Google Chrome, both of which are Chromium-based browsers.

While testing the ESP Web Tools with both WLED and ESPHome, I have found that the installation speed will drastically slow down, whenever you have the window hidden. This issue is solved by opening the tab in its own window and having it open next to whatever you are currently working on.

How ESP Web Tools work in practice

In this example, I will be installing WLED, using ESP Web Tools, on a NodeMCU ESP8266 I use for testing purposes. To start things off, I will connect the board to my laptop using a Micro-USB cable and open up the WLED web installer. On the WLED web installer, there is only a single button titled “Install”. Once clicked, Chrome will prompt me to select a serial port. As I wasn’t sure which one to choose, I simply unplugged the NodeMCU and plugged it back in again. In this case, it was COM6.

A prompt from Chrome to the user to select a serial port
Using the WLED web installer to install the project on an ESP8266

And just like that, the WLED project will be installed on the microcontroller. There is nothing more I have to do. I don’t have to define which microcontroller and board I am using, and I don’t need to enter any credentials. The whole process took me no longer than two minutes.

ESP Web Tools: Early verdict

It’s no exaggeration to say that the ESP Web Tools could revolutionize the use of ESP8266 and ESP32 devices in the do-it-yourself IoT field. Any of the projects I’ve featured on this site could potentially be installed with a single click. The bar for entry into to world of cheap ESP8266 and ESP32 has been considerable lowered with the release of ESP Web Tools.

The YIO Remote Two, an alternative to Harmony, will integrate with Home Assistant

Get the new Fire HD 10 tablet (2021) for only US$80 on Amazon Prime Day