# UI Elements (/syntax)



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 [#understanding-xml]

<Cards>
  <Card icon="<Info />" href="./introduction" title="Introduction LVGL's XML">
    Learn the fundamentals of XML format and how it powers LVGL Pro Editor's UI definition system.
  </Card>

  <Card icon="<Code />" href="./overview" title="XML Syntax Overview">
    Explore XML syntax rules, element structure, attributes, and best practices for writing clean UI definitions.
  </Card>
</Cards>

UI Elements [#ui-elements]

<Cards>
  <Card href="./components" icon="<Box />">
    **Components**

    Create reusable UI modules with custom properties, styles, and API definitions. The foundation for building complex interfaces.
  </Card>

  <Card href="./widgets" icon="<Blocks />">
    **Widgets**

    Reference guide for all available widgets and UI controls. Learn how to create custom widgets with XML parsers.
  </Card>

  <Card href="./screens" icon="<Layout />">
    **Screens**

    Organize your UI content with screens. Manage navigation, permanent screens, and screen lifecycle.
  </Card>
</Cards>

Visuals & Styling [#visuals--styling]

<Cards>
  <Card href="./view" icon="<Eye />">
    **View**

    Define the visual structure and layout of components, widgets, and screens using the view tag.
  </Card>

  <Card href="./styles" icon="<Palette />">
    **Styles**

    Master style sheets, local styles, gradients, and conditional style binding with subjects for dynamic theming.
  </Card>

  <Card href="./constants" icon="<Hash />">
    **Constants**

    Define reusable constants for colors, spacing, strings, and other values to maintain consistency.
  </Card>

  <Card href="./animations" icon="<Sparkles />">
    **Animations**

    Create timeline-based animations with multiple steps. Include timelines from other components for complex effects.
  </Card>
</Cards>

Assets [#assets]

<Cards>
  <Card href="./images" icon="<Image />">
    **Images**

    Register and reference images as named external resources in your XML files. Map images from files or compiled data arrays.
  </Card>

  <Card href="./fonts" icon="<FileText />">
    **Fonts**

    Register and configure fonts as external resources. Select font engines and name them for reference in XML files.
  </Card>
</Cards>

Interaction & Configuration [#interaction--configuration]

<Cards>
  <Card href="./api" icon="<Code />">
    **API**

    Define custom APIs for widgets and components with properties, parameters, enums, and elements.
  </Card>

  <Card href="./events" icon="<Zap />">
    **Events in XML**

    Handle user interactions with event callbacks, screen navigation, and subject value updates on triggers.
  </Card>

  <Card href="./data-binding" icon="<Link />">
    **Data Binding**

    Use subjects to bind data to widget properties, creating dynamic UIs that automatically update when values change.
  </Card>

  <Card href="./translations" icon="<Globe />">
    **Language Translations**

    Implement multi-language support using the XML translation module to define and manage translated strings efficiently.
  </Card>
</Cards>

Test & Preview [#test--preview]

<Cards>
  <Card href="./testing" icon="<TestTube />">
    **UI Testing**

    Write comprehensive UI tests using XML to verify functionality and visual consistency of your LVGL interfaces.
  </Card>

  <Card href="./preview" icon="<Monitor />">
    **Preview**

    Configure preview settings for components and widgets in the UI Editor with multiple preview contexts.
  </Card>
</Cards>