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.

Once you are logged in, you will be directed to the 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.

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

When you click to create a new sandbox, you should see a 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.

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.

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.

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.

What is the Sandbox info section?

On the left hand side of the editor, you will see an option for 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.

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.

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

What is the Explorer section?

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

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

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.

If you need to add any cdn links, then you can add it to the external resources 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.

What are the configuration files?

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

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

What is the GitHub section?

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

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

What is the Deployment section?

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

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

What is the Live option?

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

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.

What is the Share option?

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

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

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

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.

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!