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.

  • Draw With AI Feature

    Geoffrey Wells • 10/01/2026 at 22:45 • 0 comments

    As if the Draw feature that give you a canvas to create your own graphics for your esp32 device, we now have the ability to let AI help you draw complex images that can map to sensor devices, or custom callback code. Enjoy!

    Draw With AI Demo

  • New Feature "Draw"

    Geoffrey Wells • 09/21/2026 at 21:03 • 0 comments

    Draw anything on your board's page - Every other widget asks your code for data: a number, a series, some rows. The Draw node hands your callback a canvas instead, for the dial, diagram or display no fixed widget covers.

    The drawing kit - Lines, rectangles, rounded rectangles, circles, triangles and text, plus paths for waveforms and trend lines. Set the stroke, fill, width and text alignment as you go.

    Live, and light - Set an update interval and the page redraws on its own. A realistic drawing adds about 1 KB of flash, and the class only ships when a Draw node is on the canvas.

    Check out the Arduino Radar Draw Example on ESP-GenUI

  • ESP-GenUI Mobile App For Android

    Geoffrey Wells • 09/04/2026 at 20:16 • 0 comments

    The Android app is live!

  • Coming soon - One app for every device you generate

    Geoffrey Wells • 08/26/2026 at 15:14 • 0 comments

    Today, everything ESP-GenUI emits is a web server. You draw the diagram, the server generates the Arduino sketch or the ESP-IDF project, you compile and flash it over USB from the browser, and the ESP32 serves its own UI page. That loop works — as long as the board has a network to join and you know which IP to point a browser at.

    Soon the next major release adds a target that needs neither. The same diagram compiles to a BLE peripheral, and a single iOS/Android app drives it. Not a generated app, not a template you fill in — one mobile app, for any device you generate.

    The mobile app connects, reads the manifest, and builds a native screen out of it: gauges, sliders, GPIO toggles, charts, schedules, NeoPixel colour pickers, tabs, cards — in the theme colours you picked in the editor. Flash a different diagram and the same app shows a different device.

    If you prefer the WiFi implementation use the mobile app's Wi-Fi setup over Bluetooth, for the hybrid case: SSID and password go to the device over BLE, and you watch it join and report its IP back.

  • Play That Funky Music

    Geoffrey Wells • 08/01/2026 at 00:18 • 0 comments

    Added a quick demo using the new Piano widget to play sounds on the Seeed XIAO MIDI Synth module:

  • Happy Birthday

    Geoffrey Wells • 07/27/2026 at 01:10 • 0 comments

    Yay, ESP-GenUI is 1.0 today!

  • Save To Folder Quick Demo

    Geoffrey Wells • 07/23/2026 at 18:02 • 0 comments

    I've created a quick demo of the Save To Folder feature.  This allows you to save the generated source code project directly to local disk without having to unzip/copy/paste: 

    Youtube Save To Folder Feature

  • Beta testing: where users discover features the developers never implemented

    Geoffrey Wells • 07/20/2026 at 00:08 • 0 comments

    Just pushed out a huge update as we hurdle towards production.  Lots of tweaks under the hood:

    • a few...many bug fixes, and a bit of redesign
    • Increased the free daily credit allotment a bit
    • A few new features based on feedback
    • For Chrome and Edge users, you can now "Save to Folder" your generated code, and the browser will save the generated code files to your local filesystem.  No copy/paste, or Zip/Zap needed.  "Save to Folder" and point your favorite IDE to the local directory.  Click save to folder after any diagram changes/regenerate to keep your local files in sync.  If you make any local changes, clicking save to folder will give you a merge UI to merge any local filesystem changes that you want to keep.  What's a merge...there's a help document.  Started work on a Build Guide area on the site to do walk through examples using real hardware.  The first is using an Olimex 4 relay board for a lawn sprinkler example: ESP-GenUI Build Guides If someone is interested in creating one of their own to submit, let us know: admin@g9six.com

  • AI For Your UI

    Geoffrey Wells • 07/11/2026 at 05:55 • 0 comments

    I'm excited to announce the DESCRIBE feature in EspGenUI.  Now you can describe your project idea, and EspGenUI will build you a UI based on context.  

    For example, you can tell it: 

    • "Reef tank controller: temp + pH gauges, pump toggles, LED colour picker"
    • "water tank level monitor"

      The describe feature can help you get started when you're not sure what you want, or just save time.  

    Watch the tutorial: ESPGenUI AI Describe Tutorial

    Try it out: ESPGenUI

  • Using the GPIO/Camera Widgets Tutorial

    Geoffrey Wells • 07/02/2026 at 00:09 • 0 comments

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

View all 11 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