Editor de código

Cada sitio web de WebTwizz es un proyecto de código real. El editor de código te permite leer y modificar sus archivos directamente.

La edición de código, las versiones de archivos y las descargas están disponibles en los planes de pago. En el plan Free puedes ver el árbol de archivos, pero el código permanece oculto y en modo de solo lectura.

Abrir el editor de código

Haz clic en el selector de código (el botón <> junto a Explorar y Editar) en la barra de herramientas. El árbol de archivos está a la izquierda y el archivo abierto, a la derecha. Haz clic de nuevo en el selector para volver al lienzo.

El editor de código no está disponible en teléfonos.

Estructura del proyecto

• src/app/page.tsx es tu página de inicio. Cada una de las demás páginas tiene su propia carpeta dentro de src/app/ con un archivo page.tsx.
• src/app/layout.tsx define la estructura que envuelve todas las páginas.
• src/app/globals.css contiene los estilos globales y tu tema.
• src/components/ contiene los componentes reutilizables.
• src/lib/ contiene las funciones auxiliares.
• src/data/ contiene los archivos de datos.
• public/ contiene los archivos estáticos, como imágenes y fuentes.

Editar archivos

Haz clic en un archivo para abrirlo y empieza a escribir. Tus cambios se reflejan en el lienzo poco después de que dejas de escribir. Presiona ⌘S / Ctrl+S para guardar.

• ⌘Z / Ctrl+Z deshace lo que escribes y los cambios en los archivos, como cambios de nombre o eliminaciones, en el orden en que los hiciste.
• Haz clic en una importación mientras mantienes presionada la tecla ⌘ (Mac) o Ctrl (Windows) para abrir el archivo al que apunta.
• Los archivos de imagen se abren en una vista previa.

Algunos archivos muestran la etiqueta Solo lectura porque WebTwizz los administra: src/app/layout.tsx, next.config, tsconfig.json, las configuraciones de PostCSS y ESLint, .gitignore y src/types/cms.ts. Pídele a la IA que los modifique si lo necesitas.

Administrar archivos

• Buscar archivos, en la parte superior del árbol, filtra los archivos por nombre.
• El botón + permite añadir un Archivo nuevo o una Carpeta nueva.
• Haz clic derecho en un archivo o una carpeta para acceder a Cambiar nombre, Duplicar, Copiar, Pegar y Eliminar. Las carpetas también tienen las opciones Archivo nuevo y Carpeta nueva.
• Arrastra archivos y carpetas dentro del árbol para moverlos.
• Arrastra archivos o carpetas desde tu computadora al árbol para subirlos. Si el nombre ya está en uso, elige Reemplazar, Mantener ambos o Cancelar.
• Haz clic en las filas mientras mantienes presionada la tecla ⌘ (Mac) o Ctrl (Windows) para seleccionar varias. Luego haz clic derecho para aplicar una acción a todas.

Versiones del archivo

Haz clic derecho en un archivo y pasa el cursor sobre Versiones del archivo para ver sus versiones guardadas, agrupadas por día. La más reciente está marcada como Actual, y las versiones que se publicaron llevan una etiqueta con su versión publicada.

Haz clic en una versión para restaurar ese archivo. Solo cambia ese archivo, y puedes presionar ⌘Z / Ctrl+Z para deshacer la acción. Los archivos multimedia y los de solo lectura no se pueden restaurar de esta manera.

Para volver a una versión anterior de todo el proyecto, usa el historial de versiones.

Descargar tu código

Con un archivo abierto, haz clic en Descargar en el encabezado del editor:

• Descargar proyecto guarda todo el proyecto como un archivo zip. Puedes ejecutarlo en tu propia computadora o alojarlo donde quieras.
• Descargar este archivo guarda solo el archivo abierto.

Cuando no hay ningún archivo abierto, el botón Descargar proyecto en el centro del editor hace lo mismo que Descargar proyecto.