Skip to main content
Preview shows your web app output and offers browser debugging tools. Your running web app has a temporary development URL. The Preview tool renders the page inside the Project Editor. For access controls and URL behavior, see Development URLs. This example shows a running web app in Preview. Running Studio Épure storefront in Preview, with annotations identifying back and forward, reload, address field, Webview logs, screen size, and open in a new tab

​
Features

Preview includes the following functionality to help you test and debug your web apps:
  • Live web view: See your app and interact with it without leaving your browser tab.
  • Logs: Review browser and workflow output.
  • Responsive testing: View your app in different screen sizes.

​
Usage

Preview automatically opens when you run a web app. You can toggle this behavior in User Settings, under App Preview, using Automatic Preview.
In the Project Editor tab bar, select Preview, beside Tools.

​
Location bar

Once your web app is running, the location bar at the top of Preview provides navigation controls:
  • Back and Forward: Navigate through the app’s browsing history.
  • Refresh: Reload the app.
  • Address field: View the current URL path or enter a new path.

​
Browser tools

The location bar also provides:
  • Screen size: Select a screen-size preset to test responsive designs.
  • Webview logs: Toggle the logs panel.
  • Open in a new tab: Open your app in a separate browser tab.
Building a mobile app? Preview also supports mobile previews. See Native Mobile Apps for simulator and emulator details.

​
Webview logs

With your web app running, select Webview logs in the Preview location bar to open the logs panel. The Webview Logs tab displays browser log messages from your app. Available workflow tabs, such as Server Logs, show output from running tasks. Use Dock to right or Dock to bottom to move the logs panel. Select Close to hide it. For DOM inspection, network requests, and browser storage, open the app in a new browser tab and use your browser’s developer tools.