Getting Started

LCD Ultra Pro is a browser-based visual editor for ESP32 display boards. You design the interface with the real LVGL 8.4 engine, add logic without writing code, test it in Live Preview, and export a ready-to-compile Arduino project — or, on USB Live boards, see the design on the real display instantly.

Quick Start

• •Sign in and open the editor in Chrome or Edge.
• •Click New project and pick your exact board. The canvas matches its resolution and shape.
• •Drag widgets from the palette on the left onto the canvas, and set their properties on the right.
• •Select a widget and add events in the event panel below the canvas: what should happen when it is clicked or changed.
• •Click Live Preview to try the interface with your events running.
• •Click Export to download the Arduino project as a ZIP, then follow its README.

Requirements

• •A desktop computer with Google Chrome or Microsoft Edge
• •An ESP32 or ESP32-S3 display board from the catalog
• •A USB data cable (not a charge-only one)
• •To compile the export: Arduino IDE 2.x with the ESP32 board package and LVGL 8.4

The Editor

The canvas is your display at the exact resolution of the selected board. It is drawn by the same LVGL 8.4 engine that runs on the ESP32, so what you see is what the display will show.

Selecting and Moving Widgets

• •Click a widget to select it; Ctrl + click adds it to or removes it from the selection.
• •Drag a widget to move it, or use the arrow keys (1 px) and Shift + arrow keys (10 px).
• •Drag the handles on the corners and edges to resize it.
• •To place a new widget inside a container (such as a Container or a Tab View), click the container first.

Right-click Menu

• •Duplicate, Copy and Paste
• •Bring to front, Move up, Move down, Send to back
• •Delete

Screens

A project can have as many screens as you need. Use the screen bar below the canvas to switch between them, add a new screen with +, or rename one with ✎. Each screen becomes its own LVGL screen in the generated code, and the Navigate to screen action moves between them with an optional animation.

Keyboard Shortcuts

Ctrl+Z              Undo
Ctrl+Y / Ctrl+Shift+Z  Redo
Ctrl+C / Ctrl+V     Copy / Paste
Ctrl+D              Duplicate
Delete / Backspace  Delete selected
Arrow keys          Move 1 px
Shift+Arrow keys    Move 10 px
Ctrl+G              Show or hide the grid
Ctrl+ + / Ctrl+ -   Zoom in / out
Ctrl+S              Save the project to the cloud

Widgets

All of them are real LVGL 8.4 widgets, in four groups. Click a widget in the palette to add it, or use the search box at the top of the palette.

Basic

Button, Container, Label, Menu, Switch, Tab View, Tile View, Window

Input

Button Matrix, Checkbox, Color Wheel, Dropdown, Image Button, Keyboard, List, Roller, Slider, Spinbox, Textarea

Display

Animated Image, Arc, Bar, Calendar, Canvas, Chart, Image, LED, Line, Message Box, Meter, Span Group, Spinner, Table

Components

Ready-made groups of widgets you can drop in with one click and then edit: Card, Checkbox Group, Dial, Gauge, Header Bar, Numeric Keypad, LED with Label, Login Form, Navigation Bar, Progress with Label, Settings Row, Labeled Slider, Stat Tile, Switch Row, VU Meter and Stereo VU Meter.

Widget Properties

Select a widget to see its properties on the right: position and size, the widget's own settings (text, value, range, options) and its style (colors, border, radius, shadow, font). Each widget also has a C name, which is the variable name it gets in the generated code.

Events & Logic

Events let you make the interface do things without writing code. Each event has a trigger and one or more actions, and can have a condition with an else branch.

Triggers

• •Widgets: Clicked, Pressed, Released, Long pressed, Value changed
• •Screens: Screen shown, Every … ms (a timer that runs while the screen is shown)
• •Hardware: a button on one of the board's free pins is pressed or released, or a pin changes state

Actions

