> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openv2.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview

> Use the in-browser device frame to iterate fast, test on real hardware, and inspect UI elements.

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.

<Info>
  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.
</Info>

## 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:

<Tabs>
  <Tab title="Expo Go + QR code">
    <Steps>
      <Step title="Install Expo Go">
        Download **Expo Go** from the iOS App Store or Google Play.
      </Step>

      <Step title="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.
      </Step>

      <Step title="Scan and open">
        Scan the QR code with your phone's camera or the Expo Go app. The app loads through Expo's networking.
      </Step>
    </Steps>

    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.
  </Tab>

  <Tab title="Tunnel preview">
    Openv2's tunnel option lets your phone reach the dev server without being on the same network — useful when you're on a different Wi-Fi or a mobile connection.

    Open the **QR / tunnel** panel in Preview and follow the on-screen steps to get a shareable tunnel URL or QR code.
  </Tab>
</Tabs>

<Warning>
  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.
</Warning>

## 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."

<Tip>
  The element inspector is most useful for spacing, color, and copy tweaks where describing the exact element in text would be ambiguous.
</Tip>

## 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:

| Aspect                           | Web preview                        | Native device                    |
| -------------------------------- | ---------------------------------- | -------------------------------- |
| Native APIs (camera, push, etc.) | May not work or behave differently | Full support                     |
| Performance                      | May differ from native             | Reflects real device performance |
| Fonts and animations             | Mostly consistent                  | Exact native rendering           |
| Safe areas                       | Simulated by device frame          | Real 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.

<CardGroup cols={2}>
  <Card title="Test on your device" icon="mobile-screen" href="/test-on-device">
    Step-by-step guide for Expo Go, QR codes, and tunnel preview.
  </Card>

  <Card title="Builds & mobile" icon="hammer" href="/builds-mobile">
    Create an iOS or Android binary for distribution.
  </Card>
</CardGroup>