Saltar al contenido principal
Z

HTML Playground

Editor HTML/CSS/JS en vivo con vista previa mediante un iframe en sandbox. Guarda automáticamente en localStorage. Se ejecuta completamente en el cliente.

Gratis Sin registro Del lado del cliente Respetuoso con la privacidad Updated

La vista previa se actualiza automáticamente 300ms después de que dejas de escribir.

Vista previa

Cómo usar

  1. 1 Edita cualquiera de los paneles — HTML, CSS o JS. La vista previa se actualizará 300ms después de que dejes de escribir.
  2. 2 Guarda el fragmento (snippet) para conservar tu trabajo en localStorage y recuperarlo en tu próxima visita.
  3. 3 Pulsa Reiniciar para volver a cargar el ejemplo de muestra.

Por qué usar esta herramienta

  • Tres paneles de edición — HTML, CSS, JS — conectados a un único iframe de vista previa en vivo.
  • El fragmento se guarda mediante localStorage — cierra la pestaña, vuelve más tarde y tu código seguirá ahí.
  • El iframe está en sandbox (solo allow-scripts) — el JS puede ejecutarse, pero no puede acceder al origen de la página de herramientas.
  • Se ejecuta completamente en el cliente — sin idas y vueltas al servidor cada vez que pulsas una tecla.

Preguntas frecuentes

¿Puedo importar librerías externas?

Sí — agrega una etiqueta <code class="font-mono text-xs">&lt;script src="https://…"&gt;</code> dentro del panel de HTML. El iframe las cargará en la próxima reconstrucción de la vista previa.

¿El iframe está en sandbox?

Sí — configuramos <code class="font-mono text-xs">sandbox="allow-scripts"</code> y omitimos intencionalmente <code class="font-mono text-xs">allow-same-origin</code>, de modo que la vista previa no puede leer esta página ni su almacenamiento.

¿Dónde se guarda mi trabajo?

Solo se guarda en el <code class="font-mono text-xs">localStorage</code> del navegador cuando pulsas Guardar. No se envía nada a un servidor.

¿Qué es HTML Playground?

HTML Playground es una herramienta que permite editar HTML, CSS y JavaScript al mismo tiempo, renderizando el resultado en directo dentro de un iframe en sandbox. La herramienta guarda automáticamente tu trabajo en el localStorage del navegador, de modo que el código se mantiene entre sesiones. Al ejecutarse completamente en el cliente, todo ocurre en el propio navegador sin que nada se envíe a un servidor, creando un espacio privado para probar fragmentos de frontend.

Características

Tres paneles

Edita HTML, CSS y JS por separado; se combinan en un único documento en vivo.

Vista previa en vivo

Las ediciones se vuelven a renderizar en el iframe tras un breve retardo, sin necesidad de recargar.

Guardar fragmentos

Guarda tu HTML/CSS/JS actual en el almacenamiento local del navegador para más tarde.

100% privado

Se ejecuta en el cliente dentro de un iframe aislado — no se sube nada.

Ejemplo

Input

HTML: <h1>Hi</h1>   ·   CSS: h1{color:red}   ·   JS: console.log("ready")

Output

Live iframe preview: a red "Hi" heading (JS runs in the sandbox)

Casos de uso comunes

  1. 1

    Prototipar un componente

    Esboza una pequeña idea de HTML/CSS/JS y velo renderizarse al instante.

  2. 2

    Probar un fragmento de CSS

    Prueba un diseño o una animación sin necesidad de configurar un proyecto.

  3. 3

    Enseñar fundamentos de front-end

    Demuestra cómo se combinan HTML, CSS y JS en una sola vista en vivo.

Resumen

El playground de HTML de Zerethon renderiza en vivo el resultado de paneles independientes de HTML, CSS y JavaScript en un iframe aislado (sandboxed) mientras escribes, todo dentro de tu navegador. Aplica un retardo (debounce) a las ediciones, ensambla un documento completo y puede guardar tu fragmento de código en el almacenamiento local. No se sube nada — la vista previa se ejecuta en tu dispositivo.

Categoría
Desarrollo
Precio
Gratis
Privacidad
Basado en el navegador
Registro
No necesario

Referencias

Privacidad

Tus datos nunca salen de tu navegador, salvo que se indique explícitamente. HTML Playground funciona completamente del lado del cliente — sin subida a servidor, sin registro de actividad, sin seguimiento de tu contenido.

Herramientas relacionadas

Formateador de JSON

Formatea, valida y minifica JSON en línea. Gratis, sin necesidad de registro — tus datos nunca salen de tu navegador.

Abrir herramienta

Formateador de SQL

Formatea consultas SQL en línea — embellece el código para MySQL, PostgreSQL, SQLite, SQL Server, Oracle y BigQuery.

Abrir herramienta

Generador de UUID

Genera UUID en línea — v1, v4, v7 y Nil. Genera hasta 10.000 en lote. Gratis, sin registro.

Abrir herramienta

Generador de contraseñas

Genera contraseñas aleatorias fuertes y criptográficamente seguras. Personaliza la longitud y los conjuntos de caracteres — todo se ejecuta en tu navegador.

Abrir herramienta

Crea, comparte y crece en Zerethon Social

Registro gratuito. Gana puntos, colecciona logros y conecta con creadores de todo el mundo.

Prueba Zerethon gratis