ESP32 GUI Builder

Draw the interface for an ESP32 display in the browser and take the generated drawing code straight into your sketch.

Start designing

Runs in the browser. Free account, no install.

What the builder does

Laying out an ESP32 LCD UI by hand means guessing coordinates, recompiling, squinting at the panel, and adjusting a number by two pixels. Lopaka replaces that loop with a canvas the size of your display. You place text, rectangles, lines, circles, and imported images where you want them, and the generated code updates as you work.

The preview is a simulated screen, not an approximation on a desktop monitor: a 1-bit font on a 128x64 OLED shows the pixels it will actually light, and an RGB565 colour on a 320x240 TFT is the value your board receives. Nothing is flashed from the browser. Lopaka produces source, and the sketch stays yours.

Displays and libraries

Lopaka targets the drawing library, not the board, so any ESP32 module that runs one of these libraries is covered. Pick the row that matches the panel you wired up.

Display	Typical controllers	Target library
Monochrome OLED and LCD	SSD1306, SH1106, SSD1309	U8g2 or AdafruitGFX Mono
Colour TFT	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX, or AdafruitGFX Color
E-paper	Panels driven through GxEPD2	GxEPD2
Any display wired into a smart home node	Whatever the ESPHome display component drives	ESPHome
Any display on a MicroPython or CircuitPython board	framebuf and displayio targets	MicroPython or CircuitPython

Flipper Zero and LVGL are supported too, and the size dropdown runs from 32x8 up to 480x320 with a custom option for a panel that is not listed. Switching library on an existing design keeps the layout and remaps the colours to the new model.

Designing an ESP32 screen

1. Open the editor, choose the target library, and set the display size your panel reports.
2. Draw the screen: text, rectangles, lines, circles, and imported images on a canvas the size of the real display.
3. Nudge layers pixel by pixel and check the preview, which renders the way the panel will.
4. Copy the generated drawing function into your sketch and flash it.

What the output looks like

A sensor screen on a 240x320 TFT, exported for TFT_eSPI. Layer names become the comments, so the generated function reads like the design.

void draw(void) {
    tft.fillScreen(0x0);
    // header
    tft.fillRect(0, 0, 240, 28, 0x1B7D);
    // room
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("LIVING ROOM", 8, 20);
    // temperature
    tft.setTextSize(4);
    tft.drawString("21.4", 8, 84);
    // humidity
    tft.setTextColor(0x8CB3);
    tft.setTextSize(1);
    tft.drawString("HUMIDITY 48%", 8, 116);
    // divider
    tft.drawLine(8, 130, 232, 130, 0x8CB3);
    // status
    tft.drawRoundRect(8, 144, 224, 40, 4, 0x3DCA);

}

Questions

What does the ESP32 GUI builder actually produce?

A drawing function in the syntax of the library you picked, plus the declarations it needs: bitmap arrays, font includes, and any variables you marked. You paste it into your sketch and call it. Lopaka never flashes the board or talks to it over serial.

Which display libraries can I export to?

Lopaka generates source for U8g2, TFT_eSPI, AdafruitGFX, ArduinoGFX, ESPHome, GxEPD2, Flipper Zero, MicroPython, CircuitPython, LVGL.

Does it work for a monochrome OLED as well as a colour TFT?

Yes. Pick U8g2 or AdafruitGFX Mono for an SSD1306 or SH1106 OLED and the canvas becomes 1-bit; pick TFT_eSPI, ArduinoGFX, or AdafruitGFX Color for an ILI9341 or ST7789 panel and you get RGB565. Switching the platform on an existing design keeps the layer geometry and remaps the colours.

Can I set the resolution of my own panel?

The size dropdown covers the common panels from 32x8 to 480x320, and anything not on the list can be entered as a custom width and height.

What about fonts?

Each platform offers the fonts its library understands: the BDF library for U8g2, Adafruit and GFX fonts for TFT_eSPI, ArduinoGFX, and Adafruit GFX. TrueType and BDF files you upload are converted to the format the target needs.

Is it free?

Yes. Designing a screen and generating code for every supported library are part of the free Basic plan, along with the community font and icon libraries.

Build your ESP32 interface

Create a free account and the editor opens on a blank screen at your display size.

Start designing