The visual drag & drop LVGL editor.

How PicoPixel Works

PicoPixel turns LVGL development from a code-first process into a visual drag-and-drop workflow. Go from blank canvas to production-ready embedded UI in minutes — design visually, preview with a live LVGL simulator, and export clean C code. No installation required.

Get Started. It's Free!

From Design to Device in 6 Steps

01

Design Your Interface

Open PicoPixel in your browser — no downloads, no installation. Drag LVGL widgets from the palette onto a pixel-perfect canvas and style them visually.

  • • Buttons, labels, sliders, switches, arcs, charts, dropdowns, rollers, checkboxes, text areas, tabviews, containers, and images
  • • Set your target display resolution to match your hardware
  • • Style colors, borders, padding, fonts, opacity, gradients, and shadows
  • • Use alignment and distribution tools to position widgets precisely
  • • Organize screens and layers for multi-page interfaces
02

Wire Up Interactions

Use the visual Events Editor to connect widget actions without writing a single line of C code. PicoPixel generates the LVGL event callbacks automatically.

  • • Button press → navigate to another screen
  • • Slider value change → update a label
  • • Checkbox toggle → show or hide a panel
  • • Dropdown selection → change a style or trigger an action
  • • Drag actions onto widgets — no callback code required
03

Preview in the Live 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.

  • • See exactly how your UI renders on hardware
  • • Test touch interactions, scrolling, and animations
  • • Interaction overlays show what can be tapped and scrolled
  • • Share a simulator link with your team or client — no dev environment needed
04

Export Production-Ready Code

Download your project as clean LVGL C source files. The output uses standard LVGL API calls with no proprietary dependencies — drop it into any LVGL project.

  • • Widget definitions and layout code
  • • Style declarations
  • • Event handler bindings
  • • Font and image asset references
  • • Standard LVGL 8.x API — no PicoPixel runtime library
05

Integrate and Flash

Add the exported files to your ESP-IDF, Arduino, or PlatformIO project. Compile, flash, and the UI on your device matches the simulator pixel-for-pixel.

  • • Works with ESP32, STM32, Arduino, Raspberry Pi Pico, and any LVGL-compatible platform
  • • Include the UI header and call ui_init() after your display driver is configured
  • • No build system changes needed for most setups
  • • Or hand the zip to an AI code assistant and let it handle the integration
06

Collaborate and Iterate

Invite team members to your project. Everyone edits the same canvas in real time. Use built-in version control to track changes and roll back when needed.

  • • Real-time collaborative editing — live cursors, feedback, annotations
  • • Built-in version control with granular session history
  • • Roll back to any previous state and compare versions
  • • Share simulator links for stakeholder reviews

Why Drag-and-Drop for LVGL?

Building embedded UIs with LVGL traditionally means writing C code line by line — positioning widgets with pixel coordinates, applying styles through function calls, and recompiling after every change. It works, but the feedback loop is slow and the code is hard to visualize.

PicoPixel's drag-and-drop approach replaces that cycle with a visual editor where you see the result instantly. Drag a button onto the canvas, resize it, change its color, add a label — and the live LVGL simulator shows exactly how it will look on your target hardware. When you are done, export clean C code that compiles on ESP32, STM32, Arduino, and any LVGL-compatible platform.

The visual workflow is faster for prototyping, easier for teams (designers and engineers can collaborate in real time), and produces the same production-quality LVGL code you would write by hand. See all PicoPixel features or read the detailed comparison with other LVGL editors.

Frequently Asked Questions

Do I need to install anything to use PicoPixel?

No. PicoPixel runs entirely in your browser. Open the editor URL, sign in, and start designing. There is no desktop app, no plugin, and no SDK to install.

What LVGL widgets can I use in the editor?

PicoPixel supports the core LVGL widget set including buttons, labels, sliders, switches, dropdowns, rollers, arcs, bars, charts, images, checkboxes, text areas, tabviews, containers, and more. We are continuously adding support for additional widgets.

How accurate is the live simulator?

The simulator runs the actual LVGL rendering engine compiled to WebAssembly — it is not a mock-up or CSS approximation. What you see in the preview matches your target hardware pixel-for-pixel.

What format does the exported code use?

PicoPixel exports a zip file containing clean, human-readable LVGL C code (.c and .h files). The output includes widget creation, styling, layout, and event handler setup — all using standard LVGL API calls with no proprietary dependencies.

Can I use the exported code with ESP-IDF, Arduino, or PlatformIO?

Yes. The exported code uses standard LVGL API calls, so it works with any build system that supports LVGL — including ESP-IDF, Arduino IDE, and PlatformIO. Just add the files to your project and call ui_init() after your display driver is configured. For platform-specific details, see our ESP32 guide.

Is PicoPixel free?

Yes. PicoPixel is free to use — including for commercial projects. No credit card required. As the platform grows and more users come on board, paid plans may be introduced to cover storage and service costs. There will always be a free tier.

Design Your First LVGL Interface — Free

Open PicoPixel in your browser, drag and drop LVGL widgets onto the canvas, and export production-ready C code in minutes. No installation. No credit card.

Get Started. It's Free!

Free to use — including for commercial projects. Read the FAQ · Get in touch