Welcome to CodeSandbox!

CodeSandbox is a development platform we use in our JavaScript, React, and Advanced CSS classes. A sandbox's development environment is already set up for you - a bonus when you first start coding in a library like React. Using a sandbox allows you to code in a way that's easily sharable and includes a Preview window and console where you can see your results immediately. (Sandboxes are different than Devboxes. We don't recommend converting your Sandboxes to Devboxes no matter how alluring that yellow button is. 🙂)

Drafts and sandbox limits

There is a limit on the number of sandboxes you can create on CodeSandbox with a free plan. You are allowed 10 drafts and an additional 20 sandboxes that have been moved out of Drafts. If you worked in CodeSandbox before these restriction were in place, you're able to keep all of your previous sandboxes. And any links to them that you've added to your portfolio or in a blog post will continue to work. Older sandboxes may be read only.

Setting a sandbox to "Public" so you can share a link.

Many lessons steps begin with forking a Skillcrush sandbox. When a sandbox is forked, it starts off in the Drafts folder. And the sandbox is private by default. Next to the name of the sandbox, you'll see a little lock that indicates that the draft is private. If you share a link to a private sandbox, the visitor will be blocked from seeing the sandbox. To share your code with us and other Skillcrushers for feedback and help debugging, you'll need to set the sandbox to "Public".

You can make the draft public a couple of ways. You can move the sandbox out of Drafts and into a folder. Or you can change Settings so that any current sandboxes (including drafts) are public.

To change settings, move to the Dashboard and choose the gear icon next to your username. Change the "Default Privacy" setting to "Public". And toggle "Update Drafts". When you click on "Change Default", your privacy settings will be updated and your current drafts will be public allowing you to share them with a link. (Future drafts will need to have their privacy settings updated.)

To update an individual draft to public, it must be moved out of Drafts and into a folder. You can click on the "Share" button in the upper right corner and then click "Move out of Drafts".

Next, update "Change permissions" to "Public".

Or, you can move a sandbox out of Drafts in the dashboard. Click on the three-dot menu for any sandbox and then click "Move out of Drafts".

Then in the folder, click on the sandbox's three-dot menu. And choose "Make Public" from the menu.

Once the sandbox is public, you're able to share it in a feedback challenge or in the Student Slack channels if you would like a little debugging help. 🙂

Reaching the CodeSandbox limit

At some point, you'll reach the limit on drafts and sandboxes in folders. You'll know when you try to fork a sandbox and see a message that you're above your limit. Time to do a little housekeeping to move below the limit. 🧹

Check your sandboxes for any completed exercises or projects. Do you want to keep the project in CodeSandbox so you can link to the project in your portfolio or blog post? This is a great option for projects built with React! If so, look for the sandbox with the final version of your code and move it out of Drafts. Projects that were worked on over multiple lesson steps will have earlier, unfinished versions of your code and these can be deleted - freeing up some space.

If you don't need or want to keep your code on CodeSandbox, you can download the project to your local computer. Many students like to create a folder for each class where they store their notes, cheatsheets, and project folders. This would be a great place to keep the project folders you downloaded. Once the code has been downloaded, you can delete the sandbox. You can also create a GitHub repo for the individual projects and push your code to GitHub. More little green boxes in the contribution graph! 🟩 🟩 🟩

Once you've reduced the number of sandboxes, you should have plenty of space to continue forking sandboxes and working on your lessons.

Downloading your code

To download the code from a sandbox, move the sandbox from a draft, then click the cloud-with-arrow icon or download the sandbox from the CodeSandbox dashboard by clicking on the three-dot menu icon. We also have a guide you can download in this lesson of the JavaScript Fundamentals class on how to download the project from CodeSandbox to your local computer. (It has some helpful graphics so you can find all three ways of downloading the files.) And, you can download this guide to working with JavaScript locally.

Happy Coding!