No es obligatorio usarlo. AI Studio genera páginas y flujos completos a partir de tus instrucciones. El editor es para quien quiere controlar el diseño, los estilos, la lógica o las integraciones más allá del chat y las ediciones visuales.
Ventajas
- Más control cuando la edición con IA no alcanza la precisión que necesitas.
- Cambios puntuales en textos, estilos, componentes, rutas o archivos sin rehacer todo.
- Sin cambiar de herramienta: editas dentro de AI Studio, sin descargar archivos.
- Depuración rápida: ves los errores al instante y usas Intentar arreglar para que la IA sugiera la corrección.
- Experimentación segura con el historial de versiones.
- Navegación ágil con buscar y reemplazar y la búsqueda en todo el proyecto.
Funciones principales
Buscar y reemplazar
Pulsa Cmd/Ctrl + F para buscar dentro del archivo abierto. Se resaltan todas las coincidencias, puedes activar las opciones de mayúsculas y palabra completa para evitar coincidencias parciales, y reemplazar una por una o todas a la vez. Útil para renombrar componentes, cambiar textos o unificar nombres de variables.Búsqueda en todo el proyecto
Busca en todos los archivos, no solo en el abierto:- Resultados agrupados por archivo, con las coincidencias resaltadas.
- Incluye cambios aún no guardados.
- Número de línea de cada resultado.
- Un clic te lleva al archivo y la línea exactos.
Guardado y vista previa al instante
Haz clic en Guardar y la vista previa se actualiza en segundos, sin esperar un despliegue.Detección inteligente de errores
Si un cambio impide que el proyecto se compile o que la vista previa arranque, aparece el mensaje Compilación fallida (Build unsuccessful) en el chat.- Haz clic en Detalles para ver el error.
- Haz clic en Intentar arreglar (Try to fix). La IA analiza el problema, actualiza los archivos y te explica qué cambió.
- AI Studio vuelve a compilar la vista previa automáticamente. Revisa que el problema esté resuelto.
Detección automática de rutas
Cuando creas una ruta nueva en el código, aparece sola en el selector de páginas.Historial de versiones
Cada vez que guardas se crea una versión. Ábrelo con el ícono de reloj en la parte superior del constructor para previsualizar, marcar o volver a versiones anteriores.Protección de cambios sin guardar
Si intentas salir con cambios sin guardar, aparece un aviso para que guardes antes.Cómo usar el editor
1
Abre el editor
Abre el proyecto de AI Studio y haz clic en Código.
2
Edita el archivo
Elige el archivo en el árbol de archivos y haz los cambios. Usa buscar y reemplazar o la búsqueda global para encontrar lo que necesitas.
3
Guarda
Haz clic en Guardar para aplicar los cambios y actualizar la vista previa.
4
Revisa y corrige
Verifica contenido, diseño y funcionamiento. Si aparece un error, abre Detalles y usa Intentar arreglar.
5
Publica
Cuando todo esté bien, publica el proyecto para llevar los cambios al sitio en vivo. Consulta la sección de publicación en AI Studio.
Preguntas frecuentes
¿El editor guarda automáticamente?
¿El editor guarda automáticamente?
No. Los cambios se guardan al hacer clic en Guardar. Si intentas salir con cambios pendientes, AI Studio te avisa.
¿Los cambios afectan de inmediato mi sitio publicado?
¿Los cambios afectan de inmediato mi sitio publicado?
No. Guardar actualiza la vista previa; el sitio público cambia solo cuando vuelves a publicar el proyecto.
¿Qué tipos de archivo puedo editar?
¿Qué tipos de archivo puedo editar?
TypeScript, JSX, CSS, JSON y otros archivos de texto del proyecto.
Artículos relacionados
Ediciones visuales
Haz ajustes sin tocar código.
SSR, funciones de servidor y APIs
Lógica de servidor y secretos en AI Studio.
Descargar el código como ZIP
Llévate una copia de tu proyecto.