Saltar al contenido
ToolMug

Usa ↑ ↓ para moverte, Enter para abrir y Esc para cerrar.

Editor de HTML, CSS y JavaScript

Escribe HTML, CSS y JavaScript a la izquierda y observa cómo se actualiza el resultado a la derecha, con una consola debajo que muestra la salida de console.log y los errores de script. Útil para aprender front-end, probar un estilo o una interacción, o mostrarle una demo a alguien — y puedes descargarlo todo como un único archivo HTML.

Funciona en tu navegador: nada de lo que introduces se sube

Consola

    El código se ejecuta en un entorno aislado sin acceso a los datos de este sitio, y no se sube nada. La descarga es un único archivo HTML combinado. Tab aplica sangría en el editor; pulsa Esc y luego Tab para salir del foco.

    Cómo se usa

    1. Cambia entre los editores de HTML, CSS y JavaScript con los botones de arriba y escribe tu código.
    2. La vista previa se actualiza automáticamente cuando dejas de escribir, o desactiva «Ejecutar automáticamente» y haz clic en «Ejecutar».
    3. Revisa la consola para ver la salida y los errores, y luego haz clic en «Descargar HTML» para guardar tu página.

    Opciones explicadas

    Entorno aislado
    La vista previa se ejecuta en un entorno aislado que no puede leer las cookies ni el almacenamiento de este sitio y no puede abrir diálogos.
    Consola
    Muestra la salida de console.log, warn y error además de errores no capturados con el número de línea, y conserva las últimas 200 entradas.
    Descarga
    Combina las tres partes en un archivo HTML, con los estilos en una etiqueta style y el script al final del body.

    Cómo se monta la página

    Los tres editores se combinan en un solo documento, en este orden. Es la misma estructura que obtienes al hacer clic en «Descargar HTML», salvo que el pequeño script que envía la salida de la consola a la página, bajo la vista previa, no se incluye en la descarga.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* tu CSS */
</style>
</head>
<body>
<!-- tu HTML -->
<script>
// tu JavaScript
</script>
</body>
</html>

    Como el script va después de tu HTML, puedes usar document.getElementById de inmediato sin esperar a que la página termine de cargar. En el editor de HTML solo escribes lo que va dentro del body, no las etiquetas html, head o body en sí. La vista previa es un iframe que solo tiene permiso para ejecutar scripts, y por eso se bloquean los cuadros de diálogo de alerta y el acceso a las cookies de este sitio.

    Preguntas frecuentes

    ¿Puedo usar bibliotecas externas?

    Sí. Añade una etiqueta script o link que apunte a un CDN como jsDelivr en el editor de HTML.

    ¿Por qué no aparece alert?

    El entorno aislado bloquea los diálogos, así que alert y confirm no hacen nada. Usa console.log en su lugar.

    ¿Se guarda mi código?

    No se guarda ni se sube. Descarga el archivo HTML antes de cerrar la página.

    Privacidad

    Esta herramienta funciona por completo en tu navegador. Tus archivos y textos se procesan en tu dispositivo y nunca se suben a nuestros servidores.

    Herramientas relacionadas