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

Sandpack

Create interactive docs

Build low-code tools

Keep coding with a click

Get started in a few lines