• Introduction

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>
  );
}

Sandpack is a component toolkit for creating live-running code editing experiences, powered by the online bundler used on CodeSandbox.

It provides 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