A single <script> tag. One custom element. Your visitors flash ESP32, ESP8266, and ESP32-S3 devices directly from the browser — no boot button, no IDE, no drivers, no uploads.
ESP Flash Button is a browser-based firmware installer you embed on your website. It uses the Web Serial API to communicate with ESP32, ESP8266, and ESP32-S3 microcontrollers — no software installation, no IDE, no USB driver configuration.
The entire flash process happens in the browser. Here's what happens when a user clicks your button.
Drop these into any HTML page. No build step, no npm, no framework.
<!-- Add this once, anywhere in your page --> <script src="https://esp-flash-button.pages.dev/esp-flash-button.js"></script>
<esp-flash-button manifest="https://yoursite.com/firmware/manifest.json" label="Install My Firmware"> </esp-flash-button>
slot="activate" to supply your own button element. The component keeps your styling and adds the flash logic.<esp-flash-button manifest="https://yoursite.com/firmware/manifest.json"> <button slot="activate" class="my-custom-btn"> Download Firmware </button> </esp-flash-button>
<script> document.querySelector('esp-flash-button') .addEventListener('flash-success', (e) => { console.log('Flashed!', e.detail); // e.detail = { chip, flashSize, duration, filesCount } }); </script>
A simple JSON file that tells the component what firmware to flash and for which chips. Host it on your server alongside your .bin files.
Access-Control-Allow-Origin: * to your server responses.
{ "name": "My ESP32 Project", "version": "1.0.0", "builds": [ { "chipFamily": "ESP32", "parts": [ { "path": "firmware.bin", "offset": 0 } ] } ] }
{ "name": "My Firmware", "version": "2.1.0", "builds": [ { "chipFamily": "ESP32", "parts": [ { "path": "bootloader.bin", "offset": 4096 }, { "path": "partitions.bin", "offset": 32768 }, { "path": "boot_app0.bin", "offset": 57344 }, { "path": "firmware.bin", "offset": 65536 } ] }, { "chipFamily": "ESP32-S3", "parts": [ { "path": "firmware-s3.bin", "offset": 0 } ] }, { "chipFamily": "ESP8266", "parts": [ { "path": "firmware-8266.bin", "offset": 0 } ] } ] }
| Attribute | Default | Description |
|---|---|---|
| manifest | required | Absolute URL to your firmware manifest JSON file. |
| label | "Install Firmware" | Label on the default button. Ignored when using a slotted button. |
| erase-first | false | Boolean attribute. When present, erases the entire flash before writing. |
| baud | 921600 | Flash baud rate. 921600 is fastest. Use 115200 for boards with problematic cables. |
| Event | Detail | Description |
|---|---|---|
| flash-success | { chip, flashSize, duration, filesCount } | Fired after firmware is written and device has reset. |
| flash-error | { title, message } | Fired if the flash process fails. |
The same battle-tested flash engine from SKR Electronics Lab's professional flasher, now available as an embeddable web component.
A detailed feature comparison. ESP Flash Button is the more capable, faster, and better-looking alternative.
ESP Flash Button supports all ESP32-family chips supported by esptool-js. Any board with a USB-to-serial converter works.
baud attribute if you have a problematic USB cable.slot="activate" attribute to supply your own button element. The component keeps your existing styles and adds the flash behavior.Your manifest and .bin files must allow cross-origin requests from the page embedding the button. Add these headers to your server:
# Apache (.htaccess) Header set Access-Control-Allow-Origin "*" # Nginx add_header Access-Control-Allow-Origin *; # Cloudflare Pages (_headers) /firmware/* Access-Control-Allow-Origin: * # Express / Node.js app.use('/firmware', (req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); });