Diagram your ESP32 Web Server.
Generate the Arduino sketch or ESP-IDF.
Drag modules onto a canvas. Wire them together. Click Generate and download a complete source code folder — class, callbacks, demo wiring — ready to paste into the Arduino IDE or code editor of choice, or compile the demo from here.
What it does
Visual diagram editor
Drag pages, cards, forms, gauges, charts, storage, and more onto the canvas. Connect web elements together to show data flow. No coding required to design your embedded website.
One-click code generation
Click Generate and the server emits a complete Arduino sketch
folder: Notes.md, Callbacks.h,
EmbeddedSite.h, and demo.ino — all the code
and styling for the website, plus a demo driver .ino and a
diagram-aware library list.
Live preview
See what the ESP32 will serve — same CSS, same layout — before you flash anything. The preview pane mirrors the device on a mobile phohe/tablet, or desktop browser.
Callback stubs
User-editable stubs for every gauge, chart, form, and WebSocket node are keyed by node ID, so renaming a module in the diagram never breaks your callback edits. A header comment shows the human-readable name above each stub.
Theme the generated site
Pick the color palette for the ESP32's served pages. The same
theme flows into both the live preview and the embedded
_htmlShell() CSS.
Choose your server lib
Default to the built-in WebServer for simplicity, or
switch to ESPAsyncWebServer in Config for better
concurrency (and to unlock WebSocket support). Each generated
sketch only pulls in third-party libraries it actually uses
(WebSockets, ArduinoJson)
— install instructions for both
Arduino IDE and PlatformIO ship in a Notes tab next to the code.
Describe it in plain English
Don't want a blank canvas? Click Describe, type what you're building — "a grow-room controller with a soil-moisture gauge, a fan slider, and a WiFi setup portal" — and AI assembles a matching diagram: pages, widgets, and the wiring between them, ready to preview and tweak.
Compile & flash over USB
Take a diagram all the way to a running device without leaving the browser: Connect an ESP32 over USB (Web Serial), Compile on the server, and Flash the merged image straight to the board. No Arduino IDE or toolchain install. Chrome or Edge on desktop.
Arduino or native ESP-IDF
Pick your target in Config. The default emits an Arduino sketch;
switch to native ESP-IDF and the same diagram becomes
a complete esp_http_server project — pages, WiFi, GPIO,
storage, MQTT, WebSocket, camera, and OTA — built with
idf.py, no Arduino core.
What it does not
Most embedded UI frameworks try to do everything: drag-and-drop editors, massive component libraries, complex installation steps, cloud integrations, and heavyweight runtimes. That power comes at a cost — large downloads, steep learning curves, high memory usage, and tooling that feels oversized for microcontrollers like the ESP32.
This project takes a different approach. It's a lightweight web UI generator, simple to install, no extra libraries, WYSIWYG design, and designed for users who want to build quick, clean browser-based interfaces without pulling in an entire ecosystem.
Instead of trying to be a full enterprise design suite, it focuses on the essentials. The goal is practicality over complexity.
A glance at the editor
Three panes. Modules on the left. Canvas in the middle. Inspector and generated code on the right.
Pricing
Start building for free — no credit card, no install.
- 1 Saved Diagram
- 60 Objects Per Diagram
- 15 Code Generations Per Day
- 10 Compiles Per Day
- 5 AI Generations Per Day
