Skip to main content

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

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)