Skip to main content
The Preview panel shows your Expo app running live inside the workbench. It’s the fastest way to see whether your changes look and behave the way you intended.

​
The in-browser device frame

Openv2 renders your app inside simulated device frames — recent iPhone, Pixel, and Galaxy profiles — so you can judge layout, safe-area insets, and overall proportions. Switch device frames from the preview toolbar when the option is available. The preview runs your app’s Expo web build in an iframe served by the Expo dev server inside your WebContainer. This gives you a tight iteration loop: most UI changes appear within seconds of the AI finishing a turn.

​
When preview updates automatically

Preview refreshes automatically through Expo’s hot reload when:
  • The AI writes or edits files and the dev server detects the change.
  • You save a file manually in the editor.
Use the reload button in the preview chrome if hot reload doesn’t pick up a change — for example, after a large dependency install or a config file edit.
If the dev server isn’t running yet (common right after a project loads), the terminal will show Expo starting up. Wait for the server to be ready before expecting Preview to refresh.

​
Switching ports

If your project exposes multiple dev server ports, a port selector may appear in the preview toolbar. Select the correct port if the default one isn’t showing your app.

​
Testing on a real device

The in-browser preview covers most UI work, but some native APIs only behave correctly on real hardware. Two ways to test on a physical phone:
1

Install Expo Go

Download Expo Go from the iOS App Store or Google Play.
2

Find the QR code

Open the QR / tunnel panel inside Preview, or look for the QR code in the terminal output from the dev server.
3

Scan and open

Scan the QR code with your phone’s camera or the Expo Go app. The app loads through Expo’s networking.
Your phone needs to be able to reach the dev server — typically the same network, or through a tunnel if you’re not on the same LAN.
Tunnel and QR preview depend on network conditions and third-party services. If the connection fails, try again on a stable network or fall back to in-browser preview only.

​
Element inspector

When the element inspector is enabled, you can click any UI element in the preview frame. Openv2 captures structured context about the component you selected — its type, styles, and position — and sends it to the AI automatically. This lets you give precise instructions without needing to know the component’s name or file location:
  1. Click the element you want to change in Preview.
  2. Type your instruction in chat: “increase the padding on this card” or “change this button’s background to the primary color.”
The element inspector is most useful for spacing, color, and copy tweaks where describing the exact element in text would be ambiguous.

​
Web preview vs. native device

The in-browser preview runs the web target of your Expo app, which behaves differently from a native iOS or Android build in a few ways:
AspectWeb previewNative device
Native APIs (camera, push, etc.)May not work or behave differentlyFull support
PerformanceMay differ from nativeReflects real device performance
Fonts and animationsMostly consistentExact native rendering
Safe areasSimulated by device frameReal hardware safe areas
Validate features that use native APIs on a real device before shipping. For everything else — layout, navigation flow, data loading, copy — the in-browser preview is accurate enough for fast iteration.

Test on your device

Step-by-step guide for Expo Go, QR codes, and tunnel preview.

Builds & mobile

Create an iOS or Android binary for distribution.