How can I download and edit my sandbox?

If you want to edit your sandbox offline, you can download it into your computer and use a code editor.

This is how you can download your sandbox:

  1. Go to BSD Online and log in to your account.
  2. Go to “Your portfolio”.
  3. Select and open the sandbox that you want to download.
  4. The sandbox editor will open. From the window, click the share icon to see the options.
  5. Click the “Download” button.

You can watch the following animation to see how it is done:

The archive file (.zip) will be downloaded to the default download location of your computer.

Now that the sandbox is downloaded. You will need to extract or decompress the archive file.

To unzip or decompress the archive, follow the following steps:

For Windows PC

  1. Locate the zipped folder that you want to unzip (extract) files or folders from.
  2. Right-click the folder, select Extract All, and then follow the instructions.

Source: Zip and unzip files, Microsoft Windows Support

For Mac OS

  1. Locate the .zip file.
  2. Double-click the .zip file.

Source: Compress or uncompress files and folders on Mac, macOS User Guide

For Chrome OS

  1. In the corner of your screen, select the “Launcher” then click the “Up arrow”.
  2. Open “Files”.
  3. Double-click the zipped file. On the left, you’ll see the zip file.
  4. To open an individual file, double-click it.

Source: Unzip a file, Chromebook Help


Below is an example of unarchived or decompressed file:


Once extracted, you will open or edit the file using your code editor. Following are examples of code editors that you can use:

  1. Sublime Text
  2. Atom
  3. Brackets

Here’s how it looks after you open the .zip file in Sublime Text (code editor):


Don’t forget to save your work if you are customizing your sandbox. For Sublime Text, you can save you work by the following these steps:

  1. Click File.
  2. Click Save.
  3. You can also use Ctrl + S (for Windows) or If you want to edit your sandbox offline, you can download it into your computer and use a code editor.

To view the output, double click the index.html file (or open the said file using your browser like Google Chrome or Safari).

Every time you make any changes from the code, you can see the changes by reloading or refreshing your browser. (for Mac OS).