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

Wanneer je een app-concept opent, kan Kazzle een dev server starten en een live preview weergeven.

## Hoe het werkt

1. Open een concept-tabblad vanuit de zijbalk
2. De preview start automatisch (of klik handmatig op "Preview starten")
3. Kazzle leest `lifecycle.dev` uit je `kazzle.config.ts`
4. De dev-opdracht wordt uitgevoerd op de toegewezen poort
5. De preview-URL verschijnt in het concept-tabblad

## De dev-opdracht configureren

Stel `lifecycle.dev` in op je 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' }
    }
  ]
});
```

Als `lifecycle.dev` niet is ingesteld, valt het preview-systeem terug op automatische detectie van veelgebruikte dev servers (Vite, Next.js, enz.).

## Preview-URL's

Elke app krijgt een toegewezen poort in zijn sandbox. De preview-URL volgt dit patroon:

```
http://localhost:{PORT}
```

De `PORT` omgevingsvariabele wordt automatisch ingesteld door het preview-systeem.

## Hot reload

Wijzigingen in je code worden opgehaald door de hot reload (HMR) van je dev server. De preview wordt in real-time bijgewerkt terwijl jij of de AI bestanden bewerkt.

## Handmatige besturingselementen

* **Preview starten** — start de dev server als deze niet actief is
* **Preview stoppen** — beëindigt het dev server-proces
* **Opnieuw starten** — stoppen + starten (handig na configuratiewijzigingen)

## Verificatie

Een preview wordt alleen geverifieerd wanneer het app-dev-tabblad opent en de verwachte UI weergeeft. Een timeout, mislukt tabblad openen, gestopt proces of ontbrekende preview-URL betekent dat de preview nog niet is geverifieerd.

Wanneer de AI een app bouwt, moet deze het app-dev-tabblad openen nadat het concept is gestart of gewijzigd. Het mag niet alleen op basis van opdrachtuitvoer claimen dat de app actief is.