Sandpack Component

Inline sandboxes for interactive code examples

`Sandpack`

Inline sandboxes.

Note

See Sandpack official documentation for full usage.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': 'latest',
      '@react-three/drei': 'latest'
    },
  }}
  files={{
    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
    '/App.tsx': `import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}`,
  }}
/>

Result

import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
return (
  <Canvas camera={{position: [0,-13,0]}}>
    <Cloud speed={.4} growth={6} />
    <ambientLight intensity={Math.PI} />
    <CameraControls />
  </Canvas>
)
}

Open Sandbox

Tip

Sandpack UI SSR-rendering¹ is also supported (out of the box).

`Sandpack[folder]`

Instead of files, a folder prop allow you to pass a folder containing all the files:

<Sandpack
  template="react-ts"
  folder="authoring-sandpack-cloud"
/>

folder path is relative to the .mdx file:

|-- authoring
|   |-- sandpack.mdx             <= relative to this article
|   `-- authoring-sandpack-cloud  <= the folder

Tip

It will simply:

build the files prop for you (including all .{js|ts|jsx|tsx|css} it finds)
build customSetup.dependencies from package.json if it exists

Result

import { CameraControls, Cloud } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas camera={{ position: [0, -13, 0] }}>
      <Cloud speed={0.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

Open Sandbox

It is also possible to pass some individual file format configuration:

<Sandpack
  template="react-ts"
  folder="authoring-sandpack-cloud"
  files={{
    '/App.tsx': {
      readOnly: true,
      active: true,
    },
    '/styles.css': {
      hidden: true
    }
  }}
/>

Result

import { CameraControls, Cloud } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas camera={{ position: [0, -13, 0] }}>
      <Cloud speed={0.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

Read-only

Open Sandbox

`Sandpack[fileExplorer]`

<Sandpack
  template="react-ts"
  folder="authoring-sandpack-cloud"
  fileExplorer
/>

Result

import { CameraControls, Cloud } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas camera={{ position: [0, -13, 0] }}>
      <Cloud speed={0.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

Open Sandbox

Tip

Conveniently, enabling fileExplorer will by default [codeEditor={showTabs: false}]. You can override it with [codeEditor] options

You can also pass any fileExplorer={options: ComponentProps<SandpackFileExplorer>}.

`Sandpack[codeEditor]`

You can pass any codeEditor={options: ComponentProps<SandpackCodeEditor>}.

`Sandpack[codeViewer]`

It will render the SandpackCodeViewer instead of the default SandpackCodeEditor.

<Sandpack
  template="react-ts"
  folder="authoring-sandpack-cloud"
  codeViewer
/>

Result

import { CameraControls, Cloud } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas camera={{ position: [0, -13, 0] }}>
      <Cloud speed={0.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

Open Sandbox

You can also pass any codeViewer={options: ComponentProps<SandpackCodeViewer>}.

`Sandpack[codeViewer][filesDecorators]`

You can define per-file decorators through filesDecorators prop:

<Sandpack
  template="react-ts"
  folder="authoring-sandpack-cloud"
  codeViewer={{
    filesDecorators: {
      '/App.tsx': [
        { className: "highlight", line: 1 },
        { className: "highlight", line: 7 },
        {
          className: "widget",
          elementAttributes: { "data-id": "1" },
          line: 7,
          startColumn: 13,
          endColumn: 24,
        },
        {
          className: "widget",
          elementAttributes: { "data-id": "2" },
          line: 7,
          startColumn: 25,
          endColumn: 35,
        },
        
      ],
      '/styles.css': [
        { className: "highlight", line: 4 },
      ]
    }
  }}
/>

Result

import { CameraControls, Cloud } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas camera={{ position: [0, -13, 0] }}>
      <Cloud speed={0.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}