Close
0%
0%

ESP-GenUI

A visual diagrammer that turns a node graph into a complete ESP32 Arduino/ESP-IDF web-server sketch. No toolchain.

Similar projects worth following
ESP-GenUI lets you **draw** the website your ESP32 will host — pages, cards,
gauges, sliders, GPIO toggles, a camera feed — by dragging nodes onto a canvas
and wiring them together. When the diagram looks right, it generates a complete
Arduino sketch or ESP-IDF code, and then optionally **compiles and flashes it to a real board over USB
without leaving the browser(Chrome/Edge).** No Arduino IDE, no local toolchain, no
`arduino-cli` install. Or, you can copy/paste the generated web code into your existing Arduino IDE/PlatformIO project.

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.

  • Using the GPIO/Camera Widgets Tutorial

    Geoffrey Wells1 天前 0 comments

    Added a new quick tutorial that shows how to use the GPIO and Camera widgets:

  • ESP-IDF Support Added

    Geoffrey Wells5 天前 0 comments

    ESP-IDF Support Added!

    Well, support for ESP-IDF has been added.  Wasn't sure if we should do this because the ESP-IDF framework is significantly more complex than the esp32 Arduino framework.  But wait...that's even more reason to do it, because it is that much harder, you don't then want to still have to figure out how to do an embedded UI.  So, here we are, all of the Arduino Ui widgets are now available for the ESP-IDF target.  Enjoy, and please provide feedback! Stay tuned to the youtube channel for more How-Tos: ESP-GenUI

View all 2 project logs

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates