Zum Hauptinhalt springen

​
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: 
import { defineConfig } from './kazzle.types';

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 automatisch vom Vorschau-System gesetzt.

​
Hot Reload

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

​
Manuelle Steuerung

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