The toolbar hosts the command actions for the current document. It is rendered at the top of the editor and is split into three groups: the view bar, the preview bar, and the document bar.
View bar
The view bar lets you switch the central view between the main editor views:
| View | Description |
|---|---|
| Editor | The visual canvas for designing screens and widgets. |
| Resource | The resource view for importing and managing images and fonts. |
| Font library | The font library view for creating and managing font libraries. |
| Global Styles | The view for editing the style values shared by the whole project. |
| Code | The generated code view. Selecting it triggers a build of the LVGL source code before showing the code. |
Preview bar
The preview bar controls preview mode and the active LVGL runtime version:
- Preview toggle - switches the editor between edit mode and preview mode. Clicking the play button enters preview; clicking pause returns to edit mode.
- Runtime version - selects the LVGL runtime version used by the project. The available versions are LVGL 8.3.7, 9.2.2, 9.3.0, 9.4.0, 9.5.0, and 9.6.0. The selector is disabled while a version switch is in progress.
- Agent - opens the agent panel for natural-language UI building; see Agent.
Document bar
The document bar provides document-level commands:
| Command | Description |
|---|---|
| Home | Returns to the workspace. |
| New | Creates a new project from the workspace. |
| Undo / Redo | Steps backward and forward through edit history. Both are locked in preview mode. |
| Save | Writes the current document. A dot on the button marks unsaved changes; the button stays disabled while the document is already saved. |
| Build and run | Available in the desktop app: compiles what changed and launches the simulator, showing the log in the bottom panel. Use the caret to run a Full rebuild instead, or press the same button again to stop a running build. |
| Export ZIP | Regenerates the source bundle and exports it. The web app downloads a ZIP archive; the desktop app writes the files into the project's export folder. |
| Documentation | Opens this documentation site. |
| Report bug | Opens the issue tracker to report a bug. |
| Settings | Opens the settings dialog. |
When the window is narrow, action groups that no longer fit move into the ... More actions menu. The commands themselves and their availability are unchanged.
Related guides
- Overview - the editor interface as a whole.
- Preview - preview mode and the LVGL runtime version.
- Settings - the settings dialog opened from the toolbar.
- Resource management - importing images and fonts.
- Global style - project-wide style values.
- Agent - the agent panel opened from the preview bar.