Usage of Previewer

To preview the UI display effect of a file in real-time using DevEco Studio’s Previewer, click on the Previewer tab located on the right side of the DevEco Studio interface.
During UI code development, if you add or remove UI components, simply save your changes by pressing Ctrl+S or click Reload. The Previewer will then immediately refresh to reflect the updated UI.

Note: For .ets file, Previewer only works with components which decorated with @Entry or @Preview decorator.


DevEco Studio’s Previewer offers several essential features to enhance the UI development experience:

  • Screen Rotation: You can switch between portrait and landscape orientations by clicking the Orientation button within the Previewer.


  • Device Switching: The Previewer allows you to switch between different device profiles to see how your application appears on various devices.


  • Multi-Device Preview: By enabling the multi-device preview feature, you can simultaneously view your application’s UI across multiple devices.


  • Code Inspection: ​DevEco Studio’s Inspector feature enables bidirectional interaction between the code editor, UI preview, and component tree.


These features collectively provide a comprehensive environment to visualize and fine-tune your application’s user interface across different devices and orientations.