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

# Visualizações

> Visualizações do servidor de desenvolvimento para rascunhos de aplicativos.

# Visualizações

Quando você abre um rascunho de aplicativo, o Kazzle pode iniciar um servidor de desenvolvimento e mostrar uma visualização ao vivo.

## Como funciona

1. Abra uma aba de rascunho na barra lateral
2. A visualização inicia automaticamente (ou clique em "Iniciar visualização" manualmente)
3. O Kazzle lê `lifecycle.dev` do seu `kazzle.config.ts`
4. O comando de desenvolvimento é executado na porta atribuída
5. A URL de visualização aparece na aba de rascunho

## Configurando o comando de desenvolvimento

Defina `lifecycle.dev` no seu componente de 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' }
    }
  ]
});
```

Se `lifecycle.dev` não estiver definido, o sistema de visualização volta para a detecção automática de servidor de desenvolvimento comum (Vite, Next.js, etc.).

## URLs de visualização

Cada aplicativo recebe uma porta dedicada em sua sandbox. A URL de visualização segue o padrão:

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

A variável de ambiente `PORT` é definida automaticamente pelo sistema de visualização.

## Recarga automática

As alterações no seu código são detectadas pela recarga automática (HMR) do seu servidor de desenvolvimento. A visualização é atualizada em tempo real conforme você ou a IA editam arquivos.

## Controles manuais

* **Iniciar visualização** — inicia o servidor de desenvolvimento se não estiver em execução
* **Parar visualização** — encerra o processo do servidor de desenvolvimento
* **Reiniciar** — parar + iniciar (útil após alterações de configuração)

## Verificação

Uma visualização é verificada apenas quando a aba app-dev abre e mostra a UI esperada. Um tempo limite, falha ao abrir a aba, processo interrompido ou URL de visualização ausente significa que a visualização ainda não foi verificada.

Quando a IA constrói um aplicativo, ela deve abrir a aba app-dev após iniciar ou alterar o rascunho. Ela não deve afirmar que o aplicativo está em execução apenas pela saída do comando.