How It Works
When Leo makes changes to your project:- Code is updated - Files are modified automatically
- Preview refreshes - Your app updates in real-time
- You see the result - No need to refresh manually
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:- Check deployment status - Make sure the project is deployed
- Reload preview - Click the reload button
- Clear cache - Right-click preview and clear cache if needed
- Check for errors - Look for error messages in the chat