Build ESP32 Touchscreen UIs — Visually

1. Design Your Interface

Open PicoPixel in your browser and start a new project. Drag and drop LVGL widgets — buttons, labels, sliders, charts, arcs, switches, and more — onto the canvas. Set the display resolution to match your ESP32's screen: 320×240 for common SPI TFTs, 240×240 for round GC9A01 displays, or 800×480 for larger panels. Style colors, fonts, and spacing visually — no C code required at this stage.

2. Preview in the Live LVGL Simulator

PicoPixel compiles LVGL to WebAssembly and runs it directly in your browser. The preview is the actual LVGL rendering engine — not a mock-up. Test touch interactions, scrolling, and animations before touching your hardware. You can also share a simulator link with teammates or clients for feedback.

3. Export Your UI Files

Export a zip file containing your UI as LVGL C code (.c and .h files). The output includes widget creation, styling, layout, and event bindings — all using standard LVGL 8.x API calls. There are no proprietary dependencies and no PicoPixel runtime library. LVGL v9.x support is planned.

4. Integrate and Flash

Unzip the exported files into your ESP-IDF, Arduino, or PlatformIO project. Include the UI header and call ui_init() after your LVGL display and input drivers are configured. Compile, flash, and the UI on your ESP32 matches the simulator pixel-for-pixel. For a faster path, hand the zip to an AI code assistant (Claude Code, Codex, etc.) and let it handle the integration automatically.

ESP32 Variants

PicoPixel generates standard LVGL code that works on any ESP32 variant with LVGL 8.x support:

• •ESP32 (original) — limited SRAM; best for simpler UIs
• •ESP32-S2 — USB OTG support, moderate display capability
• •ESP32-S3 — recommended for most display projects; dual-core with PSRAM and enough power for complex UIs
• •ESP32-C3 — RISC-V single-core; suitable for lightweight UIs
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; same display capability as C3
• •ESP32-P4 — newest variant with dedicated GPU and hardware pixel-processing; excellent for complex, high-resolution GUIs. Tested with Waveshare and Guition boards.

Popular Development Boards

Compatible with any LVGL-capable ESP32 dev board, including:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 display boards
• •Guition ESP32-P4 display boards
• •Elecrow display boards
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton boards (popular budget ESP32 display boards)

Compatible Display Drivers

PicoPixel generates platform-agnostic LVGL code — the display driver is handled by your LVGL port configuration. Common display controllers that work with LVGL on ESP32:

• •ST7789 (most common for small TFTs)
• •ILI9341 (240×320 displays)
• •ILI9488 (320×480 displays)
• •GC9A01 (round displays)
• •ST7796 (larger displays)
• •SSD1306 (small OLEDs)
• •MIPI DSI displays (ESP32-P4)

If your display works with LVGL, PicoPixel's output will work with it.

ESP-IDF Integration

PicoPixel's export is purely UI code — it does not include lv_init(), display driver registration, or tick handling. Your project must already have a working LVGL 8.x setup. To add PicoPixel's UI:

1. 1.Export your UI from PicoPixel (downloads a .zip file)
2. 2.Create a ui/ directory inside your project's components/ folder
3. 3.Unzip the exported files into components/ui/
4. 4.Create a CMakeLists.txt in components/ui/ that registers the sources with a dependency on lvgl
5. 5.Add ui to the REQUIRES list in your main/CMakeLists.txt
6. 6.Include #include "ui/ui.h" in your main.c and call ui_init() after your display setup
7. 7.Build and flash: idf.py build && idf.py flash

Arduino IDE Integration

Your sketch must already have LVGL 8.x installed and a working display driver configured.

1. 1.Export your UI from PicoPixel (downloads a .zip file)
2. 2.Create a ui/ folder inside your sketch's src/ directory
3. 3.Unzip the exported files into src/ui/
4. 4.Include #include "src/ui/ui.h" in your .ino file
5. 5.Call ui_init() in setup() after lv_init() and your display driver are configured
6. 6.Arduino IDE auto-compiles all .c files in src/ recursively — no build config changes needed
7. 7.Upload to your ESP32

PlatformIO Integration

Your project must already have LVGL 8.x in lib_deps and a working display driver configured.

1. 1.Export your UI from PicoPixel (downloads a .zip file)
2. 2.Unzip the exported files into src/ui/
3. 3.Include #include "ui/ui.h" in main.cpp
4. 4.Call ui_init() after your LVGL setup
5. 5.No platformio.ini changes needed — PlatformIO auto-compiles all sources in src/
6. 6.Build and flash: pio run --target upload

AI-Assisted Integration

For a faster path, export the zip from PicoPixel and hand it to an AI code assistant. Tell Claude Code, GitHub Copilot, or Codex: "Add these PicoPixel UI files to my ESP32 LVGL project" — most assistants can handle the file placement, includes, and build configuration automatically.