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>