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>
  );
}

A component toolkit for creating
live-running code editing experiences,
using the power of CodeSandbox.

Sandpack

A live coding
environment
in minutes.

  • Full editor experience

    Sandpack uses CodeMirror under the hood, giving you all the basic capabilities of a code editor and syntax highlight. However, if you want to use your own editor framework, you can add that as a component too!

  • Advanced preview

    Sandpack embeds the browser bundler that powers CodeSandbox and takes advantage of features like npm dependency support, hot module reloading, error overlaying, and caching.

  • Leverage CodeSandbox

    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>
}

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

  • 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 Vanilla!</h1>
<div>
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel 
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
`;

    Sandpack preview

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

  • 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 Vanilla!</h1>
<div>
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel 
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
`;

    Sandpack preview

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

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

  • 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

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.

Showcase

Who's using Sandpack.

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

Get started
with Sandpack.

Get involved in
our community.