• •Navigate to screen (with animation), show or hide a widget, open a menu page, set a widget's state
• •Set text (fixed or a live value such as a slider's value), set value (animated), change a style or color
• •Control an LED, show a message box, play a widget animation
• •Set, increase or decrease a variable
• •Switch a pin on or off, drive a PWM output, beep a buzzer
• •Restart the device, or run your own C code

Conditions and Variables

A condition compares a widget value, a variable, a pin level or an analog reading with a number or another value, and you can combine several with AND / OR. Variables are shared across screens, so a value set on one screen can be shown on another. When an event has several actions, they can run at the same time or one after another with delays.

Your Own Code

For anything the menus don't cover, add your own Arduino code to an event, to the startup code or to the global declarations (Tools in the top bar). The code editor has ready-made examples, and your code goes into the exported project exactly as written.

Live Preview

Click Live Preview to use the interface as if it were already on the device: tap buttons, drag sliders and arcs, switch screens and watch your events run. Hardware pins used by your events appear below the preview as virtual buttons and inputs, so you can test those events too. Changes in the preview are not saved to the project.

Boards & Drivers

The catalog has 100+ ESP32 display boards from Waveshare, Makerfabs, LilyGO, Sunton (CYD), M5Stack, Elecrow and Guition. Pick your exact board when you create a project; the canvas matches its resolution and shape, and the export uses that board's driver.

Each board shows how thoroughly its driver has been checked:

• •Verified: tested on the real board
• •Vendor-matched: pins, timing and initialization checked against the manufacturer's own code
• •Compile-tested: compiles without errors with a 50-widget test project

The memory estimator (Tools in the top bar) shows roughly how much PSRAM and SRAM your screens, images and buffers will need on the selected board, so you can spot a design that will not fit before you compile.

Code Export

Click Export to download a ZIP with a complete Arduino sketch for your board:

• •The sketch (.ino) that starts the display, the touch panel and LVGL
• •ui.c / ui.h with your screens and widgets, and ui_events with your event logic
• •Your images as C arrays
• •lv_conf.h, the LVGL configuration for this board
• •The board's display and touch driver files
• •README.txt with the exact Arduino IDE settings (board, PSRAM, flash size, partition scheme) and the library versions to install

Compiling

• •Install the ESP32 board package (Espressif Systems) in the Arduino IDE.
• •Install the libraries listed in README.txt, including LVGL 8.4.x.
• •Open the .ino file, set the board options exactly as README.txt says, then select the port and upload.

Flash Firmware

USB Live needs a small firmware on the board. You can flash it straight from the browser, with no Arduino IDE needed:

• •Connect the board to the computer with a USB cable.
• •Click Flash in the top bar and check that the selected board matches yours exactly.
• •Click Flash board and pick the board in the browser's port list.
• •Wait until the log says Done (about 10–20 seconds). The board restarts and shows LCD Ultra Pro on its screen.

USB Live

USB Live mirrors the canvas to the real display over USB while you design. Every change shows up on the board almost instantly, with no compiling and no reflashing.

• •Flash the USB Live firmware first (see above).
• •Click USB Live in the top bar, then Connect, and pick the board in the port list.
• •When it says Connected, keep editing: the board shows what the canvas shows.
• •Keep the browser tab open while you use it. To stop, unplug the board or reload the page.

USB Live currently works on the Waveshare ESP32-S3-LCD-7B, the Makerfabs MaTouch ESP32-S3 Parallel TFT 4.3" and the Makerfabs MaTouch ESP32-S3 Rotary 2.1". More boards are being added; for all other boards, use the Arduino export.

Saving Your Work

• •The editor keeps your current work in this browser automatically.
• •Save to cloud stores the project in your account, so you can open it from any computer.
• •Ctrl+S saves the project to your account, the same as the Cloud button.

Tips & Troubleshooting

Design Tips

• •Check the result at 100% zoom to judge real pixel sizes.
• •Give important widgets meaningful C names; it makes the generated code easier to read.
• •Large images take the most memory. Keep an eye on the memory estimate on boards without PSRAM.

Common Issues

• •The export does not compile: make sure LVGL 8.4.x is installed (not 9.x) and the board options match README.txt.
• •The screen stays blank after uploading: check that the project was made for your exact board model.
• •The port does not appear: use Chrome or Edge, and a USB data cable.
• •USB Live does not connect: flash the USB Live firmware first, and use the same USB port you used for flashing.