CodeSandbox

CodeSandbox is an online IDE that gives developers a fully-featured development environment in the browser, with no local setup required. It supports React, Vue, Svelte, Angular, and Preact through pre-configured templates, and lets you start coding, testing, or prototyping in seconds.

At its core, CodeSandbox runs a complete module resolution and transpilation pipeline inside the browser using its open-source sandpack-core engine. This means npm dependencies are fetched and bundled client-side, with caching via IndexedDB and HMR support — capabilities that normally require a Node.js server. The sandbox execution runs inside a sandboxed iframe communicating with the editor through a typed message protocol, keeping untrusted code fully isolated.

CodeSandbox supports GitHub repository import, converting any repo URL into a live environment within seconds. For teams and organizations, it offers real-time collaboration, branching, and a dashboard for managing shared sandboxes. The react-embed package allows developers to embed live, interactive sandboxes directly in documentation or blog posts.

The cloud-hosted platform at codesandbox.io adds microVM-based environments, Dev Container support, and a programmatic SDK for AI agent integration and scalable code evaluation. The open-source client repository provides the full web application, editor, and execution engine, making it possible to understand and contribute to the entire stack.

What You Get

• In-browser Execution Engine (sandpack-core) - A fully client-side module resolution and transpilation pipeline that fetches npm packages dynamically, caches them in IndexedDB, and runs HMR without any server-side Node.js process.
• BrowserFS Virtual Filesystem - An in-memory POSIX-like filesystem that lets code expecting Node’s fs module run unmodified inside the browser sandbox.
• GitHub Repository Import - URL transformation pipeline that converts any public GitHub repo URL into a live runnable sandbox in seconds, with automatic configuration detection.
• Monaco Editor Integration - Full VS Code-based editing experience with TextMate grammar support, syntax highlighting across dozens of languages, and IntelliSense powered by the monaco-typescript standalone package.
• Sandbox Embedding (react-embed) - A package for embedding live, interactive CodeSandbox environments directly in documentation sites or blog posts via a simple React component.
• Pre-configured Framework Templates - One-click starters for React, Vue 3, Svelte, Angular, and Preact with Vite or Webpack build tooling pre-configured and ready to run.
• Real-time Collaboration - Multiple developers can edit the same sandbox simultaneously with presence indicators and live cursor tracking.
• codesandbox-api Message Protocol - A typed two-way communication protocol between the sandboxed iframe and the parent editor frame that enables actions, errors, and console output to flow safely across frame boundaries.

Common Use Cases

• Reproducing bugs for issue reports - Developers create a minimal reproducible sandbox and share the URL in GitHub issues, giving maintainers a live environment to investigate without any local setup.
• Interactive documentation and tutorials - Technical writers embed live runnable examples in docs sites using react-embed, so readers can edit and run code directly on the page.
• Teaching web development - Instructors spin up pre-configured React or Vue sandboxes for students to experiment with, eliminating the Node.js installation and build tool configuration steps.
• Rapid prototyping across devices - Developers prototype on any device with a browser, including tablets, because no local toolchain is needed — the entire compiler runs in the browser tab.
• Running AI agent code evaluation - Teams use the CodeSandbox SDK and microVM environments to give AI agents isolated sandboxes for executing and testing code responses without security risks.
• CI/CD test sandboxes - QA pipelines spin up sandboxes via the API to run test suites in reproducible environments, then hibernate them after execution to avoid persistent infrastructure costs.

Under The Hood

Architecture The codebase follows a Lerna-managed monorepo pattern with deliberate boundaries between the application shell, the execution core, and standalone browser-native packages. The sandpack-core package acts as a fully decoupled execution engine — it handles module resolution, transpilation, dependency fetching, and evaluation through a well-defined Manager class that operates independently of the UI. The frontend application uses Overmind for unidirectional state management, dividing concerns into namespaced slices with explicit side effects isolated in an effects layer. Communication between the sandbox iframe and the host application is mediated through a codesandbox-api typed message protocol, creating a clean boundary between code execution and the editor UI. A GraphQL layer with Apollo Client and code-generated TypeScript types enforces schema-first design for remote data. The primary architectural tension is that the UI layer carries substantial business logic in deeply nested Overmind namespaces, and the Webpack configuration across numerous packages resists easy decomposition.

