Guardado automático en el navegador
Los cambios se guardan tras una breve pausa al escribir. Los proyectos y las preferencias quedan en este navegador. El indicador de guardado muestra si los últimos cambios ya se han guardado.
Herramientas relacionadas
Cómo usar el editor de código
No se ha podido cargar el vídeo. Puedes seguir las instrucciones que aparecen debajo.
El vídeo muestra la interfaz en inglés.
En el ordenador, abre «Plantillas» y elige, por ejemplo, «Calculadora». La plantilla crea un proyecto independiente. En el teléfono, empieza en el archivo index.html existente. Usa las pestañas para cambiar entre HTML, CSS y JavaScript.
Un editor web para todo tu proyecto
Proyectos independientes
Separa tus pruebas de CSS de la próxima página web. Cada proyecto tiene sus propios archivos y carpetas. Cambia entre ellos desde la ventana «Proyectos».
Archivos y carpetas
Crea carpetas anidadas y arrastra archivos a ellas. Fija el explorador como ventana flotante para tener el árbol del proyecto junto al código.
Mostrar 3 másMostrar menos
Tres diseños del espacio de trabajo
Con «Vista dividida» editas un archivo a la vez. «Paneles apilados» coloca los archivos de la carpeta actual uno debajo de otro y «Varias ventanas» los muestra en paneles separados. Ajusta los paneles para dar más espacio al código o a la vista previa.
Vista previa en directo y consola
La vista previa se actualiza cuando haces una breve pausa al escribir. Abre «Consola» para consultar mensajes, advertencias y errores de JavaScript, o para ejecutar un comando en la vista previa.
Preferencias del editor
Elige el aspecto «Oscuro», «Claro» o «Sistema» y ajusta la fuente y la sangría. Puedes activar o desactivar el ajuste de línea, los números de línea y el cierre automático de etiquetas o paréntesis.
Preguntas frecuentes
¿Cómo funciona el guardado automático?
El proyecto se guarda en IndexedDB, en este navegador, tres segundos después de la última edición. Las preferencias se guardan al cambiarlas. Antes de cerrar la página, espera a que aparezca «Guardado». El almacenamiento del navegador puede borrarse o dejar de estar disponible, así que exporta los proyectos importantes como copia de seguridad en ZIP. El historial de deshacer y la posición del cursor no se conservan entre visitas.
¿Puedo trabajar en varios proyectos?
Sí. Pulsa «Proyectos» en la barra de herramientas para crear, cambiar, renombrar o eliminar proyectos. Cada proyecto conserva sus propios archivos, carpetas y contenido.
¿Cómo organizo los archivos en carpetas?
Abre el selector de carpetas a la izquierda de la barra de herramientas para ver «Carpetas y archivos». El botón más junto a una carpeta añade un archivo o una subcarpeta, y el lápiz permite renombrar elementos. Puedes arrastrar archivos a carpetas y fijar el explorador como ventana flotante.
¿Qué diseños hay disponibles?
En «Disposición», elige «Vista dividida», «Paneles apilados» o «Varias ventanas». La primera opción usa un editor con pestañas de archivos. La segunda coloca los archivos de la carpeta actual uno debajo de otro y la tercera los abre en paneles separados. Puedes redimensionar, minimizar o maximizar los paneles. Cerrar el panel de un archivo pide confirmación y elimina ese archivo.
Mostrar 5 másMostrar menos
¿Qué lenguajes admite el editor?
Puedes crear archivos HTML, CSS, JavaScript, JSON, XML, Python, Java, C, C++, PHP y texto sin formato. Los nueve primeros tipos tienen resaltado de sintaxis. PHP y texto sin formato se muestran sin él. HTML, CSS y JavaScript también ofrecen autocompletado con Ctrl+Space.
¿Puedo ejecutar Python, Java o C++ aquí?
No. Puedes editar esos archivos con resaltado de sintaxis, pero la vista previa solo ejecuta HTML, CSS y JavaScript. Para ejecutar Python, Java, C o C++, necesitas un entorno con el intérprete o compilador correspondiente.
¿Mi código es privado?
El editor conserva los archivos del proyecto en este navegador y no los sube a un servidor para editarlos. Sin embargo, la vista previa ejecuta tu código. Los scripts, fuentes, imágenes o peticiones de red que contenga pueden contactar con otros servicios. Ejecuta solo código de confianza.
¿Cómo escribo HTML, CSS y JavaScript y veo el resultado?
Empieza con index.html, style.css y script.js, o carga una plantilla. En el HTML, enlaza style.css con un elemento link y script.js con un elemento script. La vista previa usa esas referencias para cargar los archivos locales. Se actualiza tras una breve pausa al escribir, y «Consola» muestra la salida de JavaScript.
¿Es una alternativa gratuita a CodePen?
Sí, para probar HTML, CSS y JavaScript sin una cuenta. Incluye vista previa en directo, archivos separados, consola, guardado local y exportación ZIP. El editor no publica una página del proyecto que puedas compartir ni ofrece colaboración en tiempo real.
Detalles técnicos
Resaltado de sintaxis
CodeMirror 5 resalta la sintaxis de HTML, CSS, JavaScript, JSON, XML, Python, Java, C y C++. También puedes crear archivos PHP y de texto sin formato, que se muestran sin resaltado. El resaltado facilita la edición del código. La vista previa solo ejecuta HTML, CSS y JavaScript.
Guardado automático y conservación de datos
Tras tres segundos sin editar, el editor escribe los archivos y la estructura de carpetas en IndexedDB. Las preferencias se almacenan por separado. El proyecto recuerda el archivo y la carpeta seleccionados, pero no el historial de deshacer ni la posición del cursor. Para volver a abrir la copia local, el almacenamiento debe estar disponible y los datos del navegador no deben haberse borrado.
Mostrar 4 másMostrar menos
Funciones del editor
CodeMirror ofrece números de línea, sangría, cierre automático, plegado de código y búsqueda con expresiones regulares. El tamaño de fuente va de 12 a 24 píxeles, y el ancho de tabulación puede ser de 2, 4 u 8 espacios. El aspecto puede ser «Oscuro», «Claro» o «Sistema». La última opción sigue los ajustes del dispositivo.
Archivos y proyectos
Cada proyecto contiene archivos de texto y un árbol virtual de carpetas. La exportación crea un ZIP del proyecto actual y conserva las rutas de las carpetas. Para traer código de otro sitio, crea los archivos y pega su contenido. No se pueden importar archivos ZIP.
Vista previa en directo y consola
La vista previa muestra un documento HTML en un iframe con restricciones de seguridad. Las referencias a hojas de estilo y scripts locales se convierten en URL de datos. Los recursos externos pueden seguir cargándose por la red. Cada edición programa una actualización tras 500 milisegundos. La consola recibe mensajes y errores de la vista previa y le envía los comandos JavaScript que introduzcas.
Diseños
«Vista dividida» usa pestañas de archivos en un solo editor. «Paneles apilados» coloca los editores de la carpeta actual uno debajo de otro y «Varias ventanas» abre paneles separados junto a la vista previa. El diseño elegido se guarda localmente, aunque no se restauran todas las posiciones de los paneles ni todos los estados de edición.