Docs de ChanTan StudioLa vista previa en vivo de ChanTan Studio explicada
El panel derecho es tu app funcionando de verdad, privada para ti. La barra de herramientas, los tamaños de pantalla y por qué se duerme a los 20 minutos.
El lado derecho de tu proyecto es la vista previa en vivo, rotulada «Vista previa de la app».
Es tu app, funcionando de verdad. No es una imagen ni una maqueta. Puedes hacer clic en sus enlaces, llenar sus formularios y moverte entre sus páginas exactamente como lo haría un visitante.
Dos cosas que conviene saber primero
1. La vista previa es privada. No es tu sitio publicado. Nadie más que tú puede abrirla. Todo lo que tú y la IA cambian aparece aquí primero. Los visitantes no ven nada hasta que pulsas «Publicar».
2. La vista previa se duerme a propósito. Después de unos 20 minutos sin actividad, el espacio de trabajo de tu app se pausa para ahorrar recursos. Con el proyecto abierto y conectado se mantiene despierta más tiempo, pero nunca más allá de unos 60 minutos.
Cuando dice «Tu app está dormida»
Verás una tarjeta con una luna sobre una imagen difuminada de tu app:
🌙 «Tu app está dormida» — «La pausamos para ahorrar recursos. Toca para despertarla.»
No es un error y no se pierde nada. Tu código, tus datos y tu sitio publicado siguen intactos. Pulsa «Despertar» y arranca de nuevo.
Despertarla es gratis: nunca cuesta créditos.
La barra de herramientas sobre tu app
Todo lo que hay en esta franja es gratis.
| Control | Rótulo | Qué hace |
|---|---|---|
| Icono de expandir | «Entrar en pantalla completa» | Oculta el chat para que la vista previa llene la ventana. Pulsa ESC para salir. No aparece en teléfonos |
| Caja de página | muestra / o /nosotros |
Al abrirla lista las páginas de tu app — elige una para saltar ahí |
| Tres botones de tamaño | «Escritorio» · «iPad» · «Móvil» | Muestra tu app a ancho completo, 820 × 1180 y 390 × 844 |
| Flecha circular | «Actualizar vista previa» | Recarga la página que estás viendo |
| Flecha saliendo de una caja | «Abrir en pestaña nueva» | Abre la misma página en su propia pestaña — sigue siendo la vista previa privada |
| Lápiz | «Editar textos, colores y fotos directamente» | Activa la edición con clic. Para salir, pulsa «Cancelar» en la barra verde que aparece arriba |
Los tamaños de dispositivo son reales, no un truco visual. Tu app cree de verdad que está en una tablet de 820 de ancho o en un teléfono de 390, así que tu diseño responsivo reacciona con honestidad. El marco solo se encoge visualmente para que quepa en tu pantalla. Cambiar de tamaño nunca recarga nada, así que no pierdes tu lugar.
Hay exactamente tres tamaños — no existe una caja de ancho personalizado.
Algunas páginas quedan fuera de la lista a propósito: las que necesitan un valor en la dirección (una clase concreta, un pedido concreto) y las páginas «no encontrado» que atrapan todo. No se pueden abrir a ciegas, así que no se ofrecen.
Mensajes que flotan sobre la vista previa
| Mensaje | Qué significa |
|---|---|
| «Actualizando...» o «Paso 3 de 7» | La IA está cambiando tu app ahora mismo. Casi siempre se actualiza sin recargar nada |
| «La vista previa tuvo un tropiezo.» con «Arreglarlo» y «Descartar» | Tu app lanzó un error. ⚠️ «Arreglarlo» inicia una construcción real de la IA, así que cuesta créditos. «Descartar» solo oculta el mensaje |
| «Viendo una versión antigua — este NO es el estado actual» | Estás mirando una versión guardada del historial. Pulsa «Volver a la actual» |
| «Retrocediendo una versión...» | Pulsaste Deshacer. Espera a que termine |
La opción «Arreglarlo» se oculta a propósito mientras hay una construcción corriendo, mientras la vista previa arranca y durante una reconexión — así nunca te ofrecen un arreglo de pago para un problema que está a punto de resolverse solo.
Otras cosas que puedes ver en lugar de tu app
| Qué ves | Qué hacer |
|---|---|
| Una imagen difuminada con una píldora de «Cargando…» | Nada — se desvanece sola |
| Una pantalla con el logo de ChanTan y una barra de progreso | Espera. Tu espacio de trabajo está arrancando o tu primera construcción está corriendo. Cada línea es una etapa real |
| «Reconectando con tu vista previa…» | Espera unos 8 segundos. Si no se sana, aparece un botón «Despertar» — púlsalo |
| Un solo botón de «Try again» (Intentar de nuevo) | Púlsalo. Si sigue fallando, reinicia la vista previa (más abajo) |
ChanTan revisa en silencio la salud de la vista previa cada 3 minutos mientras miras el proyecto, y otra vez cuando vuelves a la pestaña. Normalmente no ves nada — un arranque lento nunca se confunde con una app muerta.
Reiniciar la vista previa a mano
Es lo correcto cuando la vista previa está atascada, en blanco o se comporta raro después de varias recargas.
- Abre el panel «Historial de versiones» a la izquierda de tu proyecto.
- Elige «Reiniciar vista previa».
- Confirma con «Sí, reiniciar».
La confirmación te dice exactamente qué pasa: «Esto reconstruye la vista previa de tu app desde cero. Suele tardar 30–60 segundos (hasta 3 minutos en casos raros). Tu código y tus datos no se ven afectados — solo se reinicia el contenedor de la vista previa.»
Es gratis y es seguro.
¿La vista previa es mi sitio publicado?
No. Son dos cosas distintas:
| Vista previa | Sitio publicado | |
|---|---|---|
| Quién puede verlo | Solo tú | Cualquiera con el enlace |
| Qué muestra | Tu trabajo más reciente | Solo lo que publicaste por última vez |
| ¿Se duerme? | Sí, a los ~20 minutos | Nunca |
«Abrir en pestaña nueva» abre la vista previa, no tu sitio publicado — y esa pestaña deja de funcionar cuando la vista previa se duerme. Para compartir tu app, publícala.
Límites honestos
- Despertar, reiniciar, actualizar, cambiar de tamaño, pantalla completa y abrir en pestaña nueva son todos gratis. Solo el trabajo que hace la IA por ti cuesta créditos.
- La vista previa refleja tu trabajo más reciente pocos segundos después de cada cambio; el reemplazo de fotos la recarga una vez, y esa recarga es esperada.
- Si la vista previa está blanca o vacía y actualizar no ayuda, usa primero «Reiniciar vista previa» — resuelve muchos más casos que una simple actualización.