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 - event triggers and responses.

Runtime version

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