FAQsEdit this page
Answers to questions about CodeSandbox that come up the most.
We also have container templates for: Node.js, Angular, Adonis, Gatsby, Marko, Nuxt, Next, Sapper, Apollo, Ember, Nest, Styleguidist, MDX Deck, Gridsome, Quasar, and Vuepress.
You can set a sandbox as private in two main ways: From the editor, change the privacy setting from the Privacy drop-down under Sandbox Info, and from the dashboard right-click and select make private.
Note that a Pro subscription is required to make sandboxes private or unlisted.
There are a few possible reasons a repo might throw that error on import. The
most common are either a lack of a
package.json file, or the project using
more than 500 modules (files). If you think it's something else, or you're not
able to solve this yourself, then get in touch
and provide a link to the repo you're importing and we can look into this for
For performance reasons we ignore any specified scripts in client sandboxes, instead using a default script. If you need to control the scripts, then we recommend using a container sandbox.
Container sandboxes run Node v10.20.1 (LTS) by default. While this system version can't be changed, you can instead make use of the node package. Add the version of the node package you would like to use to your sandbox in the same way you would any other package. Then update the path to node you use to make use of this local version of node instead of the system version. Here's a working example.
Yes, the terminal, console, and problems tabs are all draggable. Click on the tab and drag it up into the bar alongside browser and tests. You can then re-order those items by dragging them in that bar. Whichever is 1st from left to right in the list of tabs is what opens first when other folks view the sandbox. The ordering is maintained within the sandbox. You can also achieve this change by setting a value for "view" in a sandbox config file.
Ensure the font you want to use has been installed on your computer, then put the name of it first in the comma-separated list under 'Editor: Font Family' from File > Preferences > Settings in the editor.
- A sandbox cannot use more than 500 modules (files). Note though that
node_modulesand dependencies are not counted towards this limit.
- Imported sandboxes must contain a package.json file.
- The maximum file size that can be opened in the editor is 2MB. Files uploaded that are larger than that still exist but are linked as a static asset.
- The maximum file upload size is 7MB. If you need this raised, please email us with your username and the typical type and size of files you want to upload.
- In container sandboxes, there is a sync limit of 10 files per second and only files up to 2MB are synced with the editor. Files larger than that still exist but are not shown in the editor's file tree. You're still able to write and read to and from them in your code code and they can be seen and edited via the terminal.
- Terminal commands which alter the filesystem of the container instance aren't synced with files shown in the editor. You'll need to refresh to see files updated this way.
- Container sandboxes sleep after around 10 minutes and can be woken by opening the sandbox or preview in a web browser.
If you encounter this error when importing or committing, check your sandbox or repo for large binary files and remove them.
Yes. Container sandboxes on CodeSandbox have a persistent filesystem, so you're able to use file-based database options like SQLite, Lowdb, and NeDB. For more powerful databases, like MongoDB, MySQL etc. we recommend using a third-party host, like MongoDB Atlas, and interacting with them via an API/SDK.
You can change the theme from File > Preferences > Color Theme in the editor.
You can also set a custom VS Code theme. Open VS Code, Press (CMD or CTRL) + SHIFT + P, Enter: '> Developer: Generate Color Scheme From Current Settings', copy the contents and paste it into Preferences > Appearance from the top-right avatar menu. After completing that you need to reload the browser and select "Custom" as your color theme from File > Preferences > Color Theme.
While we do have infinite loop protection as a
configurable option it doesn't
prevent all scenarios where infinite loops can occur, such as with incomplete
code. When this happens, you can append
runonclick=1 to the editor URL to stop
the code from being automatically executed enabling you to edit your code to
resolve it. For example: