Copied to clipboard
import { globalStyles } from './stitches.config';
import {
Section,
SandpackLogo,
SectionHeader,
SandpackTitle,
Link
} from './components';

export default function App() {
globalStyles();

return (
<Section>
<SectionHeader>
<Link href="https://sandpack.codesandbox.io/docs">
Docs
</Link>
<Link href="https://github.com/codesandbox/sandpack">
GitHub
</Link>
</SectionHeader>

<SandpackLogo />
<SandpackTitle />
</Section>
);
}

Run any JavaScript and Node.js app
in any browser,
powered by CodeSandbox.

Sandpack

A live coding
environment
in record time.

  • Create interactive docs

    Easily create a live coding environment in your Docs. Sandpack runs CodeMirror under the hood, giving you all the basic capabilities of a code editor and syntax highlight. But you can use your own editor too!

  • Build low-code tools

    With built-in npm dependency support, hot module reloading, error overlaying, caching and Node.js support, Sandpack can preview configuration updates, test product outputs, inspect script integration, and more.

  • Keep coding with a click

    With Sandpack, you're always one click away from opening your code snippet in CodeSandbox. This way, you can easily share bug reports or examples behind a unique URL.

Live coding in
the browser.

import { Sandpack } from "@codesandbox/sandpack-react"
export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

  • Get started in a few lines

    Set the template prop to get started with Sandpack in a few lines of code. Each template contains all the files and dependencies needed to start a project right away.

    export default function App() {
  return <h1>Hello world</h1>
}
    Open on CodeSandboxOpen Sandbox

  • Easily configure
    the project to run

    Use the customSetup prop to add dependencies or change the file structure.

    Code snippet

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

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

    Sandpack preview

    import ReactMarkdown from 'react-markdown' 

export default function App() {
  return (
    <ReactMarkdown>
      # Hello, *world*!
    </ReactMarkdown>
  )
}
    Open on CodeSandboxOpen Sandbox

  • Customize the UI with ease

    Tweak the UI to your liking using the options prop. Quickly toggle the appearance of built-in components.

    Code snippet

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

    Sandpack preview

    export default function App() {
  return <h1>Hello world</h1>
}
    Open on CodeSandboxOpen Sandbox

  • Apply a theme, or
    create your own

    Style Sandpack however you'd like! Use a premade theme or apply your own.

    export default function App() {
  return <h1>Hello world</h1>
}
    Open on CodeSandboxOpen Sandbox

  • Build your own Sandpack UI

    To fully customize the experience, you can build the UI yourself. The library exports a set of composable components and hooks that allow you to tailor the editing experience to your own needs.

    Code snippet

    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

    Sandpack preview

Building blocks
of the Sandpack
ecosystem.

  • Providers & Custom Hooks

    SandpackProvider is available to manage the state and actions and ThemeProvider handles the theme and style. A set of hooks gives you access to the state and offers an API for integrating custom components into Sandpack.

  • Sandpack Components

    The <Sandpack /> component is made up of smaller parts that you can import separately to combine with your custom components.

  • Sandpack Client

    The bundler is wrapped by a small package called sandpack-client, which is framework agnostic and allowing you to tap into the bundler protocol.

  • Nodebox

    Sandpack brings Nodebox, its own Node.js runtime that allows you to run server-side code in any browser. Built-in support for Next.js, Remix, Vite, Astro and more.

Showcase

Who's using Sandpack.

  • CodeAmigo
  • React
  • CodeHike
  • GitLab
  • Amplify
  • Storybook

Get started
with Sandpack.

Get involved in
our community.