awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
codesandbox avatar

codesandbox/sandpack

0
View on GitHub↗

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.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
sandpack.codesandbox.io
↗

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.
6,167 stars·480 forks·TypeScript·Apache-2.0·38 views

Star history

Star history chart for codesandbox/sandpackStar history chart for codesandbox/sandpack

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

Frequently asked questions

What does codesandbox/sandpack do?

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.

What are the main features of codesandbox/sandpack?

The main features of codesandbox/sandpack are: NPM-Enabled Sandboxes, Node.js Execution Environments, Custom Code Editor Interface Assemblers, Sandbox Hot Reloaders, Sandbox Hot Reloading, Live, Custom Node.js Runtimes, Bundler Loaders.

Which projects share features with codesandbox/sandpack?

Projects with overlapping indexed features include: vanessa219/vditor — Vditor is a browser-based Markdown editor and rendering engine that supports multiple editing interfaces, including a… codemirror/dev — CodeMirror is a browser-based code editor framework and modular extension system used to embed full-featured text… vira-soft/vira-assets — This project is a centralized repository and delivery system for branding assets and development environment themes.… pbek/qownnotes — QOwnNotes is a desktop note editor that stores each note as a plain-text Markdown file on the local filesystem,… daltonmenezes/aura-theme — Aura Theme is a comprehensive set of dark color palettes, development environment styles, and digital assets designed… astronvim/astronvim — AstroNvim is a modular Neovim distribution that functions as a comprehensive development environment. It provides a…

Projects sharing features with Sandpack

These projects share indexed features with Sandpack. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • vanessa219/vditorVanessa219 avatar

    Vanessa219/vditor

    11,074View on GitHub↗

    Vditor is a browser-based Markdown editor and rendering engine that supports multiple editing interfaces, including a visual rich-text experience, instant rendering, and a traditional side-by-side split-view preview. It serves as an authoring tool for technical documentation and a component for web-based editor integration. The project is distinguished by its support for complex technical content, utilizing specialized rendering for mathematical formulas, flowcharts, sequence diagrams, and mind maps. It also functions as a collaborative document review tool, enabling users to attach anchored

    TypeScriptcommonmarkeditorgfm
    View on GitHub↗11,074
  • codemirror/devcodemirror avatar

    codemirror/dev

    7,820View on GitHub↗

    CodeMirror is a browser-based code editor framework and modular extension system used to embed full-featured text editors into web pages. It functions as a syntax tree parsing engine and a language server protocol client, enabling structural language analysis and deep integration with external programming language services. The project is distinguished by its modular architecture, which uses a system of extensions and compartments for dynamic reconfiguration at runtime. It supports real-time collaborative editing and state synchronization through an operational transformation framework, allow

    JavaScript
    View on GitHub↗7,820
  • vira-soft/vira-assetsvira-soft avatar

    vira-soft/vira-assets

    11,320View on GitHub↗

    This project is a centralized repository and delivery system for branding assets and development environment themes. It serves as a static asset host that provides brand images, logos, and media files via a content delivery network for use by external applications. The project provides an integrated theme and icon pack for editors and terminals, featuring hand-curated color schemes and a custom file icon set mapped to specific extensions and folders. It utilizes a JSON-schema-driven configuration system to apply consistent visual styling and contrast levels across different platforms. Additi

    epichacktoberfestmaterial-theme
    View on GitHub↗11,320
  • daltonmenezes/aura-themedaltonmenezes avatar

    daltonmenezes/aura-theme

    3,730View on GitHub↗

    Aura Theme is a comprehensive set of dark color palettes, development environment styles, and digital assets designed to create a unified visual identity across various software targets. It provides a cohesive dark mode system for code editors, terminal emulators, and desktop window managers, complemented by a collection of high-resolution dark wallpapers for desktop and mobile environments. The project includes a theme porting tool and a UI color token system that replace hardcoded hex values with dynamic accent tokens. This framework enables cross-application theme porting, allowing a consi

    TypeScriptcodesandboxcolor-themedark
    View on GitHub↗3,730
Compare all 30 related projects→