The editor is the visual design surface where you build the screens and widgets of a project. This guide describes the editor interface and its components.
Overview
Open a project in edit mode to enter the editor. The editor provides a live, drag-and-drop canvas for designing LVGL interfaces. Widgets are placed on the canvas, arranged with alignment guides, and customized through the inspector.
The editor interface is organized into a set of components, each with a dedicated role:
| Component | Role |
|---|---|
| Toolbar | Command actions such as view switching, preview, undo/redo, export, and settings. |
| Navigator | Navigate and manage the screens and widgets of the project. |
| Inspector | Inspect and edit the properties of the selected widget. |
| Statusbar | Display editing status and document synchronization state. |
| Canvas | The central area with live widget rendering and editing. |
| Settings | Configure the UI and the project. |
| Preview | Run a live rendering simulation of the project. |
Interface components
Toolbar
The toolbar hosts commands for the current document: switching between editor, resource, font library, and code views; toggling preview and the LVGL runtime version; home, new project, undo/redo, export; and opening settings. See the Toolbar guide.
Navigator
The navigator contains the screen tree and the widget tree. It lets you create, duplicate, reorder, and delete screens, select and re-parent widgets, and toggle visibility and lock states. See the Navigator guide.
Inspector
The inspector shows the properties of the selected widget and lets you edit them. It supports single, multi, and same-type multi-selection, and adapts to the active LVGL runtime version. See the Inspector guide.
Statusbar
The status bar shows editing state such as the current mode, selection, and last build, together with compliance and runtime status badges that surface the corresponding bottom panel. See the Statusbar guide.
Canvas
The canvas is the central area where widgets are dropped, selected, moved, resized, and arranged. It renders widgets live so design changes are visible immediately. See the Canvas guide.
Settings
The settings dialog groups general, project, UI, and about configuration. See the Settings guide.
Preview
Clicking the preview button switches the editor to preview mode, which provides a live rendering simulation of widget behavior that matches the final implementation exactly. See the Preview guide.
Related guides
- Workspace - create, manage, and open projects.
- Image - assign image resources to widgets.
- Font - apply typography to widgets.
- Layout - arrange child widgets with flex layout.
- Dynamic LVGL version - switch the LVGL runtime version.
- Override screen size - override the display resolution at runtime.
- Codegen - generate code from editor screens.
- Transplant - run editor output on a target device.