The only tool you'll need: CodeSandbox
Tags: codesandbox, webdev
Published: 2022-12-19 02:26:26

by [Simeon Deinma](https://blog.openreplay.com/authors/simeon-deinma)




As the tech industry keeps developing, we have access to many online editors. However, these online 
editors might not work as we expect them to, especially for a complex idea. Are you new to browser-based IDEs or looking for a way to be more productive and build web applications faster and more easily? CodeSandbox is your go-to.  

CodeSandbox is a [cloud development platform](https://www.mendix.com/cloud/cloud-platforms-for-rapid-application-development/) that enables anyone to quickly code, collaborate, and ship projects of any size from any device. An online [IDE](https://www.codecademy.com/article/what-is-an-ide) for web development that is fully functional and instantly available on any device with a browser, allowing you to swiftly [prototype](https://en.wikipedia.org/wiki/Prototype) new ideas and begin new initiatives. With CodeSandbox, you can easily construct web applications, experiment with the code, test concepts, and distribute your work.

## How To Get Started With CodeSandbox

To get started, create a free account by visiting the [CodeSandbox site](https://codesandbox.io/) and going to the login page. You can either log in via GitHub or a google account, and you'll be directed to the homepage when logged in.

![1 homepage](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image01.png)


Click on "create" to create a new sandbox.
Two panels on the left and right should help appear when you click on "create". On the right side, you should see a list of [templates](https://codesandbox.io/docs/learn/sandboxes/templates) that can help you get started on your project.

![2](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image02.png)


Examples are;

- [React](https://reactjs.org/)
- [Vanilla](https://codesandbox.io/s/vanilla) 
- [NextJS](https://nextjs.org/)
- [Angular](https://github.com/angular/angular), etc

![3](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image03.jpeg)


 On the left panel, you are provided with options such as;

- Quick start; This section provides you with templates to get started.
- Import from Github; This option allows you to directly import repositories from Github.  
- Official templates
- Cloud templates (beta)

## How To use CodeSandbox Editor
Let's start with the [React](https://reactjs.org/) template and learn how to use the editor. 

![4 Editor screen](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image04.png)


Here, you are provided with options that aid configuration.
These include;

- Files: You can create new files, a new sandbox, save, or configure your environment based on your preferences.
- Edit: This comprises commonly used features such as undo, redo, copy, and replace.

Other options include; **selection**, **view**, **go**, **command** **palette,** and **help**. 

### Tools in the sandbox
CodeSandbox provides tools that make the IDE and coding more user-friendly and improves productivity. 

- Sandbox info: You can add a description of your project here. You can save, freeze, or make a special template. Additionally, you can delete the sandbox.

![5](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image05.jpeg)

- Explorer: This consists of other features such as;

      - Files: This folder contains all of the project's files. All files and folders are managed here. You can also add, replace or delete [HTML](https://html.com/), [CSS](https://www.w3.org/Style/CSS/Overview.en.html), and image files. 
      - Dependencies: Here, you can easily add packages by inserting the name from the npm registry.
      - External resources: The external resources area is where you can add any [Cdn URLs](https://www.belugacdn.com/what-is-cdn-url/) you need to.
      - Font family: You can also add a font by selecting a font family.

![6](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image06.jpeg)

- Search: Self explanatory!

![7](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image07.jpeg)

- Configuration: Here, you can make changes to the files in your sandbox, which are part of the `package.json` file.

![8](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image08.jpeg)

* GitHub: You can connect your GitHub account and push commits for your project.

![9](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image09.jpeg)

* Deployment: You can use [Vercel](https://github.com/vercel/vercel), [Netlify](https://www.netlify.com/), or [GitHub](https://github.com/) Pages to deploy your projects with CodeSandbox right from the editor.

![10](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image10.jpeg)

* Live coding session: You can conduct a live coding session in which anyone with the link can participate.

![11](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image111.jpeg)



### Other tools

![12](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image12.jpeg)

- Share: Others can be invited to your project.

- Embed: This tool helps you embed your sandbox into a blog post.

![13](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image13.jpeg)

- Fork 
- Sign in 
- Name of project: CodeSandbox will usually assign a random name to your project. At the top of the project, you can rename it yourself.

![14](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image14.jpeg)



<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._





## Pros and cons of CodeSandbox

### Pros

* CodeSandbox lets you set up a live environment where you can quickly test your ideas.
* You can choose an existing template or create your own (login for that ).
* You can export or [embed](https://codesandbox.io/docs/learn/sandboxes/embedding) your sandbox in another site; e.g., fork it into GitHub.
* You can access external resources that you import into this [library](https://codesandbox.io/s/p99a3mm2).
* There's no issue of having a local host URL anymore because you can simply just share with anyone, and they'll be able to view the preview of your application.
* With CodeSandbox, you can input dependencies on the go.
* CodeSandbox is designed for team-oriented developers.
* You have access to a sandbox to play or experiment with code.

![15 Experiment with coding at any time!](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image15.jpeg)


### Cons

* The pricing plan for CodeSandbox is high for Indian and other users. Also, CodeSandbox supports only UI languages for now. Support for backend languages and frameworks like [spring boot](https://spring.io/projects/spring-boot) should be added.
* When a timeout occurs, the page will occasionally need to be refreshed to load, and it's slow.
* The free versions have fewer features, and the premium version should be less expensive.
* Because of timeout issues, refreshing the page after a few minutes is needed; else, data will not be saved. 

## What makes CodeSandbox Unique?

- **Inviting Team Members**: A sandbox like a [Google doc](https://www.google.com/docs/about/) is collaborative, but you can get feedback and collaborate in real-time or asynchronously. CodeSandbox makes collaborations easy and grants access to all projects and branches by working in teams or sharing only certain branches for more precise permissions. The editor can create a new branch, perform any [git](https://git-scm.com/) operation, make changes, etc. While the team members can browse the project's content, check the previews, and even execute a few tasks. They need to create a contribution branch or fork the repository to introduce changes.

- **Add Npm dependencies**: With CodeSandbox, you can use private packages to swiftly create powerful apps.

- **Multiplayer**: You can share your sandbox with a single click. With only a URL, your friends, teams, and colleagues can participate and view your creation. CodeSandbox repositories allow you to create a workspace to be experienced by multiple people/teams simultaneously. It is hosted in the cloud and runs on [microVMs](https://www.techtarget.com/searchsecurity/definition/micro-VM-micro-virtual-machine) technology that is configurable to the size of your project (can be plenty of files). It is integrated with [source control](https://www.perforce.com/blog/vcs/what-source-control), which is helpful when you're working on a branch and need to quickly examine a PR.

- **Live Collaboration**: You can start a Live Session while working in a sandbox. This creates a unique URL that you can share with others to invite them to join your sandbox and collaborate live (google Docs style) with you. You can also enable "Classroom Mode" as the sandbox owner, which lets you control who can change the sandbox and who can only watch it. This is especially helpful in workshops or other settings where more than 30 people can connect simultaneously.

![16](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image16.jpeg)

- **GitHub Forking**: CodeSandbox allows you to work directly on a GitHub project in addition to importing and exporting data from it. Add modifications to a sandbox that has been imported from GitHub by [forking](https://www.techtarget.com/whatis/definition/fork) it, and when done, you have the alternative of submitting a PR or committing to the changes. No problem if you don't own the repository; it'll be forked automatically, and a PR will be generated for you.

![17](https://blog.openreplay.com/images/the-only-tool-you-will-need--codesandbox/images/image17.jpeg)

- **Visual Studio Code Integration**: "VS code in the browser" is an experimental code recently included in the IDE (you can enable it in settings). It is a version of VS code that runs in the browser. As a result, we get features like [Breadcrumbs](https://stackoverflow.com/questions/52957333/how-to-show-breadcrumbs-on-visual-studio-code), [Grid View,](https://www.w3schools.com/css/css_rwd_grid.asp) [Keybindings](https://learn.microsoft.com/en-us/visualstudio/extensibility/keybinding-element), [User Snippets](https://learn.microsoft.com/en-us/visualstudio/ide/code-snippets), and [VSCode](https://code.visualstudio.com/) Settings, among others. We should have identical keybindings, snippets, and preferences if you directly copy your configuration files from VSCode to CodeSandbox.

- **Container Sandboxes**: Container Sandboxes are another recent innovation. Previously, a sandbox would run in the browser. This restricts what you may run but works well for many sandboxes. However, Container Sandboxes enable us to do things like build a [Node](https://nodejs.org/)/[GraphQL](https://graphql.org/) server on CodeSandbox by running the code on a server. It also enables the development of [Next](https://nextjs.org/)/[Gatsby](https://www.gatsbyjs.com/)/[Nuxt](https://github.com/nuxt) projects within CodeSandbox. It controls everything that happens locally.

- **Deploy Sandboxes**: CodeSandbox has a deployment integration with [Now](https://vercel.com/home).
You can select "Deploy Now" to make a production version of your sandbox. This will start with a new URL, deploy the sandbox, and install the node modules. After that, we return this URL, which you can alias to any site you choose.

- **CodeSandbox repositories**: CodeSandbox consists of several separate servers, some of which are open-sourced.

Client: the web application
Server: the [Phoenix API server](https://www.phoenixframework.org/)
Nginx: [Nginx](https://www.nginx.com/) config files
[Git Extractor:](https://github.com/internetwache/GitTools)  The Git Extractor removes the source code from a GitHub repository.
[CLI](https://en.wikipedia.org/wiki/Command-line_interface): the command-line interface allows you to upload a CodeSandbox project.

## Alternatives to CodeSandbox

Here are some of the alternatives to CodeSandbox;
- [Codepen](https://codepen.io/)
- [Codemirror](https://github.com/codemirror/codemirror5) 
- [Stackblitz](https://stackblitz.com/)
- [Glitch](https://glitch.com/)
- [JSFiddle](https://jsfiddle.net/)

## Conclusion
CodeSandbox is an online IDE with tools and options to make coding easier for a developer. You can create codes and experiment with coding, and for a team-oriented web developer, CodeSandbox is your safe bet.







[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)