Skip to main content

Introduction

React components that give you the power of editable sandboxes that run in the browser. Powered by Sandpack, the online bundler used by CodeSandbox.

Sandpack is an open ecosystem of components and utilities that allow you to compile and run modern frameworks in the browser. You can either use one of our predefined components for embedding the CodeSandbox experience into your projects, or you can build your own version of sandpack, on top of our standard components and utilities. As you walk through this guide, you will get deeper into our ecosystem.

Getting Started

Install

Learn how to add Sandpack to your projects and start coding in minutes.

Access →

Advanced Usage

An overview of some Sandpack capabilities and how to extend its API.

Access →

API reference

A full listing and description of the public API exported by the libraries.

Access →

Sandpack Theme Builder

Design and customize your own theme, among other Sandpack presets.

Try it now ↗

Live coding environment in minutes

export default function App() {
  return (
    <div className="App">
      <h1>Hello Sandpack ✨</h1>
      <p>Start editing to see some magic happen!</p>
    </div>
  );
}