Diagram your ESP32 Web Server.
Generate the Arduino sketch.
Drag modules onto a canvas. Wire them together. Click Generate and download a complete sketch folder — class, callbacks, demo wiring — ready to paste into the Arduino IDE, 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 three-file Arduino sketch
folder: Callbacks.h, EmbeddedSite.h, and
demo.ino. All the code and styling for the website, plus a demo driver .ino.
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
(WebSocketsServer, ArduinoJson)
— install instructions for both
Arduino IDE and PlatformIO ship in a Notes tab next to the code.
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
- 10 Objects Per Diagram
- 15 Code Generations Per Day
- 10 Compiles Per Day