UI Elements
Complete reference for all UI elements, components, widgets, and features available in LVGL Pro Editor.
LVGL Pro Editor uses XML to define user interfaces, providing a declarative format for describing UI components, screens, layouts, and animations with full code generation support. This section covers everything from basic building blocks to advanced styling and animation techniques.
Understanding XML
Introduction LVGL's XML
Learn the fundamentals of XML format and how it powers LVGL Pro Editor's UI definition system.
XML Syntax Overview
Explore XML syntax rules, element structure, attributes, and best practices for writing clean UI definitions.
UI Elements
Components
Create reusable UI modules with custom properties, styles, and API definitions. The foundation for building complex interfaces.
Widgets
Reference guide for all available widgets and UI controls. Learn how to create custom widgets with XML parsers.
Screens
Organize your UI content with screens. Manage navigation, permanent screens, and screen lifecycle.
Visuals & Styling
View
Define the visual structure and layout of components, widgets, and screens using the view tag.
Styles
Master style sheets, local styles, gradients, and conditional style binding with subjects for dynamic theming.
Constants
Define reusable constants for colors, spacing, strings, and other values to maintain consistency.
Animations
Create timeline-based animations with multiple steps. Include timelines from other components for complex effects.
Assets
Images
Register and reference images as named external resources in your XML files. Map images from files or compiled data arrays.
Fonts
Register and configure fonts as external resources. Select font engines and name them for reference in XML files.
Interaction & Configuration
API
Define custom APIs for widgets and components with properties, parameters, enums, and elements.
Events in XML
Handle user interactions with event callbacks, screen navigation, and subject value updates on triggers.
Data Binding
Use subjects to bind data to widget properties, creating dynamic UIs that automatically update when values change.
Language Translations
Implement multi-language support using the XML translation module to define and manage translated strings efficiently.
Test & Preview
How is this guide?
Last updated on
Learn by Examples
Explore interactive tutorials and hands-on examples to master LVGL Pro Editor features from Hello World to advanced animations.
Introduction
Learn how LVGL's XML format enables declarative UI development with version control, reusability, and runtime flexibility for embedded applications.