Sandpack is the open-source in-browser bundler that powers CodeSandbox, packaged as a composable React component library for embedding live code playgrounds in documentation, tutorials, and educational platforms. It provides a complete code editing environment including a CodeMirror-based editor, an in-browser bundler with npm dependency resolution, and a live preview pane that reflects changes in real time with hot module reloading.
The toolkit supports a wide range of framework templates out of the box including React, Vue, Svelte, Angular, and vanilla JavaScript projects. Sandpack handles npm dependency installation entirely in the browser through its bundler, supports TypeScript compilation, and includes Nodebox for server-side code execution in browser environments. The component API is fully customizable, allowing developers to style themes, control layout, and hook into the bundler lifecycle.
Sandpack has earned recognition as critical documentation infrastructure after the React team adopted it for all interactive code examples in the official React documentation. With over 6,000 GitHub stars, the project provides both high-level React components for rapid integration and a low-level sandpack-client library for framework-agnostic usage. It includes features like file explorer panels, console output, and test runner integration that make it suitable for building full-featured online coding environments.
