Sandpack

https://sandpack.codesandbox.io/docs
Admin
Sandpack is an in-browser live coding environment and component toolkit powered by CodeSandbox for...
Tokens:39,077
Snippets:400
Trust Score:10
Update:3 days ago
Show doc for...
Tokens:
Raw
### Quickstart with loadSandpackClient

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Use loadSandpackClient to mount a bundler and update the sandbox content. This helper abstracts common setup tasks for runtime environments.

```typescript
import { loadSandpackClient } from "@codesandbox/sandpack-client";
 
async function main() {
  // Iframe selector or element itself
  const iframe = document.getElementById("iframe");
  
  // Files, environment and dependencies
  const content: SandboxSetup = {
    files: { 
      // We infer dependencies and the entry point from package.json 
      "/package.json": { code: JSON.stringify({
        main: "index.js",
        dependencies: { uuid: "latest" },
      })},
      
      // Main file
      "/index.js": { code: `console.log(require('uuid'))` }
    },
    environment: "vanilla"
  };
  
  // Optional options
  const options: ClientOptions = {};
  
  // Properly load and mount the bundler
  const client = await loadSandpackClient(
    iframe, 
    content, 
    options
  );
  
  /**
   * When you make a change, you can just run `updateSandbox`. 
   * We'll automatically discover which files have changed
   * and hot reload them.
   */
  client.updateSandbox({
    files: {
      "/index.js": {
        code: `console.log('New Text!')`,
      },
    },
    entry: "/index.js",
    dependencies: {
      uuid: "latest",
    },
  });
}
```

--------------------------------

### Setup static server with PreviewController

Source: https://sandpack.codesandbox.io/docs/advanced-usage/static

Create a PreviewController with a base URL pointing to the hosted static server, provide a getFileContent function to serve file contents, initialize the preview to get a URL, and create an iframe with that URL.

```typescript
// Map of files
const files = new Map<string, string>(["index.html", "Hello world!"]);
 
// Setup a preview controller
const controller = new PreviewController({
  baseUrl: "https://preview.sandpack-static-server.codesandbox.io",
  // Function to get the file content for the server this can also be async
  getFileContent: (filepath) => {
    const content = files.get(filepath);
    if (!content) {
        throw new Error("File not found");
    }
    return content;
  },
});
 
// Initialize the preview
// This will start up a relay frame and return a url which you can use to show the preview
const previewUrl = await this.previewController.initPreview();
 
// Create a preview frame and set the src url to the returned preview url
const iframe = document.createElement("iframe");
iframe.setAttribute("src", previewUrl);
```

--------------------------------

### Install @monaco-editor/react

Source: https://sandpack.codesandbox.io/docs/guides/integrate-monaco-editor

Run this command to install the library that handles the Monaco editor setup in React.

```bash
yarn add @monaco-editor/react
```

--------------------------------

### Install Sandpack Client

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Install the package using npm.

```bash
npm i @codesandbox/sandpack-client
```

--------------------------------

### Fresh design example

Source: https://sandpack.codesandbox.io/docs/resources/migration-guide/v1

Example demonstrating the updated design system implementation.

```javascript
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
```

--------------------------------

### Install static-browser-server with npm

Source: https://sandpack.codesandbox.io/docs/advanced-usage/static

Install the static-browser-server package using npm. This is the first step to use the static template.

```bash
npm i static-browser-server
```

--------------------------------

### Install project dependencies

Source: https://sandpack.codesandbox.io/docs/resources/community

Install all necessary dependencies for the project using yarn.

```bash
yarn
```

--------------------------------

### Run Sandpack Docs

Source: https://sandpack.codesandbox.io/docs/resources/community

Commands to start the documentation server from the root or docs folder.

```bash
yarn dev:docs
```

```bash
yarn run serve
```

--------------------------------

### Static file usage example

Source: https://sandpack.codesandbox.io/docs/advanced-usage/serving-static-files

A complete example showing how to define a file in the /public folder and reference it within an application component.

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

