> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voxcode.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Preview

> See your code running live as you build in Voxcode

Every project you build in Voxcode can be previewed instantly without leaving the browser. Voxcode detects what kind of project you are working on and chooses the right rendering engine automatically — from a simple static iframe to a full Node.js WebContainer.

## Opening the preview

Click the **Preview** button in the chat interface. Voxcode reads all files from the Virtual File System, detects your project type, and renders the output in a preview window.

<Steps>
  <Step title="Generate some code">
    Ask the AI to create a project — a landing page, a React component, a Node.js server. The generated files are automatically saved to the VFS.
  </Step>

  <Step title="Click Preview">
    Tap or click the **Preview** button. Voxcode reads all your project files from the Virtual File System, detects the project type, and opens the preview window.
  </Step>

  <Step title="See it live">
    Your project renders immediately. For static HTML, the iframe appears in under a second. For React and Node.js projects, the appropriate sandbox environment initializes and renders the output.
  </Step>
</Steps>

## Automatic project detection

Voxcode reads your VFS files and selects a rendering engine based on what it finds. You do not need to configure this.

| Project type     | Detection rule                                              | Rendering engine                                |
| ---------------- | ----------------------------------------------------------- | ----------------------------------------------- |
| Static HTML/CSS  | `index.html` exists, no `package.json`                      | **iframe** — instant, no build step             |
| Vanilla JS       | `index.html` with `<script type="module">` or `.js` imports | **iframe** with inline JS injection             |
| React app        | `package.json` contains `react` in dependencies             | **Sandpack** — in-browser code editor + preview |
| React TypeScript | `package.json` has `react` and `typescript`                 | **Sandpack** with TypeScript template           |
| Node.js app      | `package.json` with a `scripts` field                       | **WebContainer** — full Node.js runtime         |

The detection logic checks `package.json` first. If no `package.json` exists, it falls back to checking for `index.html` and inspecting its script tags.

## Hot reload

Changes to your VFS files reflect in the preview immediately. When the AI updates a file or you edit code in a CodeSnippet card, clicking **Refresh** in the preview header re-renders the project with the latest file contents. You do not need to manually copy or paste code between editors.

## Split view and fullscreen

<Tabs>
  <Tab title="Split view (default)">
    The preview window opens as an overlay on desktop at 95% viewport width and 90% viewport height. The code editor and rendered output appear side by side for React projects using Sandpack, so you can read the code and watch it run at the same time.
  </Tab>

  <Tab title="Fullscreen">
    Click the **maximize** icon (expand arrows) in the preview header to go fullscreen. The preview takes over the entire viewport. Click the **minimize** icon or the chevron button to return to the normal view.
  </Tab>
</Tabs>

## Mobile vs. desktop rendering

Voxcode adjusts its preview behavior based on your screen size.

<CardGroup cols={2}>
  <Card title="Mobile" icon="mobile">
    On screens narrower than 768px, the preview opens as a full-screen modal. For React projects, Sandpack shows a toggle between **Code** view and **Preview** view — you switch between them with the code and eye icons in the preview header. The WebContainer engine is not available on mobile; Node.js projects fall back to Sandpack on small screens.
  </Card>

  <Card title="Desktop" icon="desktop">
    On wider screens, Sandpack displays the code editor and the live preview panel side by side. You can switch the rendering engine between **Sandpack** (browser-based) and **WebContainer** (Node.js) using the CPU icon in the preview header.
  </Card>
</CardGroup>

## Rendering engine details

### iframe (Static and Vanilla JS)

Static HTML projects are rendered using `srcDoc` on a sandboxed `<iframe>`. Voxcode injects linked CSS files inline before rendering, so external stylesheet references resolve correctly without a server. Vanilla JS files with `<script type="module">` are also handled via the iframe with inline script injection.

### Sandpack (React)

React projects use [Sandpack](https://sandpack.codesandbox.io/) — CodeSandbox's in-browser bundler. Sandpack compiles your components on the fly, provides a live editor with syntax highlighting and inline error display, and renders the output in a preview pane. Tailwind CSS is automatically available via CDN for all Sandpack previews.

### WebContainer (Node.js)

Node.js projects run in a [WebContainer](https://webcontainers.io/) — a full Node.js environment that runs entirely in the browser using WebAssembly. Voxcode mounts your VFS files into the container, installs dependencies, and runs the `dev` or `start` script from your `package.json`. The running server output streams into the preview iframe.

<Note>
  WebContainer requires a modern browser with support for SharedArrayBuffer and cross-origin isolation headers (Chrome 92+, Edge 92+, Firefox 79+ with flags). If your browser does not support WebContainer, use the Sandpack engine instead — it handles most React projects without requiring Node.js.
</Note>