Editor Visual

Haz clic en elementos para editar texto, colores, espaciado, fuentes y más. Ideal para ajustes pequeños; usa el chat para cambios más grandes.

El Editor Visual te permite cambiar 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

Cambia al modo Visual en la barra de herramientas (junto a Preview, Code y Dashboard)
Pasa el cursor sobre los elementos en la vista previa — se resaltan con un overlay
Haz clic en un elemento para seleccionarlo
Edita las propiedades en el panel lateral: texto, colores, espaciado, fuentes, bordes, imágenes y efectos

Los cambios se aplican de inmediato en la vista previa 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?

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 — Interruptor de 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 contenedor sin contenido de texto)
Imagen — Reemplaza con una búsqueda de fotos de stock o sube tu propia imagen (aplica a elementos img e imágenes de fondo)
Efectos — Sombra y opacidad

Deshacer / Rehacer

Usa Cmd+Z (Mac) o Ctrl+Z (Windows) para deshacer cambios. Cmd+Shift+Z / Ctrl+Shift+Z para rehacer.

Paleta de página

El Editor Visual inspecciona 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 desde esta paleta de página para mantener consistencia con tu sistema de diseño existente, en lugar de adivinar códigos hexadecimales.

Pregúntale a la IA sobre un elemento seleccionado

Para ajustes que el editor de propiedades no puede expresar, escribe un prompt corto en el campo Ask AI en la parte inferior del panel lateral. El elemento seleccionado se pasa como contexto, así que prompts como “make this card more compact” o “add a hover state with a subtle lift” funcionan sin necesidad de describir a qué elemento te refieres.

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 computados, renderizado condicional, expresiones), el editor recurre automáticamente al chat de IA con un prompt estructurado.

¿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 de layouts, nuevas funcionalidades), usa el chat de IA en su lugar.

¿Cómo guardo los cambios?

Los cambios se guardan automáticamente al editar una propiedad. El archivo se escribe en tu runtime y se hace commit cuando la IA o tú crean uno.

Preguntas frecuentes

¿Puedo deshacer ediciones visuales?

Sí. Usa Cmd+Z / Ctrl+Z para deshacer. El Editor Visual mantiene su propio historial 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 computados (template literals, expresiones ternarias, llamadas a funciones) recurren automáticamente al chat de IA.

¿Cuál es la diferencia entre el Editor Visual y el Editor de Código?

Herramienta	Ideal para
Visual Editor	Cambios rápidos de propiedades (texto, colores, espaciado) con clic
Code Editor	Edición completa del código fuente con VS Code
AI Chat	Cambios complejos, nuevas funcionalidades, depuración