> ## Documentation Index
> Fetch the complete documentation index at: https://012e27a-docs-2.manicule.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://012e27a-docs-2.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://012e27a-docs-2.manicule.dev/api/mcp.
> Every agent surface: https://012e27a-docs-2.manicule.dev/.well-known/llms-manifest.json

# Live Web Preview & Responsive Testing (/studio/live-preview)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 282 · updated: 2026-11-12 -->
Related: [Cloud Studio Overview](/studio/overview.md), [AI Chat & Context Pinning](/studio/ai-chat.md), [In-Browser Code Editor](/studio/code-editor.md), [Version Control & Git](/studio/version-control.md)

> 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.

<Tip>Reproduce the bug in the preview first, then ask Bhai to fix it — the console context makes
for a much more accurate fix.</Tip>