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

# Previsualizaciones

> Previsualizaciones del servidor de desarrollo para borradores de aplicaciones.

# Previsualizaciones

Cuando abres un borrador de aplicación, Kazzle puede iniciar un servidor de desarrollo y mostrar una vista previa en vivo.

## Cómo funciona

1. Abre una pestaña de borrador desde la barra lateral
2. La vista previa se inicia automáticamente (o haz clic en "Iniciar vista previa" manualmente)
3. Kazzle lee `lifecycle.dev` de tu `kazzle.config.ts`
4. El comando de desarrollo se ejecuta en el puerto asignado
5. La URL de vista previa aparece en la pestaña de borrador

## Configurar el comando de desarrollo

Establece `lifecycle.dev` en tu 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' }
    }
  ]
});
```

Si `lifecycle.dev` no está configurado, el sistema de vista previa recurre a la detección automática de servidores de desarrollo comunes (Vite, Next.js, etc.).

## URLs de vista previa

Cada aplicación obtiene un puerto dedicado en su sandbox. La URL de vista previa sigue el patrón:

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

La variable de entorno `PORT` se establece automáticamente mediante el sistema de vista previa.

## Recarga en caliente

Los cambios en tu código se detectan mediante la recarga en caliente (HMR) de tu servidor de desarrollo. La vista previa se actualiza en tiempo real mientras tú o la IA editáis archivos.

## Controles manuales

* **Iniciar vista previa** — inicia el servidor de desarrollo si no está en ejecución
* **Detener vista previa** — finaliza el proceso del servidor de desarrollo
* **Reiniciar** — detener + iniciar (útil después de cambios de configuración)

## Verificación

Una vista previa se verifica solo cuando la pestaña app-dev se abre y muestra la UI esperada. Un tiempo de espera agotado, una apertura de pestaña fallida, un proceso detenido o una URL de vista previa faltante significa que la vista previa aún no está verificada.

Cuando la IA construye una aplicación, debe abrir la pestaña app-dev después de iniciar o cambiar el borrador. No debe afirmar que la aplicación se está ejecutando basándose únicamente en la salida de comandos.