docs-sandpack

# Sandpack Patterns

## Quick Start Template

Most examples are single-file. Copy this and modify:

```mdx
<Sandpack>

` ` `js
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState(0);

  return (
    <button onClick={() => setValue(value + 1)}>
      Clicked {value} times
    </button>
  );
}
` ` `

</Sandpack>
```

---

## File Naming

| Pattern | Usage |
|---------|-------|
| ` ```js ` | Main file (no prefix) |
| ` ```js src/FileName.js ` | Supporting files |
| ` ```js src/File.js active ` | Active file (reference pages) |
| ` ```js src/data.js hidden ` | Hidden files |
| ` ```css ` | CSS styles |
| ` ```json package.json ` | External dependencies |

**Critical:** Main file must have `export default`.

## Line Highlighting

```mdx
```js {2-4}
function Example() {
  // Lines 2-4
  // will be
  // highlighted
  return null;
}
```

## Code References (numbered callouts)

```mdx
```js [[1, 4, "age"], [2, 4, "setAge"]]
// Creates numbered markers pointing to "age" and "setAge" on line 4
```

## Expected Errors (intentionally broken examples)

```mdx
```js {expectedErrors: {'react-compiler': [7]}}
// Line 7 shows as expected error
```

## Multi-File Example

```mdx
<Sandpack>

```js src/App.js
import Gallery from './Gallery.js';

export default function App() {
  return <Gallery />;
}
```

```js src/Gallery.js
export default function Gallery() {
  return <h1>Gallery</h1>;
}
```

```css
h1 { color: purple; }
```

</Sandpack>
```

## External Dependencies

```mdx
<Sandpack>

```js
import { useImmer } from 'use-immer';
// ...
```

```json package.json
{
  "dependencies": {
    "immer": "1.7.3",
    "use-immer": "0.5.1",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest"
  }
}
```

</Sandpack>
```

## Code Style in Sandpack (Required)

Sandpack examples are held to strict code style standards:

1. **Function declarations** for components (not arrows)
2. **`e`** for event parameters
3. **Sing