Live Preview

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