/sandpack

An ecosystem of components and utilities built around the browser bundler that powers https://codesandbox.io

Primary LanguageTypeScriptGNU General Public License v2.0GPL-2.0

Sandpack Beta

Demo of a React component that edits the code while the bundler executes the changes

What is this?

This repo contains different packages that form the sandpack ecosystem.

Sandpack is the browser bundler which powers CodeSandbox. The packages are built on top of the bundler, offering abstractions that everyone can use to integrate the bundler in their own projects. This project is currently in a beta phase. Looking forward to seeing what the community can build with it. Your feedback is more than welcome, please open an issue if you have trouble with the packages.

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

A set of React components and hooks that give you all the flexibility of building the right sandpack integration for your project. If you are working with React, you should start with this package as it is built on top of sandpack-client for all React use cases.

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

<Sandpack template="react" />;

The package readme contains a lot of examples of how to use the various presets, components and hooks that are exported by the library.