CodeSandboxExploreSearchDocsBlogGitHub
Sign InCreate Sandbox

Code
Sandbox

The online code editor for web applications

CodeSandbox is an online editor that helps you create web applications, from prototype to deployment.

parcel
cxjs

Tailored for web applications

We know how overwhelming JavaScript development can be. With CodeSandbox we specifically focus on web application development to make the experience as smooth as possible. Just open your browser and start coding.

parcel

Vanilla

Description

Used for any kind of project, based on: parcel.

Supported Loaders

babel.js
typescript.ts
html.html
pug.pug
scss.scss
sass.sass
less.less
css.css
stylus.styl
image.png

CSS Scoping Support

Global, Modules

Share in a single click

Say goodbye to the days where you had to create a zip file just to share your code. Now you can copy the link and share away!

Dependency
Sandbox Count
Algolia

NPM Support

Think of any npm dependency you want to use, we probably support it! You can install a new dependency within seconds.
Learn how it works.

Search & Discovery

Want to know how a library works? You can easily browse through the 800,000+ created sandboxes on CodeSandbox. We want this to be a platform where everyone can easily learn and share.

Embedding

We built a lightweight version of CodeSandbox for embeds, this allows you to embed your sandbox anywhere. Viewers can even play with the code in the embed, without leaving the website. We offer many customization options to make sure you can show the embed exactly the way you want.

Browser

Be Productive, Anywhere

We aim to give you the tools to build a full blown web application. You can easily import projects from GitHub, make commits, and finally deploy. We support the whole cycle.

Import

Paste your GitHub URL. You get a sandbox that stays up to date with the latest changes automatically.

Build

Fork the sandbox and start building that long awaited feature!

Commit

Commit your changes or open a pull request with a user friendly UI.

Deploy

Deploy a production version of your sandbox using ZEIT's Now.

github.com/reduxjs/redux/tree/master/examples/todoscodesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos
Deploying...https://csb-921ywn9qrw-emlplxhibt.now.sh/

There's more

This is just the tip of the iceberg. There are many more things to explore, if you are missing anything you can always open an issue on GitHub.

Live Collaboration
Edit sandboxes together in real time, Google Docs style. Use Classroom Mode to control who can make edits.
Jest Integration
We automatically run Jest tests and show the results with an intuitive UI.
Keybindings and Quick Actions
Use Keybindings and Quick Actions to execute commonly used actions more quickly.
Configuration UI
We show a UI for configuration files so you don't have to look up how the configuration is structured.
Export to GitHub
All sandboxes can easily be exported to a GitHub repository.
Static File Hosting
The development server will serve all files statically from the public folder, depending on the template.
Integrated DevTools
The preview window has integrated DevTools, like a console, test view and a problem viewer.
Private/Unlisted Sandboxes
patron
You can set a sandbox to private or unlisted to make sure others cannot see or find it.
Externally Hosted Previews
You can open your sandbox preview with a separate URL, while still keeping Hot Module Reloading.
Monaco Editor
We use the same editor as VSCode, which gives us "Go to Definition", "Replace Occurences" and more!
Hot Module Reloading
Hot Module Reloading is built in, so you won't have to press refresh for every change.
Error Overlay
We show a user friendly error overlay for every error, sometimes with suggestions on how to solve it.
Automatic Type Acquisition
Typings are automatically downloaded for every dependency, so you always have autocompletions.
TypeScript
Thanks to Monaco we show TypeScript autocompletions and diagnostics for TS sandboxes.
Prettier
Code automatically gets prettified on save according to your own Prettier preferences.
ESLint
All code is linted automatically using latest version of ESLint, with full ES6 support.
;
Emmet.io
You can easily expand abbreviations with Emmet.io in all JS, HTML and CSS files.
Open Source
We're almost fully open source! Our most active repository can be found here.
Import with CLI
You can export a local project to CodeSandbox easily using codesandbox-cli.
Export To Zip
You can always download a zip from your sandbox for if you want to continue locally.

Recent Publications

You can follow our blog to stay up to date with new publications.

CodeSandbox Containers out of Beta & Improvements

CodeSandbox Containers are now out of beta with a faster infrastructure and raised limits!

Announcing CodeSandbox v3

Including VSCode Extensions, a new editor redesign and devtool panes!

Improving the CodeSandbox Community

It’s time for a new update to CodeSandbox! This time we focused on the most important part of CodeSandbox: the community.

Become a Patron

You can support our development by becoming a Patron and paying a monthly amount of your choice. As a Patron you get less limits and extra features, like private sandboxes. There are more patron features coming.

Patron IV
Open Patron Page

Who's using CodeSandbox?

More Users