Cómo usar un playground HTML

Pasos

1. Empieza con la plantilla inicial o carga un proyecto de ejemplo.
2. Edita la estructura HTML, los estilos CSS y el comportamiento JavaScript.
3. Pulsa Ejecutar (Ctrl/Cmd + Enter) para actualizar la vista previa en sandbox.
4. Abre el panel de consola para leer logs, advertencias y errores.
5. Usa los controles responsivos para comprobar el diseño en anchos habituales.
6. Formatea, copia o descarga tu trabajo como index.html.

Ejemplo

Ejemplo — Ejecutar

HTML

<button id="counter">0</button>

CSS

#counter { font-size: 2rem; padding: 16px; }

JavaScript

let count = 0;
document.getElementById("counter").addEventListener("click", (event) => {
  event.currentTarget.textContent = ++count;
});

Cada clic aumenta el contador. Ejecutar de nuevo reinicia el valor; el almacenamiento local guarda código, no el estado del contador.

Consejo

La ejecución básica de HTML, CSS y JavaScript para la vista previa ocurre localmente en tu navegador.

Herramientas relacionadas