> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Previews

> Dev server previews for app drafts.

# 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:

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

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.