lvgl/lvgl_editor

Website | Docs | Try Online | Download | Forum | Licensing

The Complete Workflow for
Professional LVGL UI Development

Design, develop, test, debug, and ship production-ready embedded UIs with an LVGL-native editor, Figma integration, online collaboration, and CLI tools. LVGL Pro exports plain LVGL code, so no additional runtime is needed.

Try it in your browser  •  Download the Editor

Free for evaluation, personal use, and open-source projects.

Open vs Pro • What You Get • Licensing • Why XML • Get Started

LVGL Open vs LVGL Pro

The open-source LVGL library is the foundation for creating scalable and vendor independent UIs in C. LVGL Pro adds the complete workflow around it, saving 50-80% of the development time ¹ and improving collaboration between developers, designers, and product owners.

Both produce the same thing in the end: plain LVGL C code that you compile into your application.

Use LVGL Open directly when the UI is relatively small, a code-first workflow works well, and one or two developers can comfortably maintain it.

Add LVGL Pro when the UI workflow becomes critical, such as when designers join, product variants multiply, the screen count grows, or rapid iteration matters.

What You Get

LVGL Pro is four connected tools: the Editor, the Online Viewer, LVGL Flow for Figma, and the CLI. With these, LVGL Pro:

1. Lowers cost. Free up every second developer from UI work.
2. Speeds up time to market: Ship weeks or months earlier and start making revenue sooner.
3. Streamlines reviews: Open the UI in a browser and give feedback whenever it suits you. No meeting needed.
4. Speeds up iteration: Working on a clean, organized UI is a pleasure, and backing it with tests lets you move fast without breaking anything.

This is how LVGL Pro achieves them:

1 second iterations instead of 2 minutes

Every UI change on a normal embedded workflow means compile, run/flash, navigate to the screen, and look. And you do it hundreds of times a day.

In the LVGL Pro Editor the preview updates as you type. When something looks wrong, the Inspector shows you the layout, spacing, sizing, click areas, and object hierarchy at runtime, so you stop guessing at why a widget is four pixels off. The editor itself is a familiar VS Code-like environment with file navigation, search, Git integration, extensions, and a terminal. You can also debug the generated and your own C code without leaving the Editor.

Designers and developers work on the same UI

With LVGL Flow for Figma you can make the Figma components LVGL aware, then export screens, layouts, styles, data bindings, and navigation straight into the project. No more reimplementing someone else's work in code. Read the Figma Flow docs.

Going the other way, the Online Viewer opens any GitHub-hosted LVGL Pro project in a browser, so teammates, managers, and customers can click through the real UI without installing anything. Private repositories stay private: opening one needs a GitHub login, so only the people who already have access to the repository can see it.

Agents that see what they build

An AI agent writing C is working blind. It produces code, then stops and waits for a human to compile it, look at it, and describe what came out wrong.

In LVGL Pro the loop closes. The agent writes XML, validates it with the CLI, renders a screenshot, and compares the result against what was actually asked for. An LVGL-aware MCP server gives it grounded access to the documentation instead of half-remembered APIs. Besides, lvgl_widgets_xml lists every built-in widget with all of its properties, styles, and enums, so it stops inventing attributes.

Tests and builds that run themselves

The CLI validates projects, exports C code, runs UI tests, compiles previews, and generates screenshots, locally or in CI. Tests are repeatable interactions checked against screenshots, so a UI regression fails the build instead of reaching a customer. See the full CLI documentation.

Big UIs stay maintainable

Screens are built from components you define yourself, with custom properties and a clear public API. Change the component and every screen using it follows immediately. Styles, constants, data bindings through LVGL Subjects, animation timelines, and translated strings all work the same way: defined once, used everywhere, changed in one place.

The same holds across hardware. A single project can carry several targets for different resolutions, hardware configurations, or product variants, so a second display size is a block in the project instead of a fork of it. Images and fonts live alongside the UI, and you can estimate asset memory, assign memory regions, and review access time early on.

Licensing

Licensing is per product, not per seat and not per device. A Product license covers the whole team for at least five years, so the yearly cost is less than a single developer's monthly salary.

• Community: Free, unlimited seats, for makers, personal use, and open-source projects.
• Evaluation: Free access for testing LVGL Pro with your own designs, code, and development workflow.
• Growth: Custom price for one product, up to 2 active seats. For small and growing companies.
• Product: $20,000 for one product, up to 5 active seats, minimum 5 years. Covers the complete product development team.
• Platform: Custom, organization-wide across all products.

See the current plans at lvgl.io/pro/pricing.

Whatever happens, you own the output. It is plain LVGL C that you can keep maintaining by hand, with no royalties and no per-device fees.

It is also possible to load the XML files at runtime, without exporting C code and rebuilding the firmware. Contact us at [email protected] to learn more.

Why XML?

LVGL Pro stores the UI in readable, declarative XML (similar to HTML) rather than in a proprietary binary project format. That keeps the project reviewable in a pull request, mergeable in Git, and open to any script, CI job, or AI tool you point at it.

If you are already familiar with the C API of LVGL, XML will be familiar too, because it exposes the same properties under the same names:

<screen>
	<view>
		<column gap="#space_lg" pad="#space_lg">
			<lv_label text="Device Dashboard" style_text_font="font_h3" />

			<row vertical_align="center" gap="12" pad="4">
				<lv_slider width="240" bind_value="subject_brightness" />
				<lv_label bind_text="subject_brightness" />
			</row>

			<lv_button>
				<lv_label text="Apply Setting" />
				<event_cb callback="my_callback" trigger="clicked" />
			</lv_button>
		</column>
	</view>
</screen>

Here <row> and <column> are custom components, and #space_lg is a constant.

See the XML syntax documentation for the full reference.

Get Started

Try it in your browser

Open the LVGL Pro Online Viewer and select an example or tutorial. No installation is required.

Install the Editor

1. Download LVGL Pro for Windows, Linux, or macOS from the GitHub Releases page or the LVGL Pro website.
2. Launch the editor and select the free Community or Evaluation license.
3. Click the Learn more button, open a screen, change a property, and see the preview update immediately.
4. Explore the generated C code and run the project on your target.

Examples in the Docs

The examples in the documentation of LVGL Open and LVGL Pro contain both the XML and the C code.

Feedback

LVGL Pro is developed together with the LVGL community and the teams using it in real products.

Please open an issue to report a bug, suggest an improvement, or request a feature.

You can also reach us through the LVGL Forum or at [email protected].

Thank you! ❤️