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

# Live Preview

> See your changes in real-time

The live preview shows your project exactly as it will appear to users. It updates automatically as Leo makes changes.

## How It Works

When Leo makes changes to your project:

1. **Code is updated** - Files are modified automatically
2. **Preview refreshes** - Your app updates in real-time
3. **You see the result** - No need to refresh manually

## Privacy & Access

Your project's preview URL includes a unique access token (e.g. `?auth=<unique-token>`) that's required to load the app. Without the full URL, the preview shows a login wall — so **unpublished projects are not reachable on the open web**.

This means:

* **Anyone with the full preview link** can view the project
* **Anyone without it** cannot — the URL is not indexed by search engines and cannot be guessed
* **Sensitive business data is safe** while you're building

When you click **Publish**, your project moves to a public URL and the token is no longer required. Until then, your work stays gated.

For an extra safeguard against accidental publishing, use the **[Private Project](/features/private-projects)** toggle.

## Preview Features

### Mobile View

Toggle between desktop and mobile views to see how your app looks on different devices.

### Reload Preview

If something doesn't look right, click the reload button to refresh the preview.

### Open in New Tab

View your preview in a full browser window for a better testing experience.

### Network Monitor

See all API calls your app makes to integrations. Useful for debugging.

## Using the Preview

### Testing Functionality

* **Click buttons** - Test interactive elements
* **Fill forms** - Try out form submissions
* **Navigate** - Click through your app
* **Check responsiveness** - Test on different screen sizes

### Debugging

* **Check console** - Open browser dev tools if needed
* **Network Monitor** - See API calls in real-time
* **Inspect elements** - Use browser tools to debug

## Preview Layout

The preview is displayed alongside the chat interface:

* **Left side** - Chat with Leo
* **Right side** - Live preview
* **Resizable** - Adjust the split to your preference

## Mobile Preview

On mobile devices:

* Preview opens in a modal
* Tap the preview button to view
* Close when done
* Full-screen experience

## Troubleshooting

If the preview isn't updating:

1. **Check deployment status** - Make sure the project is deployed
2. **Reload preview** - Click the reload button
3. **Clear cache** - Right-click preview and clear cache if needed
4. **Check for errors** - Look for error messages in the chat

<CardGroup cols={2}>
  <Card title="Network Monitor" icon="activity" href="/features/network-monitor">
    Debug API calls and see what's happening
  </Card>

  <Card title="Deploy & Preview" icon="rocket" href="/getting-started/deploy-preview">
    Learn about deployment options
  </Card>
</CardGroup>