JSFiddle: escribir, probar y compartir HTML/CSS/JS (entrada rescatada)

Contexto actualizado: JSFiddle es un “playground” para crear ejemplos rápidos de HTML, CSS y JavaScript, ejecutarlos y compartir un enlace. Los “fiddles” tienen paneles para código y un panel de resultado; puedes pulsar Run, guardar (Save/Update) o crear una copia con Fork. :contentReference[oaicite:0]{index=0}

Cómo añadir librerías

Puedes cargar librerías de dos formas:

JavaScript → Frameworks & pre-procesadores (React, Vue, TypeScript, Babel, etc.). :contentReference[oaicite:1]{index=1}
External resources: agrega URLs de JS o CSS (incluye buscador de CDNJS). :contentReference[oaicite:2]{index=2}

Flujo básico

Abre jsfiddle.net y elige un boilerplate o uno en blanco.
Escribe tu HTML, CSS y JS en los paneles. (El <body> y el doctype se añaden automáticamente.) :contentReference[oaicite:3]{index=3}
Pulsa Run para ver el resultado. :contentReference[oaicite:4]{index=4}
Guarda con Save/Update o crea una copia con Fork. :contentReference[oaicite:5]{index=5}

Incrustar un fiddle en tu blog

Desde el menú de acciones, JSFiddle te da un snippet para iframe o script. Puedes cambiar el orden de pestañas (por ejemplo result,js,html,css) y elegir tema claro/oscuro. :contentReference[oaicite:6]{index=6}

<!-- Ejemplo de embed (reemplaza la URL por la de tu fiddle) -->
<iframe width="100%" height="400"
  src="https://jsfiddle.net/usuario/abc123/embedded/result,js,html,css/"
  allowfullscreen="allowfullscreen" loading="lazy"></iframe>

¿JSFiddle o alternativas?

CodePen: playground muy popular; también permite External Resources y embebidos. :contentReference[oaicite:7]{index=7}
StackBlitz: IDE en el navegador con WebContainers (Node.js corriendo en la pestaña), ideal para proyectos completos. :contentReference[oaicite:8]{index=8}

Tip: si en tu post antiguo mencionabas MooTools/jQuery/Prototype, puedes dejarlo como anécdota histórica y añadir que hoy suele usarse React/Vue/TypeScript vía las opciones del panel de JavaScript. :contentReference[oaicite:9]{index=9}

Última revisión: 19 de agosto de 2025

Alvia — Números & Código

jueves, 21 de junio de 2012