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>
  );
}
Open on CodeSandbox

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 CodeSandbox

  • 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 CodeSandbox

  • Easily configure
    the project to run

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

    Code snippet

    import "./styles.css";

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

    Sandpack preview

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

  • 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

    import "./styles.css";

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

    Sandpack preview

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

  • 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 CodeSandbox

  • 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

    export default function App() {
  return <h1>Hello world</h1>
}

    Sandpack preview

    Open on CodeSandbox

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.