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

# Web Preview Testing

> Test your app instantly in the built-in preview with react-native-web

# Web Preview Testing

Every a0 project includes a live preview that updates instantly as you code.

<Info>
  The web preview uses react-native-web to show your app directly in the browser, providing the fastest development feedback loop.
</Info>

## How It Works

The preview panel appears next to your chat conversation, showing your app in real-time:

* **Instant Updates**: Changes appear immediately as you save
* **Console Logs**: View debug output directly in your browser console
* **Responsive Testing**: Test different screen sizes

## Using Web Preview

### Viewing Your App

Your app preview loads automatically when you open a project. The preview runs a react-native-web version of your app, giving you immediate visual feedback.

<Tip>
  On desktop, look for the refresh icon above the preview to manually reload if needed.
</Tip>

### Debugging with Console

```javascript theme={null}
// All console methods work in web preview
console.log('Debug message');
console.error('Error details');
console.table(data);
console.time('Operation');
// ... your code
console.timeEnd('Operation');
```

### Testing on Mobile Devices

<Steps>
  <Step title="Click 'View on your Phone'">
    Find the **View on your Phone** button in your a0 interface.
  </Step>

  <Step title="Scan QR Code">
    A QR code appears with instructions:

    * If you have the a0 app → Opens directly
    * If not → Shows install option
    * Also works with Expo Go v52
  </Step>

  <Step title="Test on Device">
    Your app loads on your phone with hot reloading enabled. Changes sync automatically without rescanning.

    <Check>
      The connection persists across different apps - no need to rescan unless you refresh the page.
    </Check>
  </Step>
</Steps>

## Limitations

* ❌ Native device features (camera, biometrics)
* ❌ Push notifications
* ❌ Native modules
* ❌ Platform-specific components
* ⚠️ Some React Native libraries may not be web-compatible

<Warning>
  The web preview shows a react-native-web version of your app. Some features that work on mobile may behave differently or not work in the web preview.
</Warning>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Preview not updating">
    * Click the refresh icon above the preview
    * Hard refresh the page if needed
    * Check console for errors
  </Accordion>

  <Accordion title="Styling differences from mobile">
    React Native Web may render some styles differently:

    * Test critical layouts on actual devices
    * Use the mobile preview for accurate representation
    * Consider Platform-specific styles when needed
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Test on Mobile" icon="mobile" href="/development/testing/mobile-app-testing">
    Use the QR code to test on real devices with the a0 app or Expo Go.
  </Card>

  <Card title="Build Native App" icon="hammer" href="/development/testing/native-build-testing">
    Need to test payments or native features? Build an IPA or APK.
  </Card>
</CardGroup>