Website | Docs | Online Viewer | Forum | Pricing

LVGL Pro

LVGL Pro is a professional toolkit to speed up UI development with LVGL. It includes an Editor, Figma integration, Online sharing, and a CLI.

Overview • Open vs Pro • Features • Why XML • Workflow • Get Started • Licensing • Feedback

Overview

You can build any UI with LVGL in C. LVGL Pro lets you build the same UIs visually, preview every change instantly, and export plain LVGL C code that drops into an existing project with no extra runtime or dependency.

It consists of four tightly related tools:

1. Editor: The heart of LVGL Pro. A desktop app to build components and screens in XML, and manage data bindings, translations, animations, tests, assets, and more. See the Editor docs and the XML syntax.
2. Online Viewer: Run the editor in your browser, open GitHub projects, and share with teammates, designers, or customers without any local setup. Visit viewer.lvgl.io or read the docs.
3. Figma plugin (LVGL Flow): Bring a Figma design into LVGL Pro, including layouts, widgets, data bindings, and screen navigation. See how it works here.
4. CLI: Export C code and run UI tests in CI/CD pipelines. See the CLI docs.

Together, these tools let you build UIs faster, test them reliably, and collaborate with your team.

LVGL Open vs LVGL Pro

LVGL Open gives you the engine. Hand-writing C for it works well for a few screens you maintain alone. Shipping a product is a different job, and that's what LVGL Pro is for:

• See the pixels, not the code: An instant, pixel-perfect preview instead of compile, flash, look, repeat. A huge productivity boost.
• Naturally clean structure: Create components with their own API, share styles across the project, and handle multiple targets from one codebase. You can write clean C code, but XML is way more maintainable.
• CI/CD integration: The CLI tool runs headlessly to validate XMLs, run tests, or generate plain LVGL code.
• Designers in the loop: Turn real Figma designs into XML with 1 click using the Figma plugin, and let designers, managers, or customers open the project in the Online Viewer to review or even edit it, with nothing to install.
• Work faster and better with AI: Agents can access the docs via our MCP server, generate XML, and the CLI tool can locally validate and produce screenshots, so agents can iterate without guessing.

In short, LVGL Open is great for personal and small projects. LVGL Pro - as the name implies - is for professionals working on complex projects in teams.

Features

• Familiar environment: A VS Code-like editor with file navigation, search, Git integration, an integrated terminal, and extensions.
• Component-oriented XML: Build reusable components with a custom API in a readable, HTML-like syntax.
• Instant preview: A pixel-perfect preview that updates as you edit, with an inspector for spacing, click areas, and sizing.
• Design mode: Edit UIs visually with a curated set of exposed properties.
• Expressions: Compute property values from constants, custom properties, and the active target.
• Animations, data binding, and translations: Organize animations into timelines, bind widgets to app data, and manage localization.
• Assets and memory management: Track images and fonts, plan memory regions, and estimate usage and access times.
• Multiple targets: Handle several resolutions or architectures in a single project.
• Figma import: Bring in layouts, widgets, data bindings, and navigation with the LVGL Flow plugin.
• AI integration: An LVGL-aware MCP server to access the docs, plus a CLI for agents to validate and screenshot their own work.
• C export and runtime loading: Export plain LVGL C code, or load the XML at runtime without recompiling.
• Testing and debugging: Create UI tests and debug the exported C code inside the editor.
• Online sharing: Open projects in the browser and share them without any local setup.

Why XML

Describing UIs in XML rather than only through drag-and-drop editing has several advantages:

• Familiar: HTML-like syntax that is easy to learn and read.
• Version-control friendly: plain text with readable diffs, no binary files.
• Easy to share: copy, paste, and send as text.
• Reusable: copy snippets across projects and compose UIs from smaller components.
• Automation ready: scripts and CI/CD systems can process XML directly.
• AI compatible: a small, schema-checked target that AI tools can parse, generate, and refactor, with validation errors instead of silent mistakes.
• Runtime loading: parse XML on the target device without recompiling.
• Cross-platform: the same XML works across all LVGL targets.

Workflow

1. Create reusable components in the editor and use the instant, pixel-perfect preview to see them render live.
2. Build screens from those components, then add tests, transitions, data bindings, and translations in XML.
3. Add custom logic or widgets in C, then recompile the editor's preview so your C runs both in preview and on the target.
4. Import from Figma with the LVGL Flow plugin to bring in styles, layouts, data bindings, and navigation.
5. Integrate the UI into your project by exporting LVGL C code or loading the XML at runtime.
6. Collaborate by pushing to a GitHub repo and opening it in the Online Viewer, so teammates, designers, or managers need no local setup.
7. Automate in CI/CD with the CLI to export C code and run UI tests as part of your pipeline.
8. Bring in AI with the MCP server for grounded LVGL knowledge, and let the CLI's validate and screenshot close the loop so the assistant can check its own work.

Get Started

In your browser

Open the Online Viewer, then pick an example or tutorial to explore. No install needed.

Locally

1. Download the LVGL Pro Editor for Windows, Linux, or macOS from the Releases page, or from lvgl.io/pro.
2. On first launch, pick the free Community or Evaluation license.
3. Create an example or tutorial project and open a screen to start from. Hello World is a good first stop.

The Learn by Examples projects cover animations, assets, data bindings, components, widgets, screens, styles, testing, and translations. The same examples also appear interactively in the LVGL docs, alongside their equivalent C code.

Licensing

LVGL Pro has a royalty-free licensing model designed for open-source projects, startups, and enterprises alike:

• Community: free for makers, personal use, and open-source projects.
• Evaluation: free. Select it when launching the editor to try LVGL Pro before committing.
• Product: a per-product license with no seat counting and no yearly renewal, covering your whole team for the product's development lifetime.
• Platform: for organizations standardizing UI development on LVGL and LVGL Pro across multiple products, with options such as floating licenses and on-premise license servers.

See the current plans and details at lvgl.io/pro#pricing. For a quote or a startup-friendly price, use the contact button there or email lvgl@lvgl.io.

Feedback

We are building this tool for you, and your feedback drives its development.

Please open an issue to share suggestions, report bugs, or request features. You can also reach us on the forum or at lvgl@lvgl.io.

Thank you! ❤️