Tech Stack The application is a TypeScript-flavored JavaScript monorepo built with Lerna and Yarn workspaces, running React with styled-components and Overmind for state management. The sandbox execution engine runs entirely in the browser using BrowserFS to emulate a Node.js-style filesystem in-memory, fetching npm dependencies via multiple protocol adapters targeting UNPKG, Skypack, and a custom CDN. Apollo Client with code-generated types via GraphQL Code Generator handles remote data fetching. Monaco Editor — drawn from a standalone vscode-editor package — delivers the full VS Code editing experience with TextMate grammar support. Webpack with Babel handles the build pipeline, CircleCI runs continuous integration, and BrowserStack provides cross-browser integration testing. The backend Phoenix (Elixir) server is a separate repository not included here.

Code Quality Testing coverage is focused but uneven across the monorepo. Integration tests use Puppeteer to validate sandbox rendering end-to-end, vscode-textmate carries thorough unit tests for grammar parsing and tokenization, and selected utility packages include focused unit tests. The main application’s React components and Overmind action logic have limited test coverage overall. TypeScript adoption is partial — sandpack-core and the Overmind state definitions are strongly typed with explicit interfaces, while much of the app-level component code uses older JavaScript patterns with occasional any types. ESLint and Prettier are configured across the monorepo, enforcing consistent formatting and React Hooks best practices. Error handling in the compilation pipeline uses descriptive custom error classes with meaningful messages. The codebase shows signs of organic growth, with some circular import suppressions and an expansive build configuration.

What Makes It Unique CodeSandbox’s most technically distinctive capability is running a complete module resolution and transpilation pipeline entirely in the browser without any server-side compute. The sandpack-core manager implements a fully in-browser CommonJS resolver that handles dynamic npm dependency fetching, IndexedDB caching, and Hot Module Replacement — capabilities that normally demand a Node.js server. BrowserFS provides a POSIX-like filesystem API in-memory, enabling code that depends on Node’s fs module to run unmodified inside a browser tab. The URL transformation pipeline that converts any public GitHub repository URL into a live runnable sandbox in seconds is operationally unique at this scale. The codesandbox-api message protocol, enabling typed two-way communication between the isolated sandbox iframe and the parent editor, makes safe third-party embedding via react-embed practical — a capability competitors have not replicated as cleanly.

Self-Hosting

CodeSandbox uses a dual-license structure. The main application and editor are released under GNU GPL v3, which is a strong copyleft license requiring that any derivative work you distribute must also be released under GPL v3. The packages/common, packages/sandpack-core, and packages/app/src/sandbox packages are licensed under the Apache License 2.0, which is permissive — you can use, modify, and distribute those components without copyleft obligations. If you intend to build a commercial product on top of this codebase, the GPL v3 portions require careful legal review, as the copyleft terms apply to the full application layer that wraps the Apache-licensed execution engine.

Self-hosting the CodeSandbox client is technically feasible but operationally non-trivial. The client repository only covers the browser application — the backend API server (Phoenix/Elixir), the microVM infrastructure for cloud-based environments, and the authentication service are separate systems not included here. Running just the browser editor requires a compatible API backend and the team’s Nginx configuration, none of which are packaged together for self-hosting. You take on full responsibility for deployment, SSL termination, dependency CDN availability (the in-browser bundler fetches packages from UNPKG or a custom CDN at runtime), and keeping the monorepo’s many packages in sync during updates.

The managed codesandbox.io platform adds substantial capabilities that the open-source client alone cannot provide: microVM sandboxes with sub-second resume times, Dev Container support via Docker Compose, the CodeSandbox SDK for programmatic sandbox management, GitHub integration with branch-per-PR environments, team dashboards, and Codeium AI autocomplete. The free tier at codesandbox.io covers personal use; paid plans unlock private sandboxes, additional VM resources, and team collaboration at scale. For most teams, the operational burden of self-hosting the full stack — without the microVM layer — makes the hosted platform the practical choice unless GPL v3 compliance is unworkable for the use case.