# Sandpack — AI-Powered Live Code Editor Component

> Embed live code editors in web apps with instant preview. Sandpack by CodeSandbox powers interactive coding experiences for AI chatbots, docs, and educational platforms.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm install @codesandbox/sandpack-react
```

```tsx
import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return (
    <Sandpack
      template="react"
      files={{
        "/App.js": `export default function App() {
  return <h1>Hello World</h1>;
}`,
      }}
    />
  );
}
```

## 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

```tsx
// 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

```tsx
<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

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

### 4. Theme Customization

```tsx
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

```tsx
// 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?

| Platform | How |
|----------|-----|
| Claude.ai | Artifacts code preview |
| Vercel v0 | Generated UI preview |
| CodeSandbox | Core editor |
| Documentation sites | Interactive code examples |
| Education platforms | Live coding exercises |

## Sandpack vs Alternatives

| Feature | Sandpack | StackBlitz | Monaco | CodeMirror |
|---------|----------|------------|--------|------------|
| Live preview | Yes | Yes | No | No |
| Browser-only | Yes | WebContainers | N/A | N/A |
| React component | Yes | Partial | Community | Community |
| npm packages | Yes | Yes | N/A | N/A |
| Bundle size | ~300KB | ~2MB | ~1MB | ~200KB |
| Open source | Yes | Partial | Yes | Yes |

## 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.

## Source & Thanks

> Created by [CodeSandbox](https://github.com/codesandbox). Licensed under Apache 2.0.
>
> [codesandbox/sandpack](https://github.com/codesandbox/sandpack) — 5k+ stars

<!-- ZH -->

## Quick Use

```bash
npm install @codesandbox/sandpack-react
```

Embed an editable code editor with live preview in one component.

## What is Sandpack?

CodeSandbox's open-source live code editor component. Edit code in the browser with instant preview — used by Claude.ai artifacts and Vercel v0.

**TL;DR**: Live code editor component. In-browser editing + instant preview. Used by Claude.ai artifacts and Vercel v0. Supports React/Vue/Angular. Zero server. 5k+ stars.

**Best for**: Developers of AI chat and platforms that need live code preview.

## Core Features

### 1. Multiple Templates — React/Vue/Angular/Node.js
### 2. Custom Files — any file structure
### 3. npm Dependencies — install and use in the browser
### 4. AI Integration — render AI-generated code

## FAQ

**Q: Need a server?**
A: No — bundling and execution happen in the browser.

**Q: How does Claude.ai use it?**
A: Claude artifacts render generated React code via Sandpack.

## Source & Thanks

> [codesandbox/sandpack](https://github.com/codesandbox/sandpack) — 5k+ stars, Apache 2.0

---
Source: https://tokrepo.com/en/workflows/sandpack-ai-powered-live-code-editor-component-847af291
Author: Script Depot