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

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

import "./styles.css";

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

Sandpack preview

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

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

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

Sandpack preview

Open Sandbox

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.

Sandpack

A live coding
environment
in record time.

Create interactive docs

Build low-code tools

Keep coding with a click

Live coding in
the browser.

Get started in a few lines

Easily configure
the project to run

Customize the UI with ease

Apply a theme, or
create your own

Build your own Sandpack UI

Building blocks
of the Sandpack
ecosystem.

Providers & Custom Hooks

Sandpack Components

Sandpack Client

Nodebox

Showcase

React docs

Sound Demo

Multiple Previews

Interactive blog post by Varun Vachhar

Who's using Sandpack.

Get started
with Sandpack.

Get involved in
our community.

Sandpack

Create interactive docs

Build low-code tools

Keep coding with a click

Get started in a few lines

Easily configure the project to run

Customize the UI with ease

Apply a theme, or create your own

Build your own Sandpack UI

Providers & Custom Hooks

Sandpack Components

Sandpack Client

Nodebox

React docs

Sound Demo

Multiple Previews

Interactive blog post by Varun Vachhar

Get started with Sandpack.

Get involved inour community.

Easily configure
the project to run

Apply a theme, or
create your own

Get started
with Sandpack.

Get involved in
our community.