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

# Превью

> Превью dev-сервера для черновиков приложений.

# Превью

Когда вы открываете черновик приложения, Kazzle может запустить dev-сервер и показать живое превью.

## Как это работает

1. Откройте вкладку черновика из боковой панели
2. Превью запускается автоматически (или нажмите «Start preview» вручную)
3. Kazzle читает `lifecycle.dev` из вашего `kazzle.config.ts`
4. Команда dev запускается на назначенном порту
5. URL превью появляется на вкладке черновика

## Настройка команды dev

Установите `lifecycle.dev` на вашем UI-компоненте:

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

Если `lifecycle.dev` не установлен, система превью переходит на автоматическое обнаружение распространённых dev-серверов (Vite, Next.js и т. д.).

## URL-адреса превью

Каждое приложение получает выделенный порт в своей песочнице. URL превью следует шаблону:

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

Переменная окружения `PORT` автоматически устанавливается системой превью.

## Горячая перезагрузка

Изменения в вашем коде подхватываются горячей перезагрузкой (HMR) вашего dev-сервера. Превью обновляется в реальном времени по мере того, как вы или ИИ редактируете файлы.

## Ручное управление

* **Start preview** — запускает dev-сервер, если он не работает
* **Stop preview** — завершает процесс dev-сервера
* **Restart** — остановка + запуск (полезно после изменения конфигурации)

## Проверка

Превью проверяется только когда вкладка app-dev открывается и показывает ожидаемый интерфейс. Тайм-аут, ошибка открытия вкладки, остановленный процесс или отсутствие URL превью означают, что превью ещё не проверено.

Когда ИИ создаёт приложение, он должен открыть вкладку app-dev после запуска или изменения черновика. Он не должен утверждать, что приложение работает, основываясь только на выводе команды.