Web Preview Testing

Every a0 project includes a live preview that updates instantly as you code.
The web preview uses react-native-web to show your app directly in the browser, providing the fastest development feedback loop.

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.
On desktop, look for the refresh icon above the preview to manually reload if needed.

Debugging with Console

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

1

Click 'View on your Phone'

Find the View on your Phone button in your a0 interface.
2

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
3

Test on Device

Your app loads on your phone with hot reloading enabled. Changes sync automatically without rescanning.
The connection persists across different apps - no need to rescan unless you refresh the page.

Limitations

  • ❌ Native device features (camera, biometrics)
  • ❌ Push notifications
  • ❌ Native modules
  • ❌ Platform-specific components
  • ⚠️ Some React Native libraries may not be web-compatible
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.

Troubleshooting

Next Steps