Shouldn’t you be using CodeSandbox?

The integrated development environment (IDE) remains the centerpiece of developer tools. Online IDEs have ridden the wave of cloud-based tools, growing in power over the last few years. CodeSandbox is one of the more popular options in that space, and its usage has been increasing recently.

CodeSandbox is gaining popularity in social coding for its ease of use, simplified technology support, and reasonable cost structure — including free public sandboxes. In addition, CodeSandbox is an open source project.

Read on for an introduction to CodeSandbox and its capabilities. You’ll understand why it’s becoming so popular.

Hello CodeSandbox

CodeSandbox is best known as an environment for quickly spinning up and sharing front-end JavaScript apps. That sounds similar to CodePen and JSFiddle, but in fact CodeSandbox is a more ambitious project, with full-stack support almost comparable to a full-fledged online IDE like Cloud9 — albeit only for JavaScript.

CodeSandbox makes it very easy to share projects. For example, here is a link to simple static HTML sample. If you click this, your browser will open up the IDE sandbox, with a simple HTML greeting from InfoWorld, along with the InfoWorld logo — similar to Figure 1.

Figure 1. Basic sandbox

Notice that the system has generated a unique name for the project (“stoic-shaw-c9u57”). This is the persistent name for the project and is used for sharing and embedding. CodeSandbox has good embedding capabilities, including automatic support at Medium and simple iframing.

Fork the sandbox

Now let’s fix the InfoWorld logo’s size styling by forking the project and adding a stylesheet. Click the Fork button in the top right. This will create a new unique URL for your project, with the same codebase.

Make sure you are on the file explorer (the second icon down on the left-hand menu bar). In the Files pane header, click the Add Directory icon. Create a /css directory, then use the Add File button on the new directory to add an index.css file.

You can now add a CSS rule like Listing 1 to the css/index.css file, and import it into index.html as seen in Listing 2.

Listing 1. Adding a style

#logo {
  width: 90%;
}

Listing 2. Importing the stylesheet

<link rel="stylesheet" type="text/css" href="css/index.css" />

You can see these changes live here.

CodeSandbox templates

The previous simple excercise should give you a sense of CodeSandbox’s capabilities, but also introduce you to a chief way that you get access to code on the platform: via URL shares. The next primary way is via creating a new project using Templates. Let's get a look at that next.

In the top-right, click the Create Sanbox button. This will get you a dialog similar to Figure 2.

Figure 2. The Create Sandbox dialog

You can see that the dialog is offering you templates to use. You can find even more community-created templates (as in thousands more) by selecting Explore Templates. And you can import templates from GitHub with the Import Project option, which you’ll see in a moment.

For now, just use the Create Sandbox option, and type “Svelte” in the search box. This will offer up the official Svelte template from CodeSandbox. Select this template.

Notice that the layout of the CodeSandbox IDE is flexible. Most panes can be resized, the text editors support split-view, and a variety of layout options are available under the View menu. You can use these options to customize the layout to your tastes.