Cómo ejecutar HTML, CSS y JavaScript en el navegador

Pega HTML con CSS y JavaScript en el editor y pulsa Vista previa: el código se abre en una ventana nueva del navegador, donde se renderiza el marcado y se ejecutan los scripts. Es una forma rápida de ver cómo se comporta un fragmento, un cambio de maquetación o un pequeño script DOM en un navegador real, sin crear archivos ni levantar un servidor local.

La página pegada se ejecuta dentro de un marco aislado (sandbox), separada de este sitio. Los scripts funcionan y los diálogos también, pero el código no puede leer el almacenamiento ni el DOM de esta página, y nada de lo que escribes se sube: la vista previa ocurre por completo en tu navegador.

  1. Pega o escribe el código en el editor: un documento HTML completo o un fragmento, como un div con un bloque de estilo y otro de script.
  2. Pulsa Vista previa. Se abre una ventana nueva con la página renderizada; si el navegador bloquea las ventanas emergentes, la página lo indica: permite las ventanas emergentes para voritools.com y vuelve a pulsar.
  3. Usa Seleccionar todo, Copiar y Limpiar mientras iteras: Seleccionar todo marca todo el editor, Copiar lo pone en el portapapeles y Limpiar vacía el cuadro para empezar de nuevo.
  4. Cierra la ventana de vista previa al terminar; ni el código ni la vista previa se guardan, así que conserva tu propia copia de lo que quieras reutilizar.

Qué ocurre al pulsar Vista previa

Cómo se aísla la vista previa

La ventana de vista previa carga tu código en un iframe con el atributo sandbox configurado como allow-scripts, allow-modals, allow-forms y allow-popups. Por eso los scripts se ejecutan, los diálogos (alert, confirm, prompt) y los controles de formulario funcionan, y los enlaces pueden abrir más ventanas, mientras que el marco se trata como un origen opaco.

Ese origen opaco es lo importante: una página dentro del sandbox no puede alcanzar el documento padre ni leer el localStorage de este sitio, de modo que el código pegado de una fuente desconocida no puede tocar tu pestaña de VoriTools. Tampoco puede llevarse esta página a otro sitio; lo que haga se queda en su propio marco.

Qué puedes comprobar con ella

Con el código que le des, la vista previa se comporta como una pestaña del navegador: el HTML se analiza, el CSS se aplica, los scripts internos y externos se ejecutan y los cambios en el DOM se ven al momento. Cambiar el tamaño de la ventana de vista previa es una forma práctica de ver cómo responden las media queries y los diseños flexibles.

La herramienta no añade su propia consola de errores: cuando un script falla, ves lo que mostraría una página normal, que suele ser un marco en blanco o a medio renderizar. Por eso sirve para una comprobación rápida, y las herramientas de desarrollo del navegador son el sitio al que mirar cuando algo falla.

Límites, privacidad y notas prácticas

No se envía nada a VoriTools: el código lo analiza y ejecuta tu navegador y ninguna petición lo transporta. Tampoco hay ejecución en el servidor, así que el código PHP, Python o de base de datos no se ejecutará aquí.

El editor es deliberadamente sencillo —sin resaltado de sintaxis, carga de archivos ni historial— y al recargar la página se vacía. El código que dependa de cookies o localStorage no encontrará ninguna sesión guardada en la vista previa aislada; y si el bloqueador de ventanas emergentes impide la ventana, la página muestra un mensaje en lugar de la vista previa.

Herramientas recientes: