UIFlow2 Officially Supports LVGL: Enabling Greater Flexibility in Hardware UI Development

In today's fast-evolving IoT and smart hardware landscape, a smooth and responsive user interface (UI) has become just as important as core functionality.

M5Stack, continuing to refine its visual programming platform UIFlow2, now officially integrates the powerful LVGL (Light and Versatile Graphics Library) — giving makers and developers the best of both worlds: the speed of visual programming and the freedom of a professional embedded GUI framework.

Why LVGL?

UIFlow2, built on MicroPython, is designed to lower the barrier for hardware programming. Earlier versions included basic controls and drawing functions — useful for simple projects but less suited for complex UI needs.

LVGL changes the game. It's an open-source, lightweight, cross-platform embedded GUI library with:

• Rich widget library: Buttons, sliders, progress bars, charts, and more
• High-performance rendering: Adaptable to different display memory sizes and refresh rates
• Flexible extensibility: Animations, themes, event callbacks, and advanced custom styling

With UIFlow2's LVGL integration, developers can start by dragging and dropping blocks, then fine-tune behavior via Python code — moving seamlessly from beginner-friendly to pro-level control.

What's Available Now

UIFlow2 already supports LVGL in its first integration phase:

• Controller support: Core2, Tough, Dial, CoreS3, Tab5, and more ready to go
• Standard widgets: Buttons, labels, images available instantly in the visual editor
• Drag, drop, adjust: Direct manipulation of LVGL elements with live attribute tweaks
• Font optimization: One-click custom font generation & download for better localization
• Full Python API access: Call LVGL functions directly in "Code Mode" to build advanced logic

Whether you're a first-time maker or a seasoned embedded engineer, you can design and deploy interactive UIs faster than ever.

Getting Started in 4 Steps

1. Launch UIFlow2 Web IDE

Power on your M5 device and connect to the UIFLow2 online editor.

2. Enable LVGL Support

Select M5UI in settings to enable related blocks.

3. Add Widgets or Write Code

Block Mode: Drag and drop "Button", "Label" and other controls directly.

Code Mode Example:

import m5ui
import lvgl as lv
import M5

M5.begin()
m5ui.init()

page0 = m5ui.M5Page(bg_c=0xffffff)

button0 = m5ui.M5Button(
    text="click me",
    x=115,
    y=153,
    bg_c=0x2196f3,
    text_c=0xffffff,
    font=lv.font_montserrat_14,
    parent=page0
)

label0 = m5ui.M5Label(
     "Hello M5!!!",
     x=123,
     y=82,
     text_c=0x000000,
     bg_c=0xffffff,
     bg_opa=0,
     font=lv.font_montserrat_14,
     parent=page0
)

page0.screen_load()