Live Web Preview & Responsive Testing
Hot-reloading preview with device breakpoints, pop-out, and console debugging.
The Live Web Preview runs your application as you build it.
In-browser compilation
Cloud Studio compiles with WebAssembly in your browser:
- Sub-second hot reload: the preview updates within milliseconds of a change.
- State preservation: form inputs, open tabs, and client routes survive refreshes.
Device breakpoints
Toggle viewports from the hotbar:
| Viewport | Width | Test against |
|---|---|---|
| Mobile | 375px | iPhone / Pixel |
| Tablet | 768px | iPad / Galaxy Tab |
| Desktop | 100% | A full browser window |
Debugging
- Pop-out: open the running app in a standalone tab.
- Live console: the bottom drawer shows
console.log, runtime warnings, failed requests, and exceptions. - Fix with Bhai: on an uncaught error, click the prompt next to the trace to have Bhai diagnose and patch it.
Reproduce the bug in the preview first, then ask Bhai to fix it — the console context makes for a much more accurate fix.
Was this page helpful?