Live Preview

How It Works

Every project runs in an isolated workspace container with its own Vite development server. The preview shows your project exactly as users will see it.

Real-Time Updates

Changes appear instantly in the preview:

• AI edits — Preview updates as the AI writes code
• Design Mode edits — Changes are reflected immediately
• HMR (Hot Module Replacement) — No full page reload needed

Preview Toolbar

When the Preview tab is active, the toolbar shows:

• Refresh — Force a full reload
• Responsive views — Desktop, tablet, mobile viewports
• Open in new tab — View preview in a separate browser tab
• Start / Stop Workspace — Bring the workspace up or shut it down

There is no screenshot button. The agent captures the preview itself when it needs to see the result of a change.

Backend Preview

For Web App projects, the preview also serves your backend API. The frontend proxy routes /api/ requests to the backend server automatically.

Cloud Workspaces

Each workspace runs in its own Docker container with:

• Isolated file system
• Own development server (Vite)
• Own backend process (FastAPI, if Web App)
• Automatic idle detection and hibernation

Workspace Stability

The workspace stays alive while the AI agent is working, even if you switch browser tabs. It automatically hibernates after a period of inactivity and wakes up when you return.