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.
You have the option to login with either your GitHub or Google account.
There are two places where you can create a new sandbox.
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.
- Static HTML and CSS
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.
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.
This is a place where you can add a description for the project.
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.
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.
This is a place where you can connect your GitHub account and push commits for your projects.
CodeSandbox has an option for you to deploy your projects from the editor using Vercel, Netlify or GitHub Pages.
This is an option, where you can do a live coding session. Anyone who has the link can participate in these sections.
If you click on the embed option, you can embed your sandbox into your blog posts.
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.