GUI design buider for ESP32 & Arduino
If you’ve ever tried to make a decent-looking UI on a tiny display with an ESP32 or Arduino, you know the pain: pixel math, clunky libraries, trial-and-error layout. It sucks the joy out of a project. That’s exactly why we built Lopaka.app — a GUI builder for ESP32 and Arduino that actually feels modern.
In this post, I’ll walk you through the fastest way to go from blank screen to pixel-perfect UI on real hardware using Lopaka. It works with popular graphics libraries like Adafruit_GFX, TFT_eSPI, U8g2, and even ESPHome.
Step 1: Fire up Lopaka in your browser
No installs, no setup. Just go to Lopaka, click "New Project," and name it whatever you want. Choose your target display size (128x64 OLED? 320x240 TFT? Totally up to you) and pick the graphics library you’ll use in your firmware.
Supported libraries:
- Adafruit_GFX
- TFT_eSPI
- U8g2 (for those crisp monochrome OLEDs)
- ESPHome
- Micropython
- Flipper Zero, ESPHome, Inkplate, etc.
Step 2: Design your UI like it's 2025
You get a drag-and-drop editor that feels like Figma, but for embedded. Drop in shapes, text, icons, and bitmaps. Adjust fonts, align elements with rulers and grids, zoom in down to the pixel. The editor gives you a real 1:1 view of what will show up on your device.
Everything is stored in the cloud, so you can come back later or share it with teammates. The UI updates instantly, and the code panel shows exactly what will be exported.
Step 3: Export production-ready C/C++ code
Once your layout is done, flip to the code panel. Lopaka generates clean, optimized code for your display driver + library. Fonts, bitmaps, layout — all taken care of. Just copy-paste into your Arduino IDE, PlatformIO, or ESPHome YAML.
No guessing offsets. No weird alignment bugs. The exported code is the exact output you previewed.
Step 4: Wire up and flash your device
Wire your display as per the library documentation. If you're using Adafruit_GFX or U8g2, you probably already know the drill. Paste the generated code into your sketch, compile, and upload.
Boom. Your GUI appears exactly like you designed it. No calibration needed.
Real Example: ESP32 Weather Dashboard
Let’s say you want to build a compact weather display using ESP32 + 2.4” TFT screen.
- Pick 320x240 display size in Lopaka
- Drop in icons for weather states (sun, cloud, rain)
- Add text blocks for temp, humidity, city name
- Export code for TFT_eSPI
- Use OpenWeatherMap API in your sketch
- Flash and admire your crisp weather dashboard
Looks like a commercial product, but you made it in under an hour.
Why engineers are switching to Lopaka
This isn’t just a toy. Lopaka is a serious embedded GUI design software built by someone who’s been through the pain of hand-tuning pixel layouts.
What you get:
- Real-time WYSIWYG editor for embedded UIs
- No-code GUI builder for ESP32, Arduino, and more
- Output that works with real hardware, not just mockups
- It's open-source with optional subscription plans for the cloud app
If you’re building screens with Arduino, ESP32, or Raspberry Pi — this will save you hours.
Try it now
Head over to lopaka.app and spin up your first project. No login required.
Got feedback or feature requests? Hit up the GitHub repo or DM us on Twitter.
Happy hacking 🚀