Skip to main content


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

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>

Open on CodeSandbox