Preview lets you run the current project in a live rendering simulation that matches the final implementation exactly.

Overview

Clicking the preview button in the toolbar switches the editor to preview mode. In preview mode, the editor provides a live rendering simulation of the screens and widget behavior, so you can validate layout, interaction, and resource rendering without generating firmware or flashing a device.

Because preview runs the same generated code as the target, the observed behavior matches the final implementation exactly.

Starting a preview

  1. Open the screen you want to validate in the editor canvas.
  2. Click the preview button in the toolbar to enter preview mode.
  3. Interact with the rendered screen to verify behavior.
  4. Click the pause button to return to edit mode.

What preview validates

  • Layout - widget positioning, alignment, and responsive behavior.
  • Rendering - images, fonts, and Lottie animations.
  • Interaction - button states, sliders, and navigation.
  • Communication - messages triggered by events, handled by the runtime's communication layer.

Runtime version

Preview uses the active LVGL runtime version selected in the toolbar. Switching the version re-runs the preview against the corresponding runtime.

Note

Preview is a development aid. Always validate the final firmware on the target device, as real hardware timings and resources can differ from the simulator.

  • Overview - the editor interface as a whole.
  • Canvas - design the screens that preview renders.
  • Toolbar - the preview button and runtime version selector.
  • Image - preview image rendering.
  • Font - preview typography rendering.
  • Dynamic LVGL version - the runtime version preview executes on.
  • Override screen size - the display resolution used by preview.
  • Codegen - the generated code that preview executes.
  • Transplant - move preview output to a target device.