Install

Install the Sandpack dependency on your project.

npm i @codesandbox/sandpack-react

All the components and the bundler are packed inside the Sandpack component, which is a named export of the package. Besides that, the package contains multiple components, utilities and typings.

Quickstart

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

Editable example

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

export default function App() {
  return <Sandpack />
}

Preview

CDN

To use Sandpack with CDN, simply include the Sandpack tag in your HTML file and specify the CDN imports inluding Sandpack and its dependencies.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
 
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/[email protected]",
          "react-dom": "https://esm.sh/[email protected]",
          "react-dom/": "https://esm.sh/[email protected]/",
          "@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/[email protected]"
        }
      }
    </script>
 
    <script type="module">
      import React from "react";
      import { createRoot } from "react-dom/client";
      import { Sandpack } from "@codesandbox/sandpack-react";
 
      const root = createRoot(document.getElementById("root"));
      const sandpackComponent = React.createElement(
        Sandpack,
        { template: "react" },
        null
      );
      root.render(sandpackComponent);
    </script>
  </head>
 
  <body>
    <div id="root"></div>
  </body>
</html>

Next steps

Templates & files

Learn how to add files to your projects and start coding in record time.

Themes

Design and customize your own theme and find other Sandpack presets.

Introduction Usage