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

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

Congrats!

You have integrated the first Sandpack component into your project