Sandpack

Sandpack is a browser-based toolkit for building live code editing experiences. It combines a custom Node.js runtime that executes JavaScript and npm dependencies entirely client-side with composable React components for assembling code editor interfaces, all within an iframe-sandboxed execution environment for security.

The toolkit provides a hot-reload development workflow where file and dependency updates are streamed to the running preview and trigger automatic recompilation without a full page refresh. It includes a theme-override styling system for customizing the editor and preview appearance, along with predefined theme selection and the ability to import community themes from an external package.

Sandpack supports embedding live code editors and interactive playgrounds into any web page, with bidirectional event-driven communication between the editor and bundler. It also offers shareable sandbox URL generation and one-click opening of snippets in the full CodeSandbox editor for collaboration or debugging.

Features

NPM-Enabled Sandboxes - Provides an in-browser sandbox that executes JavaScript and Node.js code with full npm dependency resolution.

Node.js Execution Environments - Executes JavaScript and npm dependencies entirely in the browser using a custom Node.js runtime without a remote server.

Custom Code Editor Interface Assemblers - Assemble a tailored code editing experience by combining individual Sandpack components and utilities.

Sandbox Hot Reloaders - Pushes file and dependency updates to the running preview and triggers automatic recompilation without full page reload.

Sandbox Hot Reloading - Pushes new files, dependencies, and entry points to a running preview and sees changes reflected automatically without a full reload.

Live - Ships an embeddable code editor that compiles and runs JavaScript and Node.js applications in-browser.

Custom Node.js Runtimes - Provides a custom Node.js runtime that executes JavaScript and npm dependencies entirely client-side.

Bundler Loaders - Provides a client API to mount a bundler inside a given iframe for code execution.

Iframe Sandboxing - Executes user code inside an isolated iframe to prevent interference with the host page.

Embeddable Playgrounds - Provides embeddable components that combine a live code editor with a real-time preview for any web page.

Code Editor Components - Assembles a tailored code editing interface by combining components, applying themes, and adjusting layout.

Composable Editor Interfaces - Ships composable React components for assembling custom code editing interfaces with theming support.

Sandbox - Pushes new files, dependencies, and entry points to the preview and hot-reloads the changes automatically.

NPM-Enabled Live Editors - Provides an embeddable component toolkit for creating live-running code editing experiences with npm support.

Component-Based Assemblies - Ships composable React components for assembling custom code editing interfaces with configurable elements.

Bidirectional Event Channels - Manages bidirectional message passing between the editor and bundler through scoped events and callbacks.

Editor Appearance Customization - Adjusts the appearance and layout of the code editor and preview panel through themes, component composition, and configuration.

Editor Themes - Applies custom themes to the code editor and preview components to match a brand or user preference.

Theme Overriding Systems - Applies visual themes to editor and preview components through a customizable style property override mechanism.

Theme Customization - Overrides individual style properties of the default theme to create a personalized look for the code editing environment.

Sandbox - Generates shareable URLs from current sandbox files for editor and embed links.

codesandboxsandpack

Features

Star history