How to use CodeSandbox - A Beginner's Guide
Tags: beginners, webdev, programming
Published: 2021-12-01 04:42:52

I started using [CodeSandbox](https://codesandbox.io/) over a year ago, when I was doing the freeCodeCamp [Front End Development Libraries](https://www.freecodecamp.org/learn/front-end-development-libraries/) Certification. 

It is a very helpful tool where you can build and share your web development projects. 

In this guide, I will walk you through all of the free features behind this online code editor.

## CodeSandbox templates
You can create a free account by visiting the [CodeSandbox site](https://codesandbox.io/) and going to the [login page](https://codesandbox.io/signin).

You have the option to login with either your GitHub or Google account.

![sign in page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf58klv0sqf2nxxsvwp4.png)
 
Once you are logged in, you will be directed to the homepage.
![homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1x817z33p02yviy5hla.png)

There are two places where you can create a new sandbox.

The first place is located in the upper right hand corner. Click on the blue Create Sandbox button.
![blue sandbox button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r65vwue70n10cxtjwkta.png)
 
The second place is located under the Recently Used Templates section.
![recently used templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kkchq1zcho8f8lbiw0j.png)
 
When you click to create a new sandbox, you should see a welcome menu.
![welcome menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zvkt9vhzkexdumgm696.png)
 
If you click on the Create Sandbox option on the left, then you should see a list of templates that you can use to get started with your project.

![more templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdofc2l7cy1h2xtfpklc.png)
 
Here are is a list of some of the templates available to you. 

* React
* Static HTML and CSS
* Vanilla JavaScript
* Vue
* Angular
* TypeScript
* Svelte
* Ember
* Gatsby

If you want to explore more templates, then click on the Explore Templates option on the left hand side.

![explore templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4ubej53wt3mlcnpc1x5.png)
 
Let's take a look at the React template and learn how to use the editor.

## How to use the CodeSandbox editor
This is what the editor screen will look like.

![editor screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/240if69kk44zf7n7yyws.png)
 
CodeSandbox will give you a default name for your project which is usually made up of random characters. You can rename your project at the top of the editor.

![example react project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpv9i3x8clf4r55xw6j7.png)
 
### What is the Sandbox info section?
On the left hand side of the editor, you will see an option for Sandbox info.
![sandbox info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1ege5u5p796rnvhclmq.png)
 
This is a place where you can add a description for the project. 

You will also notice an option to freeze the template.
![freeze option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxkr3zehqq4le5cr6d35.png)
 
If the freeze option is switched on, then it prevents you from making changes to the template. You can learn more about this option in the [documentation](https://codesandbox.io/docs/templates).

By default, all of the CodeSandbox projects will be public. If you want to have private projects, then you will need to subscribe to the [paid pro option](https://codesandbox.io/pro).  

You also have the option to create your own custom templates. Click on the Save as template option within the Sandbox info section.

![save as template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5shz07f6z7jrm81eaqco.png)
 
If you want to delete your sandbox, click on the delete option at the bottom.

![delete option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqx4kszmhitlq0tjipsb.png)
 
### What is the Explorer section?
On the left hand side of the editor, you will see an option called Explorer.
![explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0hdxx97bkone72bctb0.png)

The top section contains all of the files for the project.
![files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfavhhmprbo0v5sp6jyj.png)

The next section, is a place to add any additional dependencies. You can use the search function to look for any package from the npm registry. 

![npm registry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x488yds886mz5ncidq78.png)
 
If you need to add any cdn links, then you can add it to the external resources section.

![external links section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jd8zbcri1cckd2mg02g.png)
 
CodeSandbox comes with a list of all the Google fonts that you can add to your project. That is also located in the external resources section.
![google fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x00aee4oxji3p42xjla1.png)

### What are the configuration files?
On the left hand side of the editor, you will see an option called Configuration files.
![config files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4oosf95yu80loet4wys.png)

This is a place to edit your package.json file or any other config files. 
![prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6rgmle982dnhxuu1pyc.png)
 
### What is the GitHub section?
On the left hand side of the editor, you will see an option called GitHub.
![GitHub option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1lt5tub4rc71l128jbi.png)

This is a place where you can connect your GitHub account and push commits for your projects.

![connect github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40eao5a6zefxd2c3sinv.png)

### What is the Deployment section?
On the left hand side of the editor, you will see an option called Deployment.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6man7ybxbtroiemglop.png)
 
CodeSandbox has an option for you to deploy your projects from the editor using Vercel, Netlify or GitHub Pages.

![deployment options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6p2t8ceho9nk3hu0g5dv.png)
 
### What is the Live option?
On the left hand side of the editor, you will see an option called Live.
![live demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1kkyna0opspobdg5ydo.png)

This is an option, where you can do a live coding session. Anyone who has the link can participate in these sections.

You can find the link here.
![live session](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sd0bdpek9c131o8e9cm6.png)

## What is the Share option?
In the upper right hand corner of the project editor, you will see a blue Share button.
![share button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpohio5wnsgiq33e396j.png)
 
If you click on the Share button, then you can invite others to edit your projects.
![edit option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3katiyn02jd9tdlljcow.png)

If you click on the embed option, you can embed your sandbox into your blog posts. 

![embed option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qincgfvx1s7zl45f7j9.png)

![embed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2zvr7c4gl84ryau2vgk.png)

## How to open your project in a new browser window?
In the top right hand corner, you can choose to open your project in a new browser window.
![new browser window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/831j62rue2vd2i4vveze.png)

That is a complete introduction on how to use CodeSandbox. I encourage to play around with the different features and start building your own projects.

Happy coding!