Tu código solo se ejecuta en tu navegador, dentro de un marco aislado sin acceso a este sitio. El código de un enlace compartido también se ejecuta: revísalo si no confías en quien lo envió.
Carga un boceto animado de inicio para la API 2D de <canvas> de HTML5: un bucle con requestAnimationFrame, un lienzo que se adapta al tamaño y formas dibujadas en cada fotograma. Cambia colores, velocidades o llamadas de dibujo y la animación se reinicia mientras escribes. Ideal para arte generativo, juegos sencillos y enseñar coordenadas y bucles.
Cómo se usa
- Escribe HTML, CSS y JavaScript en sus pestañas. Con Auto activado el resultado se recarga poco después de dejar de escribir; si no, pulsa Ejecutar.
- console.log, warn, error, info y table aparecen en la consola bajo el resultado. Los errores no capturados muestran la línea; tócala para ir a ella.
- Empieza desde una plantilla: página básica, animación con canvas o ejemplo de consola de JavaScript.
- Copia un enlace para compartir (el código va comprimido dentro del propio enlace) o descarga todo como un único .html.
- El resultado se ejecuta en un iframe aislado sin acceso al mismo origen: no puede leer este sitio, tus cookies ni tu almacenamiento, y no se sube nada.
- Tu código se guarda solo en este navegador. Al abrir un enlace compartido se carga ese código.
- Los enlaces guardan el código tras el # para que nunca llegue a un servidor; un código muy largo genera enlaces muy largos que algunas apps cortan.
- Si pegas un documento HTML completo, el CSS va a su head y el JavaScript antes de </body>.
Para qué sirve
Úsalo para probar un truco de CSS antes de llevarlo a un proyecto, reproducir un fallo en pocas líneas para un compañero o un foro, prototipar un componente, enseñar lo básico de la web o probar una API con fetch. Cada pestaña es un lenguaje y el resultado se recarga poco después de dejar de escribir; desactiva la ejecución automática con scripts pesados y pulsa Ejecutar cuando quieras.
console.log, info, warn, error y console.table aparecen bajo el resultado y los errores no capturados y promesas rechazadas salen con su número de línea, que puedes tocar para ir al código.
Cómo funciona el aislamiento
Tu página se ejecuta en un iframe aislado sin acceso al mismo origen, así que no puede leer el almacenamiento ni las cookies de este sitio, y un bucle infinito o un fallo solo afectan a la vista previa. Las peticiones de red de tu código salen desde tu navegador como las de cualquier web; no se envía nada más. El JavaScript moderno, con async/await y llamadas fetch, funciona como en una página normal.
Compartir y guardar
El editor conserva tu último código en este navegador. El enlace para compartir comprime las tres pestañas en la parte de la URL tras el #, que los navegadores nunca envían al servidor; con mucho código salen enlaces muy largos que algunas apps de chat recortan. Descarga el .html para tener un archivo independiente que se abre en cualquier navegador.
Preguntas frecuentes
¿Necesito una cuenta para guardar mi código?
No. El código se guarda solo en este navegador. Para pasarlo a otro dispositivo o compartirlo, copia el enlace o descarga el archivo .html.
¿Otras personas pueden ver mi código?
Solo si les envías el enlace. El código está en tu navegador y dentro del enlace tras el #, que no se envía a ningún servidor.
¿Puedo usar librerías externas como React o jQuery?
Sí. Añade en la pestaña HTML una etiqueta script o link que apunte a un CDN, como en cualquier página. La vista previa la carga de la red al ejecutarse.
¿Por qué no funcionan localStorage o las cookies en mi código?
La vista previa se ejecuta en un iframe aislado sin acceso al mismo origen, así que el almacenamiento y las cookies están bloqueados o separados. Eso mantiene seguro el editor; prueba ese código en una página normal.
¿Cómo veo los errores de mi JavaScript?
Los errores no capturados y las promesas fallidas aparecen en la consola bajo el resultado con el número de línea. Toca el mensaje para ir a esa línea en la pestaña JS.
¿Qué pasa si pego un documento HTML completo?
El editor respeta tu documento e inserta el CSS en su head y el JavaScript justo antes de </body>, así que las páginas completas funcionan tal cual.