Docs de ChanTan StudioCómo editar textos, colores y fotos con un clic
Cambia palabras, colores e imágenes tú mismo haciendo clic en la vista previa: editar texto y color es gratis, todo se puede deshacer y no necesitas a la IA para nada.
No tienes que pedirle a la IA cada cambio pequeño. Haz clic directamente sobre una palabra, un color o una foto en tu vista previa y cámbialo tú mismo.
Editar textos y colores es gratis. Subir tu propia foto también. Solo generar una foto nueva con IA cuesta créditos, y el precio se muestra antes de que confirmes.
1. Activa la edición directa
En la barra de la vista previa, pulsa el lápiz — su rótulo es «Editar textos, colores y fotos directamente».
Aparece una barra verde arriba: «Haz clic en un texto para escribir · en una foto para cambiarla · elige colores — se guarda directo en tu código».
Para salir de la edición directa, pulsa «Cancelar» en esa misma barra verde. Es el único botón de salida: no existe ningún «Salir de la edición directa» ni nada parecido. Salir no deshace nada de lo que ya guardaste.
2. Apunta a lo que quieres cambiar
Al pasar el cursor sobre algo editable se marca con un recuadro verde punteado. Al hacer clic queda con un contorno verde sólido y una barrita flotante.
3. Cambia las palabras
Haz clic justo sobre las letras — hacer clic en el espacio vacío de al lado no cuenta. Aparece un cursor donde hiciste clic y escribes ahí mismo.
Después pulsa «✓ Guardar» para conservarlo, o «✕» para descartar el cambio.
Un título repartido en dos líneas se trata como dos textos separados: editas la línea en la que hiciste clic y la otra queda intacta.
4. Cambia un color
Al seleccionar cualquier elemento editable también aparece una barra de color con dos filas de muestras:
- «A» = el color del texto
- «BG» = el color de fondo
Cada fila muestra los colores de marca de tu propio proyecto, leídos en vivo de tu diseño, más un botón arcoíris que abre el selector de color de tu sistema para cualquier color personalizado.
El color cambia al instante como vista previa. Solo se escribe en tu app cuando pulsas «✓ Guardar»; «✕» devuelve el color anterior. Solo cambia el color: el tamaño, la alineación y el espaciado quedan exactamente igual.
5. Reemplaza una foto por la tuya (gratis)
Haz clic en una foto y la barrita muestra «⬆ Replace» (Reemplazar) y «✨ Generate» (Generar).
Pulsa «⬆ Replace» para abrir el selector de archivos y elegir una imagen.
| Archivos aceptados | PNG, JPG/JPEG, WebP, GIF, AVIF |
| Tamaño máximo | 15 MB |
| Costo | Gratis — la ficha lo dice: «O sube tu propia foto — gratis» |
Verás «Subiendo tu foto…» y luego «Foto reemplazada». La vista previa se actualiza sola cuando el archivo aterriza (en unos 12 segundos como mucho), así que no deberías tener que actualizar a mano.
6. O genera una foto nueva con IA (cuesta créditos)
Pulsa «✨ Generate» y se abre una ficha:
- Descríbela. Por ejemplo: «interior de cafetería acogedora, luz cálida». Mínimo 2 caracteres.
- Elige una calidad. Dos tarjetas, cada una con su precio en créditos:
- «Estándar» — «Rápida y de buena calidad» — unos 14 segundos
- «Premium» — «La mejor calidad, ideal con texto» — unos 32 segundos
- Pulsa «Generar». Una barra de tiempo real recorre «Componiendo la escena…», «Pintando los detalles…», «Terminando…».
- Decide. Ves la vieja y la nueva lado a lado, rotuladas «Actual» y «Nueva», con «Usar esta foto», «Probar otra» y «Cambiar la descripción».
⚠️ Se te cobra en el momento en que la foto se crea, no cuando la aceptas. Pulsar «Probar otra» es un segundo cobro, y cancelar después de ver una foto no lo reembolsa. Un mensaje te lo dice justo cuando pasa: «{n} créditos cobrados por esta foto». No se cobra nada si la generación falla.
Con los ajustes de hoy eso es 1 crédito por «Estándar» y 22 créditos por «Premium». Los precios se calculan en vivo desde tu cuenta, así que el número impreso en la tarjeta siempre es la verdad — confía en él por encima de cualquier cifra citada en otro lado.
✅ ¡Listo! Ves «Guardado — tu cambio ya está en el código» y el cambio aparece en tu app de inmediato.
Son cambios reales en tu app, no trucos de vista previa. Y cada edición directa guarda una versión completa de tu proyecto antes de escribir nada — así que el botón normal de «Deshacer» lo devuelve todo exactamente, incluida la foto real.
Qué puedes y qué no puedes cambiar así
La edición con clic es deliberadamente estrecha. Cambia las palabras que ves, el color del texto, el color de fondo y las fotos. Esa es toda la lista.
Todo lo demás va en el chat:
- Diseño, espaciado, alineación, tamaño del texto
- Agregar, quitar o reordenar secciones y páginas
- Animaciones y movimiento
- El comportamiento de los botones, los enlaces, los formularios
- Cualquier cosa que salga de tus datos
Cuando haces clic en algo que no puede cambiar con seguridad, se niega en vez de adivinar:
| Mensaje | Qué hacer |
|---|---|
| «This text comes from data — ask for the change in the chat.» (ese texto viene de tus datos) | Esa palabra se llena desde una lista que guarda tu app. Cambia el registro en «Gestionar» → «Base de datos», o escribe el cambio en el chat |
| «This element's styling is dynamic — ask for the change in the chat.» | Escribe el cambio de color en el chat |
| «This changed since you opened it — reopen and try again.» | Actualiza la vista previa, vuelve a hacer clic en el elemento y repite la edición |
| «No se pudo guardar — pide el cambio en el chat.» | Descríbelo en el chat |
| «Esta imagen no forma parte de tu proyecto — pide en el chat para cambiarla.» | Esa foto viene de otro sitio web. Pídelo en el chat |
| «This file is managed by Chantan — ask in chat to change it.» | Pídelo en el chat |
| «A build is running — try again when it finishes.» | Espera a que termine la construcción |
⚠️ No existe ningún botón de «Ask AI» (preguntar a la IA) en ninguna parte. Versiones antiguas de estos mensajes lo mencionaban; nunca existió. «Pide en el chat» simplemente significa: escribe tu petición en la caja del chat de la izquierda y envíala.
Problemas al subir
| Mensaje | Qué hacer |
|---|---|
| «Please choose an image file (PNG, JPG, WebP…).» | Elige un archivo de imagen de verdad |
| «That image is over 15 MB — please choose a smaller one.» | Recórtala o comprímela antes |
| «That file doesn't look like an image — please choose a PNG, JPG or WebP.» | Vuelve a guardar el archivo como PNG o JPG |
| «Couldn't process that image — try a plain PNG or JPG (animated images aren't supported).» | Usa una imagen fija |
| «Could not save the image. Try again.» | Reinténtalo — no es un problema de tu archivo |
| «Slow down a moment — too many edits.» | Llegaste al límite de 40 ediciones por minuto. Haz una pausa de unos segundos |
Si reemplazaste una foto y sigues viendo la anterior después de ~12 segundos, pulsa «Actualizar vista previa». Si aún está vieja, reinicia la vista previa desde «Historial de versiones».
Límites honestos
- No puedes editar mientras la IA construye. El lápiz se apaga solo, y cualquier edición que se cuele se rechaza — así tu clic y el trabajo de la IA nunca pelean por el mismo archivo.
- La edición se bloquea mientras miras una versión antigua, a propósito.
- Si el lápiz no está, es que esta vista previa concreta no ha reportado que tiene partes editables — los proyectos más viejos muestran en su lugar una herramienta de flecha, que describe lo que tocaste y deja esa descripción en la caja del chat por ti. Despertar o reiniciar la vista previa a veces devuelve el lápiz. Nunca tendrás un lápiz que no haga nada.
- Buena parte de esta pantalla sigue en inglés, en todos los idiomas. La barra de la vista previa y la tarjeta de app dormida sí están traducidas, pero las ventanas de edición con clic y sus mensajes no: la barra verde, la ficha de fotos y los dos nombres de calidad aparecen hoy en inglés. Todo funciona; solo el texto está sin traducir.