Sandpack

A component toolkit for creating live-running code editing experiences, usi...

README

Component toolkit for live running code editing experiences

Sandpack


Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox.

Edit in CodeSandbox

Sandpack Client


This is a small foundation package that sits on top of the bundler. It is
framework agnostic and facilitates the handshake between your context and the bundler iframe.


Sandpack React


React components that give you the power of editable sandboxes that run in the browser.

  1. ``` js
  2. import { Sandpack } from "@codesandbox/sandpack-react";

  3. <Sandpack template="react" />;
  4. ```


Sandpack Themes


A list of themes to customize your Sandpack components.

  1. ``` js
  2. import { githubLight } from "@codesandbox/sandpack-themes";

  3. <Sandpack theme={githubLight} />;
  4. ```


Documentation


You can find the Sandpack documentation on https://sandpack.codesandbox.io/docs/.

Start with the Sandpack introduction page for a quick overview and you can kick the tyres as well.

The documentation is divided into following sections: