Skip to main content

​
Real-time Preview

The preview panel shows your app running in real-time, allowing you to test features and interactions as you build.

​
How It Works

The preview runs your actual Expo app in a web-based environment. It’s not a mockup—it’s the real app with full interactivity.
Changes typically appear in 5-30 seconds after the AI finishes generating code, depending on complexity.

​
Preview Controls

The preview header includes several useful controls:
ControlFunctionAvailability
🔄 ReloadRefresh the preview to latest codeAll projects
📱 QR CodeGet QR code for mobile previewAll projects
↔️ LayoutToggle between different view layoutsAll projects
📊 LogsView console logsAll projects (frontend); Liquid Backend only (backend)
🗄️ DatabaseBrowse database tablesLiquid Backend only
Which backend am I using? If you see a “Database” button, you’re on Liquid Backend. Otherwise, you’re using Supabase. See Backend Systems.

​
Testing Your App

  • Tap buttons and links to navigate
  • Swipe to go back on iOS-style navigation
  • Test tab bars and bottom navigation

​
Forms & Input

  • Text fields accept keyboard input
  • Dropdowns and pickers work as expected
  • Form submission triggers your logic

​
Gestures

  • Scroll through lists and content
  • Swipe gestures for actions like delete
  • Pull-to-refresh where implemented

​
Preview on Your Device

For the most accurate testing, preview on your actual phone:
1

Install Expo Go

Download Expo Go from the App Store or Play Store
2

Get QR Code

Click the QR Code icon in the preview header
3

Scan & Open

  • iOS: Use your Camera app to scan
  • Android: Use Expo Go’s built-in scanner
Your phone must be on the same network as your computer for the preview to connect.

​
Benefits of Device Preview

  • Accurate gestures - Touch feels native
  • Real performance - See actual speed and animations
  • Native features - Test camera, notifications, etc.
  • Device differences - Catch iOS vs Android issues

​
Preview Limitations

Some features work differently in preview vs. production:
FeaturePreviewProduction
Push NotificationsSimulated onlyFull functionality
CameraLimited supportFull access
Deep LinksNot availableFully working
App IconGeneric ExpoYour custom icon
Native ModulesSome limitationsAll features
For features that require production testing, use the APK build for Android testing before App Store deployment.

​
Viewing Logs

Click the Logs icon to see console output from your app.

​
Frontend Logs (All Projects)

Frontend logs are available for all projects:
  • Console.log messages from your code
  • Errors and warnings for debugging
  • Network requests showing API calls
  • React Native logs for deeper debugging

​
Backend Logs

Backend logs are available in Natively:
  1. Click the Logs icon in the preview header
  2. Switch to the Backend tab
  3. View API calls, errors, and server logs

​
Using Logs for Debugging

When something isn’t working:
  1. Open the logs panel
  2. Reproduce the issue in the preview
  3. Look for error messages or unexpected values
  4. Share log content with the AI for help
The add to cart button logs "undefined" when I tap it.
Here's what I see in the logs:
[Error log content]

​
Database Viewer

The Database Viewer lets you inspect your data directly in Natively:
  • Browse tables - See all your data tables
  • View records - Inspect individual entries
  • Verify data - Confirm your app is saving correctly
Click the Database icon (🗄️) in the preview header to open it.

​
Layout Options

Switch between different layout modes:

​
Dual Panel

  • Chat on the left
  • Preview on the right
  • Best for focused development

​
Triple Panel (Code Visible)

  • Chat on the left
  • Code Editor in the middle
  • Preview on the right
  • Best when editing code directly

​
Mobile View

On smaller screens, toggle between chat and preview with the bottom tab bar.

​
Troubleshooting Preview

​
Preview Not Loading

  1. Click the Reload button
  2. Check if build is still in progress (status indicators)
  3. Try a hard refresh of the browser page
  1. Read the error message for clues
  2. Check the logs for more details
  3. Ask the AI to fix the issue
  1. Ensure phone and computer are on same network
  2. Check if VPN is blocking connection
  3. Try closing and reopening Expo Go

​
Changes Not Appearing

  1. Wait for build to complete
  2. Click Reload button
  3. Check for build errors in activity feed
Sometimes preview state persists. Reload the preview for a fresh start.

​
Best Practices

Test Early and Often

Check the preview after each AI response to catch issues quickly

Use Device Preview

Test on your actual phone for critical features and before deployment

Check Both Platforms

iOS and Android can behave differently—test both if possible

Monitor Logs

Keep logs open to catch errors and debug issues faster

​
Next Steps

Code Editor

Edit code directly for fine-tuned control

Deployment

Deploy your tested app to stores