Documentation Dev preview (Sandpack)

Dev preview (Sandpack)

The dev preview uses Sandpack, the in-browser bundler from CodeSandbox, to bundle and run your project files inside an iframe in the Preview tab. Your code runs in the browser rather than on a CloudCode server. npm packages are fetched from Sandpack's CDN.

Supported
  • React projects in TypeScript (.ts/.tsx) or JavaScript (.jsx). Projects without either are previewed as static HTML
  • Dependencies listed in package.json
  • An entry point is generated automatically when index.html / main.tsx are missing (it renders src/App)
  • The @/ import alias, read from tsconfig.json paths
  • CSS and SCSS/Sass, with Sass @imports inlined
  • Images in the project, inlined as data URIs (missing images show a placeholder)
  • Next.js app-router pages, rendered client-side with shims for next/image, next/link, next/font, next/navigation and next/headers
  • Automatic recompile about 500 ms after a file changes
Limitations
  • This isn't a Node.js runtime: there's no fs, child_process, server code, API routes or server-side rendering
  • Tailwind's PostCSS build doesn't run, so @tailwind directives don't generate classes. Load Tailwind's CDN script in index.html if you need Tailwind styling here
  • Vue and Svelte projects aren't detected (only React and static templates are used)
  • Network requests are subject to CORS
  • Large packages can be slow on first load
Toolbar & status bar
  • Back, forward, refresh, and a URL bar for in-app routes
  • Viewports: Desktop (1280×720), Tablet (768×1024), Mobile (375×812)
  • Screenshot: saves a PNG, or exports the page as HTML when it can't be captured
  • Deploy: opens the Vercel deploy dialog (see Deployment)
  • CI badge: when the project is linked to a GitHub repo, shows check status for its open pull request
  • Console / Network drawers, Clear cache (forces a fresh bundle), Inspect (click an element to see its tag, id, classes and size), and New tab
Tip
When the preview hits a runtime error, an error overlay appears with an Auto-Fix button. It submits a fix job, which you can track in Settings → Auto-Fix Agent.