Learn LVGL

Build with
PicoPixel.

Step-by-step guides for the web editor, ESP32 boards, and the workflows that hold a project together.

How to use pets in PicoPixel thumbnail
PINNED · PICOPIXEL

How to use pets in PicoPixel

Pets are ready-made animated sprites with multiple modes you can trigger on any condition. Grab one from the directory, add it to your project, and wire it up to react to whatever your device is doing: fetching data, overheating, reviewing code, you name it.

pets · sprites · picopixel View
How to use PicoPixel templates, UI kits, and full apps thumbnail
PICOPIXEL

How to use PicoPixel templates, UI kits, and full apps

Find PicoPixel templates, UI kits, examples, sprites, widgets, and full app files, then open, download, import, customize, and export them as LVGL C code for your device.

templates · ui-kits · full-apps
Working with the LVGL Animated Image Widget thumbnail
LVGL

Working with the LVGL Animated Image Widget

How the LVGL animated image widget works: upload a sequence of equal-sized frames, set the duration and loop, and play frame-by-frame animations on your display.

lvgl · animated-image · animimg
What is a sprite? thumbnail
PICOPIXEL

What is a sprite?

Learn what sprites are, how to create multi-state animated widgets, and how to reuse them across projects.

sprite · picopixel
Using the event editor thumbnail
PICOPIXEL

Using the event editor

Make your UI interactive with PicoPixel's event editor, drag a connection from one widget to another, pick a trigger like a click or value change, and choose what happens.

events · interactions · picopixel
Guide to libraries and reusable LVGL components in PicoPixel thumbnail
PICOPIXEL

Guide to libraries and reusable LVGL components in PicoPixel

How libraries work in PicoPixel: publishing a file makes its assets reusable across your team's workspaces, not public. What a library holds, how to publish and link one, where published libraries show up, and the only two ways anything ever leaves your team.

library · components · sharing
Working with fonts thumbnail
PICOPIXEL

Working with fonts

Learn why LVGL fonts need converting, how to create one from a bundled or uploaded font, set up right-to-left scripts like Arabic and Hebrew, handle large CJK fonts, and clean up the ones you're not using.

font · picopixel · lvgl
ESP32 LVGL Tutorial: Build a Touchscreen UI thumbnail
HARDWARE

ESP32 LVGL Tutorial: Build a Touchscreen UI

Build a touchscreen UI for the ESP32 with LVGL, design it visually in your browser, preview it live, and export ready-to-flash C code. A beginner-friendly guide.

esp32 · lvgl · ui
How to submit a pet thumbnail
PICOPIXEL

How to submit a pet

Two ways to add your pet to the PicoPixel community, paste a Petdex URL for the fastest path, or upload a spritesheet and sprite.json to GitHub. Plus how to generate your own unique pet with AI tools.

pets · sprites · petdex
How to submit a template thumbnail
PICOPIXEL

How to submit a template

Share one of your PicoPixel files as a community template by creating a GitHub repo with your .picopixel file, showcase images, and a README description.

templates · submission · sharing
How to report content thumbnail
PICOPIXEL

How to report content

Spotted a pet, template, or other community content that shouldn't be there? Report it through the Give feedback form, what to include, how to flag a copyright issue, and what happens after.

report · copyright · moderation
Have a tutorial idea?
Pitch us at hello@picopixel.io
hello@picopixel.io