Skip to main content

​
Previews

When you open an app draft, Kazzle can start a dev server and show a live preview.

​
How it works

  1. Open a draft tab from the sidebar
  2. The preview auto-starts (or click “Start preview” manually)
  3. Kazzle reads lifecycle.dev from your kazzle.config.ts
  4. The dev command runs on the assigned port
  5. The preview URL appears in the draft tab

​
Configuring the dev command

Set lifecycle.dev on your UI component: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
If lifecycle.dev is not set, the preview system falls back to common dev server detection (Vite, Next.js, etc.).

​
Preview URLs

Each app gets a dedicated port on its sandbox. The preview URL follows the pattern: 
http://localhost:{PORT}
The PORT environment variable is automatically set by the preview system.

​
Hot reload

Changes to your code are picked up by your dev server’s hot reload (HMR). The preview updates in real time as you or the AI edit files.

​
Manual controls

  • Start preview — starts the dev server if it’s not running
  • Stop preview — kills the dev server process
  • Restart — stop + start (useful after config changes)

​
Verification

A preview is verified only when the app-dev tab opens and shows the expected UI. A timeout, failed tab open, stopped process, or missing preview URL means the preview is not verified yet. When the AI builds an app, it should open the app-dev tab after starting or changing the draft. It should not claim the app is running from command output alone.