A premium, state-of-the-art WebSerial ESP32 Firmware Flasher web application built with React, TypeScript, Vite, and Adobe React Spectrum S2. This dashboard provides a highly refined, corporate-industrial interface to write, erase, and debug firmware streams on Espressif ESP32 microcontrollers directly from your web browser—no local command-line tools or drivers required.
🔗 Live Web Application URL: https://ajsb85.github.io/bushers/
The application layout is modeled after the Stitch Design System featuring a high-density, hybrid fixed-fluid layout tailored for industrial engineering dashboards:
- Aesthetic Harmony: Features an elegant corporate dark/light palette with polished glassmorphic surfaces, subtle hover micro-animations, and fluid transition systems.
- Dual-Theme Dark Mode: Built with deep, curated HSL color tokens mapped directly from Tailwind CSS (
background: #1A1B1E,primary-container,status-success, and outline variants). - Xterm.js Status Monitor: Integrates a real-time, low-level, high-contrast console stream designed with a retro-industrial look, leveraging full terminal emulators with ANSI color sequences.
- ⚡ WebSerial Connection Handshaking: Robust, sandboxed hardware communication directly from compatible browsers (Chrome, Edge, Opera) with fully adjustable Baudrates (up to 921600).
- 📺 Xterm.js Terminal Console: Seamlessly displays real-time execution streams from
esptool-jswith flawless support for ANSI escape color codes, logging streams, and carriage return carriage-overs (\rprogress indicators). - 📦 Atomic/Composite S2 Interface: Built entirely with
@react-spectrum/s2components—including premium high-contrast action buttons, dense offset tables, checklist toggles, and reactive progress bars. - 💾 Preloaded Firmware selection: Instantly selects and flashes preloaded official firmware binaries (including partitions, bootloaders, boot app buffers) or allows custom drag-and-drop local uploads.
- 🛠️ Hardware Controls: Direct interface to trigger quick actions like chip initialization, hardware resetting (via DTR toggling), and full-chip flash memory erasing.
- 📱 Responsive 12-Column Grid: Dynamic fluid sidebar-content layout that formats beautifully across dual-monitor desktop screens and mobile handheld interfaces.
To flash your ESP32 device using the online flasher, follow these simple steps:
- Connect your ESP32 Device: Connect your ESP32 board to your computer's USB port.
- Select Baudrate: Open the Live Web Application, and select your desired flashing speed (recommended:
460800or921600for high-speed writes). - Establish Serial Bridge: Click the CONNECT button in the sidebar. A browser prompt will appear. Choose the correct USB-Serial port (e.g.
Silicon Labs CP210xorCH340) and click Connect. - Confirm Binary Files: Choose either:
- Default Binaries: Select the desired checkboxes in the Firmware offsets table (bootloader, partitions, app).
- Single Binary Mode: Toggle the switch to flash a single consolidated
merged.binfile directly at offset0x0. - Custom Upload: Drag and drop your own custom compilation binary file and specify its hex address offset.
- Trigger Flash Sequence: Click the high-contrast FLASH FIRMWARE button. The terminal console will display connection logs, erase sectors, write data blocks, and verify MD5 hashes in real-time.
- Verify & Run: Once progress reaches
100%, the console will report success and automatically reset your board into user-application mode.
- Core Logic: React 19, TypeScript 6, Vite 8
- Component System: @react-spectrum/s2
- Styling: Tailwind CSS v3 & Vanilla CSS
- Flasher Bridge: esptool-js
- Terminal Interface: @xterm/xterm & @xterm/addon-fit
- Hashing: crypto-js (MD5 validation)
To clone, set up, and run the project locally on your machine, perform the following steps:
-
Clone the Repository:
git clone https://github.com/ajsb85/bushers.git cd bushers -
Install Dependencies:
npm install
-
Run Development Server:
npm run dev
Open your browser and navigate to the address displayed in the terminal (usually
http://localhost:5173/). -
Build Production Bundle:
npm run build
The static optimized production build is generated inside the
dist/directory.
Please read our CONTRIBUTING.md to understand how you can submit bug reports, feature requests, or propose design upgrades to the project.
This project is open-source and licensed under the Apache License 2.0. See the LICENSE file or head over to the Apache Official Site for detailed terms.
Developed with ⚡ by the Bushers Adaptive Team.