These days, a lot of embedded projects feature some sort of screen, and a screen often creates a desire for a nice user interface. [Geoffrey Wells] has created a tool for developing web interfaces for the ESP32, named ESP-GenUI.
The aim was to make UI development as easy as possible for this platform. ESP-GenUI allows the creation of a website by dragging various nodes on to a canvas and linking them up to create the desired web interface. There are nodes for GPIO control, camera feeds, gauges, and all sorts of other common elements for quickly putting together dashboards and control panels. All this is done from within the browser, and the code generated by the tool can even be flashed without having to open any external tools. Alternatively, it can spit out Arduino code that you can open and flash from within the IDE. You can try the tool out yourself right here.
We’ve featured some other great resources for developing embedded user interfaces, like this highly-flexible display library for the ESP32. Feel free to espouse on your own favorite tools and techniques in the comments.
Nope. Been there, done that 35 years ago using LabView. Did it again last year as a favor to a former client.
Graphical system design suck. Period. Full stop. Odin will punish you and deny entrance to Vahalla for using this stuff.
I deeply admire the depth of your explanation for your opinion.
Because the comments section on hack a day is open to general discussion with exhaustive back and forth allowing broad communications, while allowing participants to delve into the weeds of issues and hash out concepts solutions and alternatives.
That is a dependent clause, and therefore a sentence fragment.
On this bus, all bozos we are.
To anyone who forces the use of such—may all of your hashes collide.
I wish there was a quasi-standard UI format for designing windows and buttons. Qt is very close to ideal, at least for me and I feel very comfortable using it to develop applications for desktop. For android I mostly rely on android-studio which can be hit or miss (usually miss)
I don’t really like web technologies for making UIs because they feel different than native applications. I don’t like that. I’m sure its just some kind of undiagnosed obsessive disorder on my part. Still, can’t like them
Web technologies for interface design is a GUI rendered on top of a Document Object Model. Maybe that’s why. Don’t do that.
Maybe you’re overthinking it. HTML/JS, unstyled works across all browsers, there is a default specification. ESP32 just serves up those HTML files to be displayed (normally from a string). Hit the button and a post handler on the ESP will process the click. ( https://esp32io.com/tutorials/esp32-web-server + https://www.w3schools.com/ )
The problem with “proper” html+styling is that it’s bloaty. ESP does not have a lot of storage, so simple is best. So even the product offering, show in this article, might be a bit much. Foe example, unless the fonts are served from an external site, then you have privacy/needsinternet issues, they would have to be served by the ESP… that’s not great.
TL;DR: bang out your own HTML, compile it into the ESP webserver. Style and gussy it as you see fit.
Is it an open source? But, where is link to sources? Can’t find it
It’s not open source, it’s commercial with limited free use apparently https://espgenui.com/
I wouldn’t mind if hackaday would limit itself to open source (or code available) projects.
Especially if it’s going to be vibecoded SaaS
I beg to differ, because if it’s a good idea (whether open source or not), it could inspire a group of people to create an open-source project based on it. So I still think Hackaday is a good source of info that doesn’t limit itself.
I don’t know why I appreciate the “an” in your comment so much, but I do.
i’ve hand-rolled primitive guis so many times that it feels normal to me to do so. the idea of being on an embedded platform and pulling in a library (or gui design studio sort of program) for this just seems insane to me. just unbelievable how much memory these chips have now, you don’t even really pay a perceptible cost for bloating your project up like that. if it is stupid and works then it isn’t stupid i guess.
Some close source stuff to create UI on an embedded system using…. WEB?? Seriously ? Not for me.
Async webserver in c++ in esp, and axios in spi/webstack with other nice framework with modern browsers. Don’t need this. Any solution is cool, don’t get me wrong.
Clarifications:
“Graphical design tools suck / LabVIEW”, this isn’t that. It’s a code generator, not a runtime. You diagram the UI layout, hit Generate, and get a normal Arduino sketch or ESP-IDF project — plain C/C++ you own and open in your own editor, compile with idf.py or IDE. There’s no wires-as-logic execution model
to get trapped in; the diagram just builds the tedious part (route handlers, HTML strings,
CSS). If you hate the app tomorrow you keep the code and never open it again.
“Just hand-roll HTML and compile it into the webserver” — that’s exactly the output. No framework, no runtime on the device: plain HTML/CSS baked into the firmware as strings, served by the webserver. On bloat/fonts specifically — the generated pages use the system monospace stack and inline CSS, so zero web fonts, zero CDN, no internet dependency on the chip. You’d write the same thing by hand — among other things, this just skips the monotony of escaping quotes inside PROGMEM string literals.
“Not open source / vibecoded SaaS” — correct, the tool is commercial with a free tier, no card required. Legit reason to pass and I won’t argue taste. But the thing you take away is unencumbered: the generated project has no dependency on the app, no license phone-home, no runtime lock-in — download it and keep editing offline. As for “vibecoded,” the bar it’s held to is that the generated IDF/Arduino projects compile clean and boot on real silicon, which they’re tested to do. — even closed, a decent idea can seed the open version. I’d be fine with that.
Thanks Hackaday for featuring the product!