Geoffrey Wells
The full loop, all in one tab
1. Design — drag nodes, wire parent→child to compose pages.
2. Preview — a live in-browser render shows exactly what the device will serve from a browser or mobile device.
3. Generate — get a real `.ino` plus `EmbeddedSite.h` / `Callbacks.h`, with
WiFi setup, route registration, and HTML rendering already wired together.
4. Connect an ESP32 board over USB (Web Serial).
5. Compile — the sketch builds server-side via `arduino-cli`, with the build
log streamed back live.
6. Flash— the merged binary is written straight to the board and it reboots.
Prefer your own setup? Download the sketch as a ZIP and open it in the Arduino IDE.
How it works
- The editor, live preview, and Web Serial connect/flash all run client-side
Web Serial means you need Chrome or Edge. Safari does not support the Web Serial interface.
- The code generator runs on the server, so the build happens against the latest
ESP32 core in an isolated per-build sandbox.
- Hardware nodes are pin-aware: GPIO, PWM, ADC, Servo, NeoPixel, and the
ESP32-CAM feed generate the firmware for you — no callback to write. The
widgets that do need logic drop a clearly-marked stub into `Callbacks.h`,
keyed by node ID so your edits survive a regenerate.
What you can build (44+ node types)
- Layout: Page, Header, Footer, Card, Tabs/Accordion, Columns/Grid, Modal/Dialog
- Display: Gauge, Chart, Table, Stat card, Status LED, Progress bar, Alert,
Badge, Log/Console, Device-info panel, NTP clock, Camera (MJPEG)
- Controls: Button, Button group, Toggle, Slider, Stepper/number, Select,
Color picker, Form
- Hardware: GPIO (digital I/O), PWM (analog-out), ADC (analog-in), Servo,
NeoPixel/WS2812
- Connectivity & system: Captive-portal/STA WiFi, WebSocket, MQTT, mDNS
(`device.local`), outbound Webhooks, HTTP Basic-Auth gate, OTA firmware/FS
upload, file manager, Preferences storage, JSON API endpoints, Reboot
Why
Standing up a configuration or dashboard page on an ESP32 means hand-writing
route handlers, HTML strings, and WiFi boilerplate in C++ every single time.
ESP-GenUI turns the boring scaffolding into a diagram and hands the result back
as plain, editable Arduino code — so you spend your time on the part that's
actually your project.
Try it: ESP-GenUI · Chromium or Edge browser required for the USB connect/flash
features, otherwise all major browsers are supported.
Louis H
konsdor
Valeria