Previewing your code in the sandboxed in-browser preview

The IDE includes a live preview that bundles and renders runnable web projects entirely in your browser — your code never leaves the origin to build.

How the preview works

When you run the preview, the IDE bundles your project locally using esbuild compiled to WebAssembly. It finds your project root (the shallowest package.json), resolves your imports, and produces a bundle that's rendered inside a sandboxed iframe. Public npm packages are pulled from a CDN via an import map; your own source code is bundled in-browser and never uploaded to a remote build service. This is the self-hosted alternative to a remote bundler.

What can run

Client-side web projects — React and similar app structures that mount into a root element — are what the preview is built for. The bundler classifies the project first and tells you when it isn't runnable.

What can't run

Because there's no Node.js inside a browser, server-side projects can't run in the preview. Next.js, SSR apps, and backend code are out of scope for the in-browser preview — it's strictly for client-only web output.

When the preview won't start

If the project has no browser entry point, fails to build, or has broken imports, the preview shows the reason instead of a blank screen. From there you can use "Fix with Camelia" to have the copilot add an entry point, ensure the right dependencies, repair imports, and re-run — covered in a separate article.