export default () => (
<Sandpack
files={{
"/public/logo.svg": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
<title>React Logo</title>
<circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
<g stroke="#61dafb" stroke-width="1" fill="none">
<ellipse rx="11" ry="4.2"/>
<ellipse rx="11" ry="4.2" transform="rotate(60)"/>
<ellipse rx="11" ry="4.2" transform="rotate(120)"/>
</g>
</svg>
`,
"/App.js": `export default function App() {
return (
<>
<h1>Hello React</h1>
<img width="100" src="/public/logo.svg" />
</>
);
}
`,
}}
options={{
experimental_enableServiceWorker: true,
}}
template="react"
/>
);
```

--------------------------------

### Quickstart: Basic Sandpack component

Source: https://sandpack.codesandbox.io/docs/getting-started/custom-content

A minimal React component that renders the Sandpack editor and preview. Import Sandpack from the package and return the component.

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

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

--------------------------------

### Install tsup as a development dependency

Source: https://sandpack.codesandbox.io/docs/guides/local-dependencies

Install the tsup bundler to prepare your local library for use in Sandpack.

```bash
$ npm install --save-dev tsup
```

--------------------------------

### Build project dependencies

Source: https://sandpack.codesandbox.io/docs/resources/community

Build all dependencies before starting development mode.

```bash
yarn build
```

--------------------------------

### Install Sandpack with npm

Source: https://sandpack.codesandbox.io/docs/getting-started/custom-content

Install the @codesandbox/sandpack-react package using npm. This is the standard installation method for adding Sandpack to a project.

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

--------------------------------

### Initialize Sandpack with Template

Source: https://sandpack.codesandbox.io/docs

Use the template prop to quickly start a project with pre-configured files and dependencies.

```javascript
<Sandpack template="react">
```

--------------------------------

### Run Sandpack Landing page

Source: https://sandpack.codesandbox.io/docs/resources/community

Commands to start the Next.js landing page from the root or landing folder.

```bash
yarn dev:landing
```

```bash
yarn dev
```

--------------------------------

### Install Sandpack via pnpm

Source: https://sandpack.codesandbox.io/docs/getting-started

Install the Sandpack dependency using the pnpm package manager.

```bash
pnpm add @codesandbox/sandpack-react
```

--------------------------------

### Install Sandpack via yarn

Source: https://sandpack.codesandbox.io/docs/getting-started

Install the Sandpack dependency using the yarn package manager.

```bash
yarn add @codesandbox/sandpack-react
```

--------------------------------

### Run Sandpack React in development mode

Source: https://sandpack.codesandbox.io/docs/resources/community

Start the React development environment, which opens a Storybook playground.

```bash
yarn dev:react
```

--------------------------------

### React Markdown Preview Code

Source: https://sandpack.codesandbox.io/docs

The code content for the React Markdown example.

```javascript
import ReactMarkdown from 'react-markdown' 

export default function App() {
  return (
    <ReactMarkdown>
      # Hello, *world*!
    </ReactMarkdown>
  )
}
```

--------------------------------

### Custom Sandpack implementation with SandpackProvider

Source: https://sandpack.codesandbox.io/docs/api/react/interfaces/SandpackPreviewRef

A basic implementation of a custom Sandpack setup using the SandpackProvider, SandpackLayout, SandpackCodeEditor, and SandpackPreview components.

```javascript
import {
SandpackProvider,
SandpackLayout,
SandpackPreview,
SandpackCodeEditor
} from "@codesandbox/sandpack-react";
  

const CustomSandpack = () => (
  

<SandpackProvider template="vanilla" theme="auto">
<SandpackLayout>
<SandpackCodeEditor />
<SandpackPreview />
</SandpackLayout>
</SandpackProvider>
);
  

export default () => <CustomSandpack />
```

--------------------------------

### Basic SandpackCodeEditor configuration

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Example of implementing the SandpackCodeEditor component within a SandpackProvider and SandpackLayout, demonstrating common UI props like showTabs and showInlineErrors.

```javascript
import {
SandpackProvider,
SandpackLayout,
SandpackPreview,
SandpackCodeEditor,
} from "@codesandbox/sandpack-react";
  

export default () => (
<SandpackProvider template="react">
<SandpackLayout>
<SandpackCodeEditor
showTabs
showLineNumbers={false}
showInlineErrors
wrapContent
closableTabs
/>
<SandpackPreview />
</SandpackLayout>
</SandpackProvider>
);
```

--------------------------------

### Adding support for stream languages

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Example of adding a stream language mode by wrapping it in a LanguageSupport instance.

```javascript
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
import { shell } from "@codemirror/legacy-modes/mode/shell";
 
<SandpackProvider>
  <SandpackCodeEditor
    additionalLanguages={[
      {
        name: "shell",
        extensions: ["sh", "bat", "ps1"],
        language: new LanguageSupport(StreamLanguage.define(shell)),
      },
    ]}
  />
</SandpackProvider>;
```

--------------------------------

### Basic Sandpack component with React template

Source: https://sandpack.codesandbox.io/docs/quickstart

A minimal Sandpack component setup with a React template and light theme. The files object is empty, so the default template files are used.

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

const App = () => {
  const files = {}
  
  return (
    <Sandpack
      files={files} 
      theme="light" 
      template="react"
    />
  )  
}
```

--------------------------------

### useSandpackConsole: Get logs and reset

Source: https://sandpack.codesandbox.io/docs/advanced-usage/hooks

Use this hook to consume console logs from a sandpack client. It returns an object with logs and a reset function. The example shows destructuring both.

```typescript
const { logs, reset } = useSandpackConsole();
```

--------------------------------

### useSandpackClient: Listen to messages and set iframe height

Source: https://sandpack.codesandbox.io/docs/advanced-usage/hooks

Use this hook to register a new sandpack client and get its instance, listeners, and dispatch function. The example shows listening for resize messages and updating a computed auto height, then rendering an iframe with the ref. Note the eslint-disable comment for exhaustive-deps.

```typescript
const { iframe, listen } = useSandpackClient();
 
React.useEffect(() => {
  const unsubscribe = listen((message: SandpackMessage) => {
    if (message.type === "resize") {
      setComputedAutoHeight(message.height);
    }
  });
 
  return unsubscribe;
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
 
<iframe ref={ifram} />;
```

--------------------------------

### SandboxSetup Interface

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Defines the structure for setting up a sandbox, including files, dependencies, entry point, and template.

```APIDOC
## SandboxSetup Interface

### Description
Defines the structure for setting up a sandbox, including files, dependencies, entry point, and template.

### Properties
- **files** (object) - Required - Files, keys are paths. Each value is an object with a `code` string property.
- **dependencies** (object) - Optional - Dependencies; supports npm and GitHub dependencies. Keys are dependency names, values are version strings.
- **entry** (string) - Optional - Default file to evaluate.
- **template** (SandpackTemplate) - Optional - The sandbox template to use; this is inferred from the files and package.json if not specified.

### Example
```json
{
  "files": {
    "/index.js": {
      "code": "console.log('Hello')"
    }
  },
  "dependencies": {
    "react": "^18.0.0"
  },
  "entry": "/index.js",
  "template": "react"
}
```
```

--------------------------------

### Configure Project with customSetup

Source: https://sandpack.codesandbox.io/docs

Use the customSetup prop to define dependencies and the files prop to structure the project files.

```javascript
<Sandpack
  customSetup={{ 
    dependencies: { 
      "react-markdown": "latest" 
    }
  }}
  files={{
    "/App.js": `import ReactMarkdown from 'react-markdown' 

export default function App() {
  return (
    <ReactMarkdown>
      # Hello, *world*!
    </ReactMarkdown>
  )
}`
  }}
/>;
```

--------------------------------

### SandpackCodeEditor with CodeMirror Extensions

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Example of extending the code editor with CodeMirror extensions such as autocompletion.

```APIDOC
## SandpackCodeEditor with Extensions

### Description
Shows how to pass CodeMirror extensions and keymaps to the SandpackCodeEditor component to add features like autocompletion.

### Usage
```jsx
import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor
} from "@codesandbox/sandpack-react";
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";

export default () => (
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackCodeEditor
        extensions={[autocompletion()]}
        extensionsKeymap={[completionKeymap]}
      />
    </SandpackLayout>
  </SandpackProvider>
);
```

### Props
- **extensions** (Extension[]) - CodeMirror extensions for the editor state.
- **extensionsKeymap** (KeyBinding[]) - CodeMirror extension keymap.
```

--------------------------------

### Run tsup to generate the bundle

Source: https://sandpack.codesandbox.io/docs/guides/local-dependencies

Execute the tsup command in your library directory to create the bundled output.

```bash
$ tsup
```

--------------------------------

### Configure tsup.config.js

Source: https://sandpack.codesandbox.io/docs/guides/local-dependencies

Create a configuration file at the root of your library to define the entry point and output directory for the bundle.

```javascript
import { defineConfig } from "tsup";
 
export default defineConfig([
  {
    entry: ["./design-system/index.ts"], // your library path
    treeshake: true,
    minify: true,
    verbose: true,
    dts: true,
    external: ["react", "react-dom"],
    clean: true,
    outDir: "./design-system/build-sandpack", // build output
  },
]);
```

--------------------------------

### Defining a Custom Entry File

Source: https://sandpack.codesandbox.io/docs/getting-started/usage

Specify a custom entry file path using the customSetup object. Ensure all necessary files are included in the bundle process when changing the entry point.

```javascript
<Sandpack
  template="react"
  files={{
    "/App.js": `...`,
  }}
  customSetup={{
    entry: "/index.js",
  }}
/>
```

--------------------------------

### Get Sandpack CSS text

Source: https://sandpack.codesandbox.io/docs/guides/ssr

Basic usage of the getSandpackCssText function to retrieve the CSS string.

```javascript
import { getSandpackCssText } from "@codesandbox/sandpack-react";
 
const cssTextOutput = getSandpackCssText();
```

--------------------------------

### SandpackCodeEditor Basic Usage

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Example of using the SandpackCodeEditor component with various props to customize the editor behavior.

```APIDOC
## SandpackCodeEditor Component

### Description
Renders a code editor component based on CodeMirror. It accepts various props to control tabs, line numbers, inline errors, wrapping, and more.

### Usage
```jsx
import {
  SandpackProvider,
  SandpackLayout,
  SandpackPreview,
  SandpackCodeEditor,
} from "@codesandbox/sandpack-react";

export default () => (
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackCodeEditor
        showTabs
        showLineNumbers={false}
        showInlineErrors
        wrapContent
        closableTabs
      />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);
```

### Props
- **showTabs** (boolean) - Default: false - Whether to show tabs for files.
- **showLineNumbers** (boolean) - Default: false - Whether to show line numbers.
- **showInlineErrors** (boolean) - Default: false - Whether to show inline errors.
- **showRunButton** (boolean) - Default: false - Whether to show a run button.
- **wrapContent** (boolean) - Default: false - Whether to wrap content.
- **closableTabs** (boolean) - Default: false - Whether tabs are closable.
- **initMode** ("immediate" | "lazy" | "user-visible") - Default: "lazy" - Controls initialization timing for the editor and preview.
- **extensions** (Extension[]) - Default: undefined - CodeMirror extensions for the editor state.
- **extensionsKeymap** (KeyBinding[]) - Default: undefined - CodeMirror extension keymap.
- **id** (string) - Default: undefined - Override the generated id.
- **readOnly** (boolean) - Default: false - Disables editing.
- **showReadOnly** (boolean) - Default: true - Controls visibility of the read-only label.
- **additionalLanguages** (CustomLanguage[]) - Default: undefined - Add custom language modes.
```

--------------------------------

### Add NPM dependencies

Source: https://sandpack.codesandbox.io/docs/getting-started/usage

Use the customSetup prop to include additional NPM packages in your sandbox environment.

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

export default function App() {
return (
<Sandpack
template="react"
customSetup={{
dependencies: {
"react-markdown": "latest"
}
}}
files={{
"/App.js": `import ReactMarkdown from 'react-markdown' 

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

--------------------------------

### Configure Sandpack with a template

Source: https://sandpack.codesandbox.io/docs/getting-started/usage

Use the template property to initialize Sandpack with a predefined project structure. If no template is provided, it defaults to vanilla.

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

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

--------------------------------

### Next.js (app dir) Sandpack component usage

Source: https://sandpack.codesandbox.io/docs/guides/ssr

Example of using the Sandpack component within a Next.js page.

```tsx
import { Sandpack } from "@codesandbox/sandpack-react";
 
export default function Home() {
  return (
    <div>
      <Sandpack theme="dark" />
    </div>
  );
}
```

--------------------------------

### Standard SandpackLayout usage

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Demonstrates the default two-column layout with the code editor on the left and the preview on the right.

```javascript
import {
SandpackProvider,
SandpackLayout,
SandpackCodeEditor,
SandpackPreview,
} from "@codesandbox/sandpack-react";

export default () => (
<SandpackProvider template="react">
<SandpackLayout>
<SandpackCodeEditor />
<SandpackPreview />
</SandpackLayout>
</SandpackProvider>
);
```

--------------------------------

### SandpackCodeEditor Additional Languages

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Examples of adding custom language support to the code editor using additionalLanguages prop.

```APIDOC
## SandpackCodeEditor Additional Languages

### Description
Demonstrates how to add custom language modes to the code editor by supplying a CodeMirror language and file extensions.

### Usage with SandpackProvider
```jsx
import { python } from "@codemirror/lang-python";

<SandpackProvider>
  <SandpackCodeEditor
    additionalLanguages={[
      {
        name: "python",
        extensions: ["py"],
        language: python(),
      },
    ]}
  />
</SandpackProvider>
```

### Usage with Sandpack preset
```jsx
import { python } from "@codemirror/lang-python";

<Sandpack
  options={{
    codeEditor: {
      additionalLanguages: [
        {
          name: "python",
          extensions: ["py"],
          language: python(),
        },
      ]
    },
  }}
  template="react"
/>
```

### Usage with stream language mode
```jsx
import { LanguageSupport, StreamLanguage } from "@codemirror/language";
import { shell } from "@codemirror/legacy-modes/mode/shell";

<SandpackProvider>
  <SandpackCodeEditor
    additionalLanguages={[
      {
        name: "shell",
        extensions: ["sh", "bat", "ps1"],
        language: new LanguageSupport(StreamLanguage.define(shell)),
      },
    ]}
  />
</SandpackProvider>
```

### Props
- **additionalLanguages** (CustomLanguage[]) - Array of objects with name, extensions, and language (LanguageSupport instance).
```

--------------------------------

### Next.js pages directory _document.tsx integration

Source: https://sandpack.codesandbox.io/docs/guides/ssr

Injecting Sandpack CSS into the head of the document in a Next.js pages directory setup.

```tsx
// pages/_document.tsx
 
import { getSandpackCssText } from "@codesandbox/sandpack-react";
import { Html, Head, Main, NextScript } from "next/document";
 
export default function Document() {
  return (
    <Html>
      <Head>
        <style
          dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
          id="sandpack"
          key="sandpack-css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

--------------------------------

### client.getCodeSandboxURL

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Creates a sandbox from the current files and returns an object containing the sandbox id, editor URL, and embed URL.

```APIDOC
## client.getCodeSandboxURL

### Description
Creates a sandbox from the current files and returns an object containing the sandbox id, editor URL, and embed URL.

### Method
Method

### Signature
client.getCodeSandboxURL(): { sandboxId: string, editorUrl: string, embedUrl: string }

### Parameters
None

### Returns
Object with the following fields:
- **sandboxId** (string) - The id of the created sandbox.
- **editorUrl** (string) - The URL of the sandbox editor.
- **embedUrl** (string) - The URL that can be used to embed the sandbox in an iframe.

### Example Return
{
  "sandboxId": "sandbox_id",
  "editorUrl": "https://codesandbox.io/s/sandbox_id",
  "embedUrl": "https://codesandbox.io/embed/sandbox_id"
}
```

--------------------------------

### Import bundled file as raw text

Source: https://sandpack.codesandbox.io/docs/guides/local-dependencies

Import the generated bundle as a raw string to be passed into the Sandpack configuration.

```javascript
import designSystemRaw from "../design-system/build-sandpack?raw";
```

--------------------------------

### client.updateSandbox

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Sends new content like files and dependencies to the preview. It will automatically hot update the preview with the new files and options.

```APIDOC
## client.updateSandbox

### Description
Sends new content like files and dependencies to the preview. It will automatically hot update the preview with the new files and options.

### Method
Method

### Signature
client.updateSandbox(content: SandboxSetup): void

### Parameters
- **content** (SandboxSetup) - Required - An object containing updates to the files, entry point, and/or dependencies for the sandbox.

### Returns
void
```

--------------------------------

### Load local dependencies in Sandpack

Source: https://sandpack.codesandbox.io/docs/resources/faq

Demonstrates how to simulate local dependencies by defining them within the files object of the Sandpack component.

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

export default () => {
return (
<Sandpack
files={{
"/App.js": `import { hello } from "fake-library";
  

export default () => hello("World");
`,
"/node_modules/fake-library/package.json": JSON.stringify({
name: "fake-library",
main: "./index.js",
}),
"/node_modules/fake-library/index.js": `module.exports = {
hello: (name) => "Hello " + name
}`,
}}
template="react"
/>
)
}
```

--------------------------------

### Sandpack component with teamId and customSetup for private packages

Source: https://sandpack.codesandbox.io/docs/guides/private-packages

Configure Sandpack with a team ID and custom setup to consume private packages from a private npm registry. The teamId is an identifier for your sandboxes and private npm registry, and the customSetup specifies dependencies. The files prop includes an App.js that imports and uses the private package.

```jsx
<Sandpack
  template="react"
 
  // This is an identifier for your sandboxes and private npm registry
  teamId="YOUR_TEAM_ID"
 
  // Set the dependencies; for example, this is a private package from GitHub packages
  customSetup={{
    dependencies: { "@codesandbox/test-package": "latest" },
  }}
 
  // Consume dependencies as usual
  files={{
    "App.js": `import { Button } from "@codesandbox/test-package";
 
export default function App() {
  return <Button>Hello World</Button>
}`,
  }}
/>
```

--------------------------------

### Build Custom Sandpack UI

Source: https://sandpack.codesandbox.io/docs

Compose individual components and hooks to create a custom Sandpack interface.

```javascript
import {
  SandpackProvider,
  SandpackThemeProvider,
  SandpackCodeEditor,
  SandpackTranspiledCode,
} from "@codesandbox/sandpack-react";

export default () => (
  <SandpackProvider template="vanilla">
    <SandpackThemeProvider>
      <SandpackCodeEditor showTabs={false} />
      <SandpackTranspiledCode showTabs={false} />
    </SandpackThemeProvider>
  </SandpackProvider>
);

// ✨ BTW, all examples are built in Sandpack
```

--------------------------------

### Set Node.js version with nvm

Source: https://sandpack.codesandbox.io/docs/resources/community

Use nvm to switch to the required Node.js version 14.

```bash
nvm use 14
```

--------------------------------

### Apply a predefined theme from @codesandbox/sandpack-themes

Source: https://sandpack.codesandbox.io/docs/getting-started/themes

Import a theme from the @codesandbox/sandpack-themes package and pass it to the theme prop of the Sandpack component.

```javascript
import { amethyst } from "@codesandbox/sandpack-themes";
    
<Sandpack theme={amethyst} />;
```

--------------------------------

### Adding support for additional languages

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Shows how to register a custom language, such as Python, by providing a name, file extensions, and the corresponding CodeMirror language instance.

```javascript
import { python } from "@codemirror/lang-python";
 
<SandpackProvider>
  <SandpackCodeEditor
    additionalLanguages={[
      {
        name: "python",
        extensions: ["py"],
        language: python(),
      },
    ]}
  />
</SandpackProvider>
 
<Sandpack
  options={{
    codeEditor: {
      additionalLanguages: [
        {
          name: "python",
          extensions: ["py"],
          language: python(),
        },
      ]
    },
  }}
  template="react"
```

--------------------------------

### Import Sandpack Component

Source: https://sandpack.codesandbox.io/docs

Import the Sandpack component from the library.

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

--------------------------------

### useSandpackClient

Source: https://sandpack.codesandbox.io/docs/advanced-usage/hooks

Registers a new sandpack client and returns its instance, listeners, and dispatch function. Recommended for custom components that need direct client interaction.

```APIDOC
## useSandpackClient

### Description
Registers a new sandpack client and returns its instance, listeners, and dispatch function. Use this when creating a custom component to interact directly with the client. For other cases, use useSandpack instead.

### Usage
```
const { iframe, listen } = useSandpackClient();

React.useEffect(() => {
  const unsubscribe = listen((message: SandpackMessage) => {
    if (message.type === "resize") {
      setComputedAutoHeight(message.height);
    }
  });

  return unsubscribe;
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

<iframe ref={ifram} />;
```

### Returns
- **iframe** (Ref) - Reference to the iframe element.
- **listen** (Function) - Attaches a listener to sandpack messages.
- **dispatch** (Function) - Dispatches actions to the client.
```

--------------------------------

### Apply Sandpack Theme

Source: https://sandpack.codesandbox.io/docs

Use the theme prop to apply a premade theme to the Sandpack instance.

```javascript
<Sandpack theme="dark">
```

--------------------------------

### Customize UI with options

Source: https://sandpack.codesandbox.io/docs

Use the options prop to toggle the visibility of built-in UI components.

```javascript
<Sandpack 
  options={{
    showNavigator: true,
    showLineNumbers: true,
    showTabs: true,
    closableTabs: true,
  }} 
/>
```

--------------------------------

### ClientOptions Interface

Source: https://sandpack.codesandbox.io/docs/advanced-usage/client

Configuration options for the Sandpack client, including bundler URL, iframe dimensions, and UI flags.

```APIDOC
## ClientOptions Interface

### Description
Configuration options for the Sandpack client, including bundler URL, iframe dimensions, and UI flags.

### Properties
- **externalResources** (string[]) - Optional - Paths to external resources.
- **bundlerURL** (string) - Optional - Location of the bundler. Defaults to `${version}-sandpack.codesandbox.io`.
- **width** (string) - Optional - Width of the iframe.
- **height** (string) - Optional - Height of the iframe.
- **skipEval** (boolean) - Optional - If the bundler should skip the third step, which is evaluation. Useful if you only want to see transpiled results.
- **showOpenInCodeSandbox** (boolean) - Optional - Boolean flag to trigger the 'Open in CodeSandbox' UI element in the bundler.
- **showErrorScreen** (boolean) - Optional - Boolean flag to trigger the error screen UI element in the bundler.
- **showLoadingScreen** (boolean) - Optional - Boolean flag to trigger the loading screen UI element in the bundler.

### Example
```json
{
  "externalResources": ["https://cdn.example.com/lib.js"],
  "bundlerURL": "https://1.0.0-sandpack.codesandbox.io",
  "width": "100%",
  "height": "500px",
  "skipEval": false,
  "showOpenInCodeSandbox": true,
  "showErrorScreen": true,
  "showLoadingScreen": true
}
```
```

--------------------------------

### Import themes from @codesandbox/sandpack-themes

Source: https://sandpack.codesandbox.io/docs/resources/migration-guide/v1

Themes are now detached from the main package. Import them from @codesandbox/sandpack-themes instead.

```javascript
import { Sandpack } from "@codesandbox/sandpack-react";
import { githubLight, sandpackDark } from "@codesandbox/sandpack-themes";
  

export default function App() {
return (
<Sandpack
theme={githubLight}
/>
);
}
```

--------------------------------

### Sandpack with showConsole option

Source: https://sandpack.codesandbox.io/docs/advanced-usage/components

Shows a console panel right after the SandpackPreview by setting the showConsole option to true.

```APIDOC
## Sandpack with showConsole option

### Description
Shows a console panel right after the SandpackPreview by setting the showConsole option to true.

### Usage
Use the Sandpack component with the options prop set to include showConsole: true.

### Example
```jsx
import { Sandpack } from "@codesandbox/sandpack-react";

export default () => (
  <Sandpack
    options={{
      showConsole: true,
      showConsoleButton: true,
    }}
  />
);
```

```

--------------------------------

### Compose custom components in SandpackProvider

Source: https://sandpack.codesandbox.io/docs/advanced-usage/hooks

Demonstrates how to combine custom components like CustomAceEditor and CustomRefreshButton within a SandpackProvider.

```javascript
export const CustomSandpack = () => (
  <SandpackProvider template="react">
    <CustomAceEditor />
    <SandpackPreview showRefreshButton={false} showOpenInCodeSandbox={false} />
    <CustomRefreshButton />
    <CustomOpenInCSB />
  </SandpackProvider>
);
```

--------------------------------

### Create a SimpleCodeViewer component with useSandpack

Source: https://sandpack.codesandbox.io/docs/advanced-usage/hooks

This component accesses the active file's code from the Sandpack context and renders it in a pre tag. It must be used within a SandpackProvider.

```javascript
import { useSandpack } from "@codesandbox/sandpack-react";
 
const SimpleCodeViewer = () => {
  const { sandpack } = useSandpack();
  const { files, activeFile } = sandpack;
 
  const code = files[activeFile].code;
  return <pre>{code}</pre>;
};
```
Tokens:
Raw