Visor de Codigo HTML
Pega tu codigo HTML en el cuadro de la izquierda, haz clic en 'Actualizar Vista Previa' y ve el resultado al instante a la derecha. La vista previa se ejecuta dentro de un marco aislado (sandbox), por lo que tu codigo nunca puede acceder al resto de tu sitio ni a tus cookies.
Como debo evaluar el resultado de la vista previa?
La vista previa en el panel derecho es una representacion cercana de como se veria tu codigo en un navegador. Si algo se ve inesperado, verifica que tus etiquetas HTML esten correctamente cerradas.
Como funciona la vista previa?
El HTML que pegas se coloca dentro de un iframe aislado mediante el atributo 'sandbox'. Este aislamiento permite que el codigo se ejecute mientras bloquea su acceso al resto del sitio, las cookies u otras pestanas, lo que significa que incluso el codigo no confiable puede probarse de forma segura.
Fórmula
- Pegas tu HTML (que tambien puede incluir CSS/JavaScript) en el cuadro de codigo.
- Al hacer clic en 'Actualizar Vista Previa', el codigo se pasa a un iframe aislado.
- El iframe renderiza el codigo en un entorno aislado de la pagina principal, gracias al atributo 'sandbox'.
- El resultado se muestra visualmente en el area de vista previa de la derecha.
- Edita el codigo y haz clic nuevamente en el boton para actualizar la vista previa.
Ejemplo de uso
Cuando pegas un fragmento de iframe de insercion o un experimento sencillo de HTML/CSS, el resultado aparece al instante en el panel derecho, para que puedas ver como se vera antes de anadirlo a tu sitio en vivo.
Consejos para la vista previa de HTML
- Prueba como se vera un codigo de insercion (como un widget iframe) en tu sitio antes de publicarlo aqui.
- La vista previa no se actualiza automaticamente con cada cambio; recuerda hacer clic en 'Actualizar Vista Previa' despues de editar tu codigo.
- Como el area de vista previa esta aislada, cualquier script en tu codigo no puede afectar ni leer el resto de tu pagina.
Comparaciones
Se renderiza correctamente al instante
Elementos basicos como titulos, parrafos y botones funcionan sin problemas.
Se puede probar antes de publicar
Ideal para verificar el tamano y la apariencia de un widget.
Se ejecuta, pero aislado
Los scripts no pueden alcanzar fuera del area de vista previa ni la pagina principal.
Guia de la herramienta de vista previa HTML
Durante el desarrollo web, ver como se vera un fragmento de HTML o un codigo de insercion en el sitio real suele requerir anadir primero el codigo a un entorno en vivo, lo que puede hacer perder tiempo y, en caso de codigo defectuoso, romper la apariencia del sitio. Esta herramienta elimina ese riesgo al permitirte probar el codigo en un entorno aislado.
En el centro de esta herramienta esta la funcion de iframe 'sandbox' que ofrecen los navegadores. Esta funcion aisla por completo el contenido dentro de un iframe fuera de un conjunto especifico de permisos; por defecto, no se otorga ninguna capacidad mas alla de ejecutar scripts: sin acceso a la pagina principal, sin envio de formularios, sin apertura de nuevas ventanas.
Esta decision de diseno es deliberada: ofrecer un espacio donde los usuarios puedan probar incluso codigo en el que no confian, protegiendo al mismo tiempo el sitio real (y las cookies y datos de sesion del usuario). Muchas plataformas profesionales de intercambio de codigo (como las herramientas al estilo CodePen) siguen el mismo principio de aislamiento.
La vista previa no se actualiza automaticamente con cada cambio de codigo; en su lugar, se activa manualmente con el boton 'Actualizar Vista Previa'. Esto mantiene el rendimiento fluido y le da al usuario control sobre cuando se ejecuta realmente el codigo, en lugar de ejecutarlo accidentalmente antes de terminarlo.
Esta herramienta es util para probar widgets de insercion, probar rapidamente una idea de HTML/CSS, inspeccionar de forma segura codigo compartido en un reporte de errores, o simplemente ver como se renderiza el HTML como parte de un proceso de aprendizaje.
FAQ
Se envia el codigo que pego a un servidor?
No. El codigo se procesa solo en tu navegador para la vista previa; nunca se envia ni se guarda en ningun servidor.
Por que el area de vista previa esta restringida con 'sandbox'?
Es una medida de seguridad para evitar que el codigo que pegas, especialmente si proviene de una fuente no confiable, acceda al resto de tu sitio, tus cookies u otros datos.
Puedo probar codigo que incluya JavaScript?
Si, el area de vista previa permite ejecutar scripts, pero como esta aislada, esos scripts no pueden interactuar con tu pagina principal.
Por que la vista previa no se actualiza automaticamente?
En lugar de volver a renderizar en cada pulsacion, el boton 'Actualizar Vista Previa' te da el control; esto tambien mantiene el rendimiento fluido con bloques grandes de codigo.
Puedo usar esta herramienta para probar codigos de insercion?
Si, uno de los usos mas comunes de esta herramienta es verificar si un codigo de insercion iframe se ve correctamente antes de anadirlo a tu sitio.
Hay un codigo de ejemplo disponible?
Si, un fragmento de HTML de ejemplo sencillo se precarga en el area de codigo al abrir la pagina; puedes borrarlo y pegar tu propio codigo.
El diseno que veo en la vista previa se vera exactamente igual en mi sitio real?
Por lo general si, pero como el area de vista previa tiene su propio reinicio de estilos, el codigo que interactua con el CSS global de tu sitio puede mostrar pequenas diferencias visuales.
Es seguro pegar aqui codigo de una fuente no confiable?
El aislamiento sandbox evita que el codigo dane tu sitio, pero de todos modos recomendamos revisar con cuidado el codigo de fuentes que no reconoces.
Herramientas relacionadas
Inserta esta herramienta en tu sitio
<iframe src="https://pinfox.tech/es/tools/general/visor-de-codigo-html/?embed=1" width="100%" height="720" loading="lazy" style="border:0;border-radius:12px;overflow:hidden" title="Visor de Codigo HTML: Vista Previa en Vivo - Pinfox"></iframe>