Real-Time Preview

Watch your site update as the AI builds it. Navigate it like a real site, pick pages, refresh, open it in a new tab, and edit elements by clicking them.

The preview panel shows your website as the agent builds it. Changes appear within seconds of the code being written, with no manual refresh.

What you can do in the preview

  • Navigate: click links and menus; the preview behaves like a real browser
  • Pick a page: the page box at the top lets you search or choose which page to show
  • Refresh: force a reload if something looks stale
  • Open in a new tab: view the site in a full browser window, useful for checking phone and tablet layouts by resizing the window
  • Click to edit: with the pointer button in the chat box switched on, click any text, link or image and change it yourself, or describe a bigger change for the AI. See Quick Edits.

Responsive checks

The preview panel shows one width at a time. To check other sizes, open the site in a new tab and resize the browser, or ask the AI directly: "check the mobile layout of the header and fix anything that overflows". The agent renders your site in a browser at phone size when it works, and fixes layout errors it finds.

Sharing the preview

Before publishing, you can share a preview link with a client or a friend for feedback (project menu on desktop, Share preview in the mobile menu). The preview address is temporary and separate from your published site.

If the preview is not updating

  1. Click Refresh in the preview bar
  2. Check the chat for an error the agent reported
  3. Ask the AI: "restart the dev server"
  4. Hard refresh the browser tab (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)

More in Troubleshooting.

Next steps