Docs/Features/Live Preview

Live Preview

Updated Sep 19, 2026Features

Real-time preview of your project.

How It Works

Every project runs in its own workspace with a dedicated 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 gets:

  • Its own file tree and dependencies
  • Its own development server (Vite)
  • Its own backend process (FastAPI, if Web App)
  • Automatic idle detection and hibernation

Project code runs under an unprivileged system user, separate from the account the platform itself runs under. Where the runner host allows it, egress firewall rules additionally block internal service ports and the cloud metadata endpoints.

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.

Previous← Message QueueNextDesign Mode →