Sandpack — AI-Powered Live Code Editor Component

What is Sandpack?

Sandpack is an open-source live code editor component by CodeSandbox. It renders a code editor with instant browser preview — users can edit code and see results in real time, all in the browser with no server needed. For AI applications, Sandpack is the go-to solution for rendering AI-generated code with live preview, used by Claude.ai artifacts, Vercel v0, and other AI coding platforms.

Answer-Ready: Sandpack is a live code editor component by CodeSandbox. Embeds editable code with instant preview in web apps. Used by Claude.ai artifacts and Vercel v0 for rendering AI-generated code. Supports React, Vue, Angular, Vanilla JS. Zero server needed. 5k+ GitHub stars.

Best for: AI chatbots and platforms rendering code with live preview. Works with: React, Next.js, any web framework. Setup time: Under 3 minutes.

Core Features

1. Multiple Templates

// React
<Sandpack template="react" />

// Vue
<Sandpack template="vue" />

// Vanilla JS
<Sandpack template="vanilla" />

// Next.js
<Sandpack template="nextjs" />

// Angular
<Sandpack template="angular" />

// Node.js
<Sandpack template="node" />

2. Custom Files

<Sandpack
  template="react"
  files={{
    "/App.js": { code: "...", active: true },
    "/styles.css": `body { background: #f0f0f0; }`,
    "/utils.js": `export const add = (a, b) => a + b;`,
  }}
/>

3. npm Dependencies

<Sandpack
  template="react"
  customSetup={{
    dependencies: {
      "date-fns": "latest",
      "lodash": "^4.17.21",
      "axios": "^1.6.0",
    },
  }}
/>

4. Theme Customization

import { Sandpack } from "@codesandbox/sandpack-react";
import { dracula } from "@codesandbox/sandpack-themes";

<Sandpack theme={dracula} />
// Or: "light", "dark", "auto", custom theme object

5. AI Integration Pattern

// Render AI-generated code with live preview
function AICodePreview({ generatedCode }) {
  return (
    <Sandpack
      template="react"
      files={{ "/App.js": generatedCode }}
      options={{
        showNavigator: true,
        showTabs: true,
        editorHeight: 400,
      }}
    />
  );
}

Who Uses Sandpack?

Sandpack vs Alternatives

FAQ

Q: Does it need a server? A: No, Sandpack runs entirely in the browser using in-browser bundling.

Q: Can I use it for non-React projects? A: Yes, supports Vue, Angular, Svelte, Vanilla JS, Node.js, and more.

Q: How does Claude.ai use it? A: Claude.ai artifacts use Sandpack to render React code that Claude generates, giving users a live preview they can edit.