Skip to main content

Install

Sandpack is ready to be used in your React project. The package is published on npm and you can install it with:

npm i @codesandbox/sandpack-react

or

yarn add @codesandbox/sandpack-react

The package contains multiple components, utilities and typings for diving into the sandpack ecosystem.

All the components and the bundler are packed inside the Sandpack component, which is a named export of the package. Additionally, there is a small stylesheet you need to import globally into your project.

import { Sandpack } from "@codesandbox/sandpack-react";

/* JSX Usage */
<Sandpack template="react" />;

This should give you a nice code editor with some file tabs and a preview that runs in the browser.

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return (
    <Sandpack 
      // You can change these examples!
      // Try uncommenting any of these lines
      // theme="dark"
      // template="react"
    />
  );
}
Open on CodeSandbox
Congrats!

You have integrated the first Sandpack component into your project