# Preview (/syntax/preview)



The preview feature lets you define how components and widgets appear in the Editor's preview pane without affecting the generated code.

Overview [#overview]

In `component` and `widget` elements, you can define `preview` tags to customize how the Editor displays your UI. These previews are **not** exported to code and are **not** loaded from XML.

Previews are useful for:

* Changing the preview background to dark or light colors
* Centering components within the preview area
* Setting margins and padding
* Adjusting the preview size and dimensions
* Making preview corners rounded with `style_radius`

Usage [#usage]

Think of a `preview` tag as an `lv_obj` container with the following configurable properties:

* `width`, `height` - Set the preview dimensions
* Style properties - Use properties like `style_bg_color="0x333"` to customize appearance
* Layout properties - Use `flex` and `flex_flow` for flexible layouts

You can define multiple previews for a single component or widget. In the Editor, you can switch between different preview configurations to see how your component appears in various contexts.

For Screens [#for-screens]

Screens use a different preview approach than components and widgets. Instead of preview tags, screens leverage multiple `display` elements defined in your `project.xml` file.

When developing screens in the Editor, you can select from all defined displays in the Preview panel. This allows you to:

* View the screen at different resolutions
* Test with different color depths
* Verify responsive design behavior across multiple target hardware configurations

Example [#example]

```xml title="xml" lineNumbers=1
<component>
  <previews>
    <preview name="small_dark_round"
      width="240" height="240"
      style_bg_color="0x333" style_pad_all="32"
      style_radius="32"/>

    <preview name="large_light"
      width="1980" height="1080"
      style_bg_color="0xeeeeee"/>
  </previews>

  <view>
    <!-- Component content here -->
  </view>
</component>
```