Metodología
Edición en el navegador con vista previa aislada en iframe, reenvío seguro de la consola y persistencia local para un flujo de trabajo rápido y seguro.
1. Arquitectura del editor
El espacio de trabajo utiliza tres editores de texto para HTML, CSS y JavaScript con márgenes de números de línea, gestión de sangría con tabulaciones, controles de tamaño de fuente y ajuste de línea opcional.
2. Procesamiento de HTML
El HTML del panel HTML se coloca en el body de un documento generado. La herramienta no ejecuta HTML como interfaz de la página principal.
3. Inyección de CSS
El CSS se inserta en un elemento style del head del documento generado para que las reglas se apliquen solo al documento de vista previa.
4. Ejecución de JavaScript
JavaScript se coloca en un elemento script dentro del documento de vista previa. Se ejecuta en el contexto de navegación del iframe tras pulsar Run.
5. Renderizado en iframe
El documento combinado se asigna a iframe.srcdoc, lo que crea un documento de vista previa nuevo sin navegar la página principal.
6. Aislamiento sandbox
El iframe usa un atributo sandbox (scripts permitidos para la vista previa). Las API DOM de la página principal no se exponen para la ejecución del código del usuario.
7. Gestión de la consola
Un pequeño puente dentro de la vista previa reenvía console.log/info/warn/error y errores en tiempo de ejecución al padre mediante postMessage para su visualización.
8. API del navegador
Lo que pueden hacer los scripts depende de la política del navegador y de los permisos del sandbox. Algunas API se comportan de forma distinta en iframes que en páginas de nivel superior.
9. Almacenamiento local
El estado del editor puede guardarse en claves de localStorage delimitadas a este origen para que una actualización no borre el trabajo en curso.
10. Limitaciones
No hay compilación en el servidor para HTML/CSS/JS estándar. Pipelines de compilación complejos, paquetes privados y API de dispositivo con privilegios quedan fuera del alcance.
11. Consideraciones de privacidad
El ensamblado de la vista previa es del lado del cliente. La persistencia local permanece en el navegador salvo que exportes o copies el contenido en otro lugar.
Volver al compilador
Un entorno de desarrollo rápido en el navegador para HTML, CSS y JavaScript.