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

# Vorschau

> Dev-Server-Vorschau für App-Entwürfe.

# Vorschau

Wenn du einen App-Entwurf öffnest, kann Kazzle einen Dev-Server starten und eine Live-Vorschau anzeigen.

## So funktioniert es

1. Öffne einen Entwurf-Tab aus der Seitenleiste
2. Die Vorschau startet automatisch (oder klicke manuell auf „Vorschau starten")
3. Kazzle liest `lifecycle.dev` aus deiner `kazzle.config.ts`
4. Der Dev-Befehl wird auf dem zugewiesenen Port ausgeführt
5. Die Vorschau-URL erscheint im Entwurf-Tab

## Dev-Befehl konfigurieren

Setze `lifecycle.dev` auf deiner UI-Komponente:

```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' }
    }
  ]
});
```

Wenn `lifecycle.dev` nicht gesetzt ist, greift das Vorschau-System auf die automatische Erkennung gängiger Dev-Server zurück (Vite, Next.js, etc.).

## Vorschau-URLs

Jede App erhält einen dedizierten Port in ihrer Sandbox. Die Vorschau-URL folgt diesem Muster:

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

Die `PORT`-Umgebungsvariable wird vom Vorschau-System automatisch gesetzt.

## Hot Reload

Änderungen an deinem Code werden vom Hot-Reload-System (HMR) deines Dev-Servers erkannt. Die Vorschau wird in Echtzeit aktualisiert, während du oder die KI Dateien bearbeitest.

## Manuelle Steuerelemente

* **Vorschau starten** — startet den Dev-Server, falls er nicht läuft
* **Vorschau stoppen** — beendet den Dev-Server-Prozess
* **Neu starten** — stoppen + starten (nützlich nach Konfigurationsänderungen)

## Verifizierung

Eine Vorschau wird nur verifiziert, wenn der App-Dev-Tab geöffnet wird und die erwartete UI anzeigt. Ein Timeout, fehlgeschlagenes Tab-Öffnen, gestoppter Prozess oder fehlende Vorschau-URL bedeuten, dass die Vorschau noch nicht verifiziert ist.

Wenn die KI eine App erstellt, sollte sie den App-Dev-Tab öffnen, nachdem sie den Entwurf gestartet oder geändert hat. Sie sollte nicht behaupten, dass die App nur aufgrund der Befehlsausgabe läuft.