Real-Time Preview
Preview your AI-generated website in real-time as you chat with the AI agent. See changes instantly.
Watch your website come to life as you build. The real-time preview updates instantly as the AI makes changes.
How It Works
Live Updates
The preview panel shows your website exactly as it will appear to visitors:
- Changes appear within seconds of the AI writing code
- No manual refresh needed
- Hot reloading preserves your scroll position
Responsive Testing
Test how your site looks on different devices:
| View | Width |
|---|---|
| Desktop | 1280px+ |
| Tablet | 768px |
| Mobile | 375px |
Toggle between views using the device icons in the preview toolbar.
Preview Controls
Toolbar Options
The preview toolbar includes:
- Device Toggle: Switch between desktop, tablet, mobile
- Refresh: Force a preview refresh
- Open in New Tab: View in full browser window
- URL Bar: See the current page path
Navigation
Click links in the preview to navigate your site:
- Test navigation menus
- Check page transitions
- Verify link destinations
The preview behaves exactly like a real browser.
Tips
Debugging Preview Issues
If the preview isn't updating:
- Click the Refresh button in the toolbar
- Check for errors in the AI messages
- Ensure the dev server is running (shown in status bar)
Next Steps
- AI Code Generation — How code is generated
- One-Click Deploy — Publish your site