Website | Docs | Online Viewer | Forum | Pricing
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 • Features • Why XML • Workflow • Get Started • Licensing • Feedback
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:
- 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.
- 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.
- Figma plugin (LVGL Flow): Bring a Figma design into LVGL Pro, including layouts, widgets, data bindings, and screen navigation. See how it works here.
- 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.
- 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: Use AI assistants with an LVGL-aware MCP server.
- 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.
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: AI tools can parse, generate, and refactor XML.
- Fast to edit: quicker to type and refactor than dragging elements.
- Runtime loading: parse XML on the target device without recompiling.
- Cross-platform: the same XML works across all LVGL targets.
- Create reusable components in the editor and use the instant, pixel-perfect preview to see them render live.
- Build screens from those components, then add tests, transitions, data bindings, and translations in XML.
- Add custom logic or widgets in C, then recompile the editor's preview so your C runs both in preview and on the target.
- Import from Figma with the LVGL Flow plugin to bring in styles, layouts, data bindings, and navigation.
- Integrate the UI into your project by exporting LVGL C code or loading the XML at runtime.
- Collaborate by pushing to a GitHub repo and opening it in the Online Viewer, so teammates, designers, or managers need no local setup.
- Automate in CI/CD with the CLI to export C code and run UI tests as part of your pipeline.
Open the Online Viewer, then pick an example or tutorial to explore. No install needed.
- Download the LVGL Pro Editor for Windows, Linux, or macOS from the Releases page, or from lvgl.io/pro.
- On first launch, pick the free Community or Evaluation license.
- Create an example or tutorial project and open a screen to start from.
Hello Worldis 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.
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.
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! ❤️