Playground de HTML, CSS y JS

Qué hace

Este playground es un pequeño editor de código online para experimentos de front-end. Escribe HTML, CSS y JavaScript en tres pestañas con resaltado de sintaxis y la vista previa se actualiza mientras escribes, como en CodePen o JSFiddle pero sin cuenta. Una consola integrada muestra la salida de console.log() y los errores con el número de línea de tu JavaScript, así que puedes depurar sin abrir las herramientas de desarrollo. Eso lo hace práctico en un móvil o en un ordenador prestado.

Úsalo para probar un layout CSS, reproducir un bug para un compañero, probar un fragmento de Stack Overflow, enseñar a alguien que empieza o esbozar un prototipo rápido.

Cómo se usa

1. Escribe en las pestañas HTML, CSS y JS, o pulsa Ejemplo para empezar con una pequeña demo de un contador. Un punto en una pestaña indica que contiene código.
2. La vista previa se ejecuta automáticamente 0.6 segundos después de que dejes de escribir. Desactiva Ejecución automática para scripts pesados y pulsa Ejecutar o Ctrl+Enter cuando estés listo.
3. Mira la Consola para ver logs, avisos y errores; la línea más reciente siempre aparece arriba. Los objetos, arrays, Maps, Sets y elementos del DOM se muestran de forma compacta y legible.
4. Usa Compartir para enviar el código a alguien. Descargar ZIP guarda index.html, style.css y script.js como archivos separados, listos para un proyecto real; Descargar HTML lo guarda todo en un único archivo index.html que se abre en cualquier navegador.

Tu código se guarda en este navegador, así que sigue ahí cuando vuelvas. La tecla Tab sangra con dos espacios.

Ejemplo

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Cada clic añade una línea a la consola. Si escribes mal un nombre, la consola muestra un ReferenceError en rojo con la línea de la pestaña JS donde ocurrió.

Cómo funciona

Los tres paneles se combinan en un único documento HTML que se carga en un iframe con el atributo sandbox, así que el código no puede leer las cookies ni el almacenamiento de este sitio. Un pequeño script añadido al marco reenvía a la página las llamadas a la consola y los errores no capturados, y nada sale de tu dispositivo.