Live preview
The hot-reloading preview, responsive presets, and the inspector.
The preview renders your workspace code live in a sandboxed iframe, the same build that will deploy. It hot-reloads as files change, so edits show within seconds.
Lifecycle
When your session starts, the container boots a dev server. The preview shows a starting state while it polls for readiness, then switches to ready and loads the iframe. File changes trigger hot-reload automatically; if a hot update fails, Modus force-refreshes the iframe so you never get stuck on a stale render.
Responsive presets
Test at the canonical breakpoints from the toolbar:
| Preset | Size |
|---|---|
| Responsive | Fills the panel |
| Tablet | 768 × 1024 |
| Mobile | 375 × 812 |
Element inspector
Turn on the inspector and hover the preview to highlight elements; click to select one. Modus captures its selector, tag, outer HTML, computed styles, and bounding box, so you can tell the AI "fix this element" with the exact target already in context, instead of describing it by position.
Console errors
The preview captures console.error output from your running app, shows an error/warning count, and feeds errors into the next AI turn as context, so the agent can react to a runtime error it actually caused.