Sandpack

Component toolkit for embedding live-running code editors in any web page. Executes JavaScript and Node.js applications directly in the browser, including server-side code via an embedded Node.js runtime, so docs, tutorials, and playgrounds can run real projects without external servers or iframes.

Trusted by React, GitLab, Amplify UI, Storybook, and CodeHike for interactive documentation and learning experiences. Stands out by pairing a full bundling pipeline, including npm dependencies and hot module reloading, with a composable React API. Built on CodeMirror for editing and integrates one-click sharing to CodeSandbox for reproducible bug reports and examples.

Key capabilities:

• Runs JavaScript and Node.js in the browser with built-in npm dependency resolution and hot reload
• Predefined templates for React, Vue, Vite, Next.js, Remix, Astro, and vanilla projects
• Composable components and hooks so you can build custom editor UIs or use the default layout
• Framework-agnostic sandpack-client for direct access to the bundler protocol
• Error overlays, theme support, and one-click export to CodeSandbox for sharing

Use cases include interactive documentation where readers can edit examples inline, low-code or config tools that preview changes live, coding tutorials with runnable snippets, and playgrounds for component libraries. Developers add it to docs sites, blogs, and learning platforms to avoid maintaining separate sandbox environments.