> ## Documentation Index
> Fetch the complete documentation index at: https://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://docs-2.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://docs-2.manicule.dev/api/mcp.
> Every agent surface: https://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: 288 · updated: 2026-11-11 -->
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 Integration](/studio/version-control.md)

> Real-time hot-reloading preview with responsive device breakpoints and console debugging.

The **Live Web Preview** panel displays your application running in real time as you build.

***

## In-Browser Compilation

BhaiCode uses an in-browser WebAssembly compiler:

* **Sub-Second HMR**: Preview updates within milliseconds after code changes.
* **State Preservation**: Forms, tabs, and client route states persist across code refreshes.

***

## Responsive Device Breakpoints

Toggle device viewports with a single click in the hotbar:

| Viewport    | Width   | Target Device              |
| ----------- | ------- | -------------------------- |
| **Mobile**  | `375px` | Phone (iPhone / Pixel)     |
| **Tablet**  | `768px` | Tablet (iPad / Galaxy Tab) |
| **Desktop** | `100%`  | Full desktop window        |

***

## Pop-Out & Debugging

* **Pop-out Window (`↗`)**: Open your running app in a standalone browser tab.
* **Live Console**: Toggle the bottom drawer to view `console.log`, runtime warnings, and exceptions. If an uncaught error occurs, a one-click **"Fix with Bhai"** prompt lets the AI diagnose and resolve the issue immediately.