Real-Time Preview

Watch your site update within seconds as the AI builds it, no refresh needed. Switch between desktop, tablet, and mobile views to test your responsive layout.

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:

ViewWidth
Desktop1280px+
Tablet768px
Mobile375px

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:

  1. Click the Refresh button in the toolbar
  2. Check for errors in the AI messages
  3. Ensure the dev server is running (shown in status bar)

Next Steps