Console Upgrades

Our console input received a big upgrade thanks to the work of Xiaoyi Chen (also the author of react-inspector). You can write multiline commands and now we also syntax highlight and autocomplete your inputs!

Syntax highlighting, checking and multiline commands

Rewrite to Cerebral

When we released CodeSandbox I got in touch with Christian Alfoni, the author of Cerebral and WebpackBin. We started working together on many different projects, and eventually started toying with the idea of converting CodeSandbox from Redux to Cerebral. Christian started working on this about three months ago, and it’s finished now!

The start of the rewrite in October!

We now use Cerebral for state management, backed by Mobx State Tree. This gives us the declarative functional composition of the CodeSandbox application logic and typed observable state values for optimal rendering out of the box. It has resulted in more performance and a reaaaally nice debug view!

The debug view looks reaaaally nice

During the rewrite we also took the opportunity to implement several new optimistic updates for a smoother user experience.

You can read more about the complete rewrite here:

Configuration Support

Our stance on configuration is quite simple; configuration means that the program is too stupid to determine what the user wants. Oftentimes you can satisfy 90% of the user preferences without configuration.

However, there is still the other 10%, CodeSandbox as an application is a good example of this. That’s why we are introducing official support for configuration files. Depending on the template, you can configure several aspects of your sandbox. The configurations we currently support are: package.json , .prettierrc , .babelrc , sandbox.config.json and .angular-cli.json .

Single Source of Truth

We previously saved dependencies, titles, etc. separately in our database. When you’d import a sandbox from GitHub we would get every relevant field from the files and save them manually in our database. This creates friction: when you add a dependency we need to manually update the database and update package.json .