# How the Visual Editor Canvas Renders Per-Breakpoint Iframes in Instatic > Discover how Instatic's visual editor renders per-breakpoint iframes for accurate CSS media query evaluation and JavaScript sandboxing. Learn about its innovative approach to responsive design. - Repository: [CoreBunch/Instatic](https://github.com/CoreBunch/Instatic) - Tags: internals - Published: 2026-07-29 --- **Instatic renders each responsive breakpoint as an isolated iframe to guarantee accurate CSS media query evaluation and JavaScript sandboxing, with [`BreakpointFrame.tsx`](https://github.com/CoreBunch/Instatic/blob/main/BreakpointFrame.tsx) handling iframe creation and [`CanvasRoot.tsx`](https://github.com/CoreBunch/Instatic/blob/main/CanvasRoot.tsx) orchestrating multiple simultaneous views via a Redux-managed state.** Instatic is an open-source visual site builder that employs a multi-iframe architecture for its editing canvas. Unlike traditional responsive preview modes that simply resize a single viewport, the **visual editor canvas renders per-breakpoint iframes** to provide authentic device emulation. This design ensures that CSS media queries, element dimensions, and JavaScript `window` measurements behave exactly as they would on actual target devices, while keeping plugin execution safely isolated from the host application. ## The Per-Breakpoint Iframe Architecture The core philosophy behind Instatic's canvas is **complete isolation**. Rather than simulating breakpoints through CSS transforms or container queries on a shared DOM, the editor spawns a distinct `