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.
What it does
Visual diagram editor
Drag pages, cards, forms, gauges, charts, storage, and WebSockets onto the canvas. Connect ports to model containment and data flow.
One-click code generation
Click Generate and the server emits a three-file Arduino sketch
folder: Callbacks.h, EmbeddedSite.h, and
demo.ino.
Live HTML preview
See exactly what the ESP32 will serve — same CSS, same layout — before you flash anything. The preview iframe mirrors the device.
Stable callback names
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.