# 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 as a script file and run:

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

## 快速使用

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

一行组件嵌入可编辑代码 + 即时预览。

## 什么是 Sandpack？

CodeSandbox 的开源实时代码编辑器组件。浏览器内编辑代码并即时预览，Claude.ai artifacts 和 Vercel v0 均使用。

**一句话总结**：实时代码编辑器组件，浏览器内编辑+即时预览，Claude.ai artifacts 和 Vercel v0 使用，支持 React/Vue/Angular，零服务器，5k+ stars。

**适合人群**：AI 聊天和平台需要代码实时预览的开发者。

## 核心功能

### 1. 多模板 — React/Vue/Angular/Node.js
### 2. 自定义文件 — 任意文件结构
### 3. npm 依赖 — 浏览器内安装使用
### 4. AI 集成 — 渲染 AI 生成的代码

## 常见问题

**Q: 需要服务器？**
A: 不需要，浏览器内打包运行。

**Q: Claude.ai 怎么用的？**
A: Claude artifacts 用 Sandpack 渲染生成的 React 代码。

## 来源与致谢

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

---
Source: https://tokrepo.com/en/workflows/847af291-82ed-41ac-9bec-1719afd4d3b0
Author: Script Depot