Learn by Examples

Explore interactive tutorials and hands-on examples to master LVGL Pro Editor features from Hello World to advanced animations.

Start with hands-on practice using our comprehensive tutorial collection. Test each example live in your browser without any local setup, then explore the source code on GitHub to understand the implementation details.

Try Examples Online

Use the LVGL Viewer to run any tutorial directly in your browser and see live results instantly.

Available Tutorials

The complete tutorial source code is available on GitHub. Each tutorial demonstrates specific Editor features:

  1. Hello World - Create a styled button with a label using XML
  2. New Component - Build reusable components and construct screens from them
  3. Assets - Integrate images and custom fonts into your project
  4. Screens - Implement screen transitions using load and create events
  5. Layouts - Leverage nested flex layouts for responsive design
  6. Data Binding - Connect UI elements to data sources dynamically
  7. Translations - Implement multi-language support and preview translations
  8. Animations - Create timeline-based animations triggered by user interactions

How is this guide?

Last updated on

Introduction

LVGL Pro is a complete toolkit to build, test, share, and ship embedded UIs efficiently with XML editor, online share, CLI, and Figma plugin.

UI Elements

Complete reference for all UI elements, components, widgets, and features available in LVGL Pro Editor.

On this page

Try Examples OnlineAvailable Tutorials