Editor Overview

Discover LVGL Pro Editor features including XML editing, Design mode, real-time preview, and C code generation.

The Editor, along with the CLI, Figma plugin, and online viewer, is part of LVGL Pro, a professional toolkit to develop embedded UIs.

The LVGL Pro Editor is a visual development environment for building embedded UIs. It combines a real-time preview, XML editing with intelligent autocomplete, and a drag-and-drop Design mode, then generates clean, optimized C code you can drop straight into your firmware.

Because the preview uses real LVGL rendering, what you see in the Editor matches pixel-for-pixel what runs on the device, so you skip the slow edit-compile-flash loop while designing.

Key features

• Real-time preview: See pixel-perfect changes instantly as you edit, powered by real LVGL rendering. Learn more in the preview documentation.
• XML Editor: Powerful tools to autocomplete and syntax-highlight your XML code.
• Design mode: Create UIs in a drag-and-drop way from components already built in XML.
• C code generation: Export optimized C code ready for firmware integration. See Using exported C code for adding the generated UI to your project.
• Custom widget support: Recompile the preview with LVGL and your own C-based widgets.
• Data bindings: Connect UI elements to dynamic data with data bindings and try them out live in the preview, no firmware flash required.
• UI tests: Record and run UI tests in a few clicks to catch visual and behavioral regressions early.
• Animations: Design timeline-based animations and preview them in real time.
• Multi-language UIs: Manage translations and switch languages right in the preview.
• Figma plugin: Export screens, components, and styles from Figma into XML with a single click using the Figma plugin.
• Online preview: A simplified version of the Editor to open and review projects in a browser. Learn more here.

User interface

The Editor is built on a full VS Code-like environment, so if you've used VS Code you'll feel right at home. All the familiar power tools are there: quick file navigation with Ctrl + P, a built-in terminal, a debugger, editor tabs, a smart code navigator, Git integration, and support for installing extensions from the Open VSX Registry.

Every project can be edited in two modes:

1. XML mode for full control
2. Design mode for visual, drag-and-drop editing of screens

Switch between them at any time using the toggle at the top of the window. Both modes edit the same project files, so a team can freely mix them.

XML mode

While you write XML on the left, a live, pixel-perfect preview updates on the right. It's powered by real LVGL rendering, so what you see matches the device exactly. Autocomplete, syntax highlighting, and validation guide you as you type. This is where you define reusable components, widgets, styles, animations, data bindings, and tests.

Design mode

Design mode lets you assemble and edit UIs visually (dragging, dropping, and adjusting properties) without ever seeing the XML. It's ideal for building screens from components that developers prepared in XML, so designers or less technical team members can create UIs without deep technical knowledge.

The preview toolbar

A small toolbar sits above the preview and gives quick access to three actions:

• Inspector - Toggle Inspector mode on or off.
• Connect to Figma plugin - Link the Editor to the Figma plugin to sync styles and layouts.
• Compile and export code - Generate the C code and recompile the preview.

Inspector mode

Inspector mode overlays a lot of useful information on the selected element, making it easy to understand and fine-tune your layout. Enable it from the toolbar button, or temporarily by holding Alt while hovering over the preview (see all keyboard shortcuts).

While Inspector mode is active you can see:

• The element's size and the component name
• Padding and margins
• The extra click area as a dashed outline
• Handles to resize and reposition the element directly in the preview

A workflow for whole teams

These two modes enable a workflow where developers and designers each work at the level that suits them best:

1. Advanced developers build the toolkit. In Code mode they create well-structured components — reusable building blocks written in XML (buttons, cards, screen templates, and so on). Each component declares an <api> that defines exactly which properties are exposed.
2. Anyone assembles the UI. In Design mode, designers, product managers, or less technical team members drag those components onto screens and configure them — building complete UIs without deep technical knowledge and without touching XML.

Because only the properties listed in a component's <api> are shown in Design mode (not every internal detail), developers decide precisely what is configurable and what stays fixed. This keeps the design surface clean and prevents accidental breakage.

Designers stay in the loop at both ends of this workflow. Screens, components, and layouts can be brought over from Figma with a single click using the Figma plugin, and any project can be opened in the online viewer (a simplified browser version of the Editor) to quickly review or share the UI without installing anything.

Getting started quickly

You don't have to start from a blank project. When you create a new project from the launcher, the Editor can scaffold a ready-to-use project tailored to your target, so you can build and run it right away:

• UI Only - A project containing only the UI, which can be freely integrated into any application. Learn more here.
• VS Code project - A project pre-wired for the VS Code workflow to run the UI on your desktop.
• Zephyr project - A starter set up for Zephyr.
• Linux project - A starter for Linux targets.

These projects can be created as:

• Empty UI project - Just a basic folder structure (screens, components, widgets, images, and fonts) with no UI files.
• Template project - A project preloaded with many useful, ready-made components (headings, buttons, controls, text inputs, lists, and more) that you can reuse and adapt.

The launcher also offers Learn by Examples, where you can create a project from 100+ simple examples and useful tutorials — from Hello World to animations and data binding. See the Learn by Examples page for the full list.