Sandpack

Sandpack is a React component toolkit for embedding live-running code editing and preview experiences in web applications. It runs JavaScript and Node.js applications in the browser and can be used for interactive documentation, coding environments, low-code tools, generated website previews, and embedded playgrounds.

Sandpack provides templates containing project files and dependencies, custom setup for changing dependencies or file structure, configurable built-in components, themes, and composable components and hooks for custom interfaces. It uses CodeMirror for editor functionality, supports npm dependencies, hot module reloading, error overlays, caching, and Node.js execution through its Nodebox runtime. The Sandpack Client package exposes a framework-agnostic bundler protocol, and the toolkit supports frameworks including Next.js, Remix, Vite, and Astro.