Editor Visual
Haz clic en elementos para editar texto, colores, espaciado, fuentes y más. Ideal para cambios pequeños; usa el chat para cambios más grandes.
El Editor Visual te permite modificar la interfaz de tu app haciendo clic en los elementos y editando sus propiedades directamente. Cambia al modo Visual en la barra de herramientas del builder para activarlo.
Cómo funciona
Sección titulada «Cómo funciona»- Cambia al modo Visual — es un sub-modo de Preview en la barra de herramientas (la barra tiene dos segmentos: Preview y Admin)
- Pasa el cursor sobre los elementos en el preview — se resaltan con una capa superpuesta
- Haz clic en un elemento para seleccionarlo
- Edita las propiedades en el panel lateral: texto, colores, espaciado, fuentes, bordes, imágenes, efectos
Los cambios se aplican de inmediato en el preview y se escriben en tus archivos fuente. Usa el botón Reset last edit en el panel lateral para revertir el último cambio de propiedad.
¿Qué puedo editar?
Sección titulada «¿Qué puedo editar?»- Texto — Edita el contenido directamente
- Tamaño de fuente — xs, sm, base, lg, xl, etc.
- Peso de fuente — thin, light, normal, medium, semibold, bold, extrabold
- Familia tipográfica — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
- Estilo de fuente — Activar/desactivar cursiva
- Alineación de texto — left, center, right, justify
- Color de texto — Cualquier color de Tailwind
- Color de fondo — Cualquier color de Tailwind
- Espaciado — Padding y margin en todos los lados
- Borde — Ancho, color y radio (disponible en elementos contenedores sin contenido de texto)
- Imagen — Reemplaza con una búsqueda de fotos de stock o sube tu propia imagen (aplica a elementos
imge imágenes de fondo) - Efectos — Sombra y opacidad
Deshacer / Rehacer
Sección titulada «Deshacer / Rehacer»Usa Cmd+Z (Mac) o Ctrl+Z (Windows) para deshacer cambios. Cmd+Shift+Z / Ctrl+Shift+Z para rehacer.
Paleta de la página
Sección titulada «Paleta de la página»El Editor Visual analiza tu página y muestra todos los colores de Tailwind y propiedades CSS personalizadas que ya están en uso. Cuando abres el selector de color para el elemento seleccionado, puedes elegir de esta paleta de la página para mantener coherencia con tu sistema de diseño existente en lugar de adivinar códigos hex.
Consulta a la IA sobre un elemento seleccionado
Sección titulada «Consulta a la IA sobre un elemento seleccionado»Para ajustes que el editor de propiedades no puede expresar, escribe un prompt breve en el campo Ask AI en la parte inferior del panel lateral. El elemento seleccionado se pasa como contexto, por lo que prompts como “haz esta tarjeta más compacta” o “agrega un estado hover con un efecto de elevación sutil” funcionan sin necesidad de describir a qué elemento te refieres.
Elementos estáticos vs. dinámicos
Sección titulada «Elementos estáticos vs. dinámicos»El Editor Visual funciona mejor con elementos estáticos donde el className y el contenido de texto son literales de cadena en el JSX. Para elementos dinámicos (classNames calculados, renderizado condicional, expresiones), el editor recurre automáticamente al chat de IA con un prompt estructurado.
¿Cuándo debo usar el Editor Visual?
Sección titulada «¿Cuándo debo usar el Editor Visual?»El Editor Visual es ideal para ajustes pequeños y rápidos:
- Corregir un error tipográfico
- Ajustar el espaciado
- Cambiar un color
- Actualizar el texto de un botón
Para cambios más grandes (nuevas secciones, reestructuración del layout, nuevas funcionalidades), usa el chat de IA en su lugar.
¿Cómo guardo los cambios?
Sección titulada «¿Cómo guardo los cambios?»Los cambios se guardan automáticamente al editar una propiedad. El archivo se escribe en tu runtime y el cambio se registra en tu historial de versiones en el siguiente turno del builder que haga un commit.
Preguntas frecuentes
Sección titulada «Preguntas frecuentes»¿Puedo deshacer ediciones visuales?
Sí. Usa Cmd+Z / Ctrl+Z para deshacer. El Editor Visual mantiene su propio stack de deshacer/rehacer.
¿Por qué puedo editar algunos elementos pero no otros?
Los atributos de texto estático y className se pueden editar directamente. Los valores dinámicos o calculados (template literals, expresiones ternarias, llamadas a funciones) recurren automáticamente al chat de IA.
¿Cuándo debo usar el Editor Visual en lugar del chat de IA?
| Herramienta | Ideal para |
|---|---|
| Visual Editor | Cambios rápidos de propiedades (texto, colores, espaciado) con clic |
| AI Chat | Cambios complejos, nuevas funcionalidades, depuración |
Estas son las únicas dos formas de modificar tu app — no hay editor de código. Consulta Edición y acceso a tu código.