// the find
codesandbox/codesandbox-client
An online IDE for rapid web development
The web client behind codesandbox.io: an in-browser IDE with an editor, live preview, devtools panels, and template and GitHub import flows for React, Vue, Svelte, Angular and Preact. It suits people who want to read or fork how a production browser IDE is built, not anyone hoping for a self-hostable editor, because the API server lives in a separate repo.
- The integration suite (packages/app/integration-tests/tests/sandboxes.test.js) renders real public sandboxes and diffs them against stored PNG snapshots, so a broken template shows up as a visual regression rather than only as a failed unit assertion.
- Preview/DevTools is split into separate components for console, problems, terminal, React devtools and tests, which makes it a usable reference for building an embedded debugging panel.
- This is the production client for a product with real users, not a demo, and it was last pushed in September 2026, so it is still maintained.
- It is not self-contained. The README says the server is a separate Phoenix API, so without that backend, anything that persists or authenticates has nothing to talk to.
- Two type systems live side by side. packages/app has a .flowconfig alongside a mix of .js and .tsx files, so contributors need to know both Flow and TypeScript, and the migration is partway through.
- The build tooling is layered: lerna, Yarn-era config files, Gulp, and separate webpack and babel configs under packages/app/config. That is a lot to learn before the first change builds.
- Snapshot PNGs are committed to the repo, so every intentional rendering change adds binary diffs to git history.