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

# Real-time Preview

> See your app running live as you build

# Real-time Preview

The preview panel shows your app running in real-time, allowing you to test features and interactions as you build. We also recommend that you scan the QR code and see your mobile apps on Expo Go.

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

<Note>
  Changes typically appear in 5-30 seconds after the AI finishes generating code, depending on complexity.
</Note>

## Preview Controls

The preview header includes several useful controls:

| Control      | Function                               | Availability                                           |
| ------------ | -------------------------------------- | ------------------------------------------------------ |
| 🔄 Reload    | Refresh the preview to the latest code | All projects                                           |
| 📱 QR Code   | Get QR code for mobile preview         | All projects                                           |
| ↔️ Layout    | Toggle between different view layouts  | All projects                                           |
| 📊 Logs      | View console logs                      | All projects (frontend); Liquid Backend only (backend) |
| 🗄️ Database | Browse database tables                 | Liquid Backend                                         |

<Note>
  **Which backend am I using?** If you see a "Database" button, you're on Liquid Backend. Otherwise, you're using Supabase. See [Backend Systems](/features/backend).
</Note>

## Testing Your App

### Navigation

* **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 via Expo Go:

<Steps>
  <Step title="Install Expo Go">
    Download **Expo Go** from the [App Store](https://apps.apple.com/app/expo-go/id982107779) or [Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent)
  </Step>

  <Step title="Get QR Code">
    Click the **QR Code** icon in the preview header
  </Step>

  <Step title="Scan & Open">
    * **iOS**: Use your Camera app to scan
    * **Android**: Use Expo Go's built-in scanner
  </Step>
</Steps>

<Warning>
  Your phone must be on the same network as your computer for the preview to connect.
</Warning>

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

| Feature            | Preview          | Production         |
| ------------------ | ---------------- | ------------------ |
| Push Notifications | Simulated only   | Full functionality |
| Camera             | Limited support  | Full access        |
| Deep Links         | Not available    | Fully working      |
| App Icon           | Generic Expo     | Your custom icon   |
| Native Modules     | Some limitations | All features       |

<Tip>
  For features that require production testing, use the APK build for Android testing and TestFlight for iOS testing before deployment to App Store and Play Store.
</Tip>

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

<Tabs>
  <Tab title="Liquid Backend">
    Backend logs are available in Newly:

    1. Click the **Logs** icon in the preview header
    2. Switch to the **Backend** tab
    3. View API calls, errors, and server logs
  </Tab>

  <Tab title="Supabase">
    <Warning>
      **Backend logs are not available in Newly for Supabase projects.**
    </Warning>

    View Supabase logs in the Supabase Dashboard:

    1. Go to [supabase.com/dashboard](https://supabase.com/dashboard)
    2. Select your project
    3. Click **Logs** in the sidebar
    4. Choose: API Logs, Postgres Logs, Auth Logs, or Edge Function Logs
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Liquid Backend">
    The Database Viewer lets you inspect your data directly in Newly:

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

  <Tab title="Supabase">
    When your project is connected to Supabase, the **Database** tab is relabeled **Supabase** and shows your project details, secrets, and a link to open the Supabase Dashboard — instead of Newly's table browser.

    To browse and edit your actual data, use the Supabase Dashboard:

    1. Go to [supabase.com/dashboard](https://supabase.com/dashboard)
    2. Select your project
    3. Use the **Table Editor** to view and edit data
    4. Use the **SQL Editor** for queries
  </Tab>
</Tabs>

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

<Warning>
  **Using OneSignal (push notifications) or other native-only packages?** The web preview won't work — you need to build for a native simulator instead. See our [step-by-step guide](/guides/preview-troubleshooting) to fix this.
</Warning>

### Preview Not Loading

<AccordionGroup>
  <Accordion title="Shows blank or loading indefinitely">
    1. Click the **Reload** button
    2. Check if build is still in progress (status indicators)
    3. Try a hard refresh of the browser page
    4. If your app uses native-only packages like OneSignal (push notifications), see [My Project is Stuck on Loading Preview](/guides/preview-troubleshooting) for how to build for a native simulator instead
  </Accordion>

  <Accordion title="Shows error screen">
    1. Read the error message for clues
    2. Check the logs for more details
    3. Ask the AI to fix the issue
  </Accordion>

  <Accordion title="QR code not connecting">
    1. Ensure phone and computer are on same network
    2. Check if VPN is blocking connection
    3. Try closing and reopening Expo Go
  </Accordion>
</AccordionGroup>

### Changes Not Appearing

<AccordionGroup>
  <Accordion title="Code changed but preview unchanged">
    1. Wait for build to complete
    2. Click Reload button
    3. Check for build errors in activity feed
  </Accordion>

  <Accordion title="State seems stale">
    Sometimes preview state persists. Reload the preview for a fresh start.
  </Accordion>
</AccordionGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Test Early and Often" icon="vial">
    Check the preview after each AI response to catch issues quickly
  </Card>

  <Card title="Use Device Preview" icon="mobile">
    Test on your actual phone for critical features and before deployment
  </Card>

  <Card title="Check Both Platforms" icon="arrows-left-right">
    iOS and Android can behave differently—test both if possible
  </Card>

  <Card title="Monitor Logs" icon="terminal">
    Keep logs open to catch errors and debug issues faster
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Code Editor" icon="code" href="/features/code-editor">
    Edit code directly for fine-tuned control
  </Card>

  <Card title="Deployment" icon="rocket" href="/features/deployment">
    Deploy your tested app to stores
  </Card>
</CardGroup>