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, save, build, export, and settings. |
| Navigator | Navigate and manage the screens and widgets of the project. |
| Inspector | Inspect widget properties, edit events, and review the edit history. |
| Statusbar | Display editing status, document synchronization state, and the bottom panel. |
| Canvas | The central area with live widget rendering and editing. |
| Settings | Configure the UI, theme, canvas behavior, 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, global styles, and code views; toggling preview and the LVGL runtime version; home, new project, undo/redo, save, build and run, export; and opening settings. See the Toolbar guide.
Navigator
The navigator contains the screen tree and the widget tree, separated by a resizable splitter. 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 has three tabs: Inspector for widget properties and styles, Event for interaction handlers, and History for the document edit history. 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 object count, selection, display resolution, save state, runtime version, 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 (language, theme, canvas), project (display configuration, code export folders, auto save), 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 library - apply typography to widgets.
- Global style - project-wide style values.
- Layout - arrange child widgets with flex layout.
- Symbol - reusable components and their instances.
- 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.
- Simulator - run editor output on a local machine.