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 →

Components

A full listing and description of all Sandpack capabilities, such as console, tests and preview components

Access →

Advanced Usage

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

Access →

Sandpack Theme Builder

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

Try it now ↗

Live coding environment in minutes

console.log("Sandpack 📦")

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