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.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.
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.
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 |
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
- Split view (default)
- Fullscreen
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.
Mobile vs. desktop rendering
Voxcode adjusts its preview behavior based on your screen size.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.
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.
Rendering engine details
iframe (Static and Vanilla JS)
Static HTML projects are rendered usingsrcDoc 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 — 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 — 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 thedev or start script from your package.json. The running server output streams into the preview iframe.
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.