DEV Community

Cover image for How to use CodeSandbox - A Beginner's Guide
Jessica Wilkins
Jessica Wilkins

Posted on

How to use CodeSandbox - A Beginner's Guide

I started using CodeSandbox over a year ago, when I was doing the freeCodeCamp 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 and going to the login page.

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

sign in page

Once you are logged in, you will be directed to the homepage.
homepage

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

The second place is located under the Recently Used Templates section.
recently used templates

When you click to create a new sandbox, you should see a welcome menu.
welcome menu

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

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

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

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

What is the Sandbox info section?

On the left hand side of the editor, you will see an option for Sandbox info.
sandbox info

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

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.

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.

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

If you want to delete your sandbox, click on the delete option at the bottom.

delete option

What is the Explorer section?

On the left hand side of the editor, you will see an option called Explorer.
explorer

The top section contains all of the files for the project.
files

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

If you need to add any cdn links, then you can add it to the external resources section.

external links section

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

What are the configuration files?

On the left hand side of the editor, you will see an option called Configuration files.
config files

This is a place to edit your package.json file or any other config files.
prettier

What is the GitHub section?

On the left hand side of the editor, you will see an option called GitHub.
GitHub option

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

connect github

What is the Deployment section?

On the left hand side of the editor, you will see an option called Deployment.
Image description

CodeSandbox has an option for you to deploy your projects from the editor using Vercel, Netlify or GitHub Pages.

deployment options

What is the Live option?

On the left hand side of the editor, you will see an option called Live.
live demo

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

What is the Share option?

In the upper right hand corner of the project editor, you will see a blue Share button.
share button

If you click on the Share button, then you can invite others to edit your projects.
edit option

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

embed option

embed code

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

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!

Discussion (1)

Collapse
kirkcodes profile image
Kirk Shillingford

Codesandbox is such a powerful tool. Thanks for this writeup!