Announcing CodeSandbox 2.5

It’s February and high time for a new big update for CodeSandbox! We’ve been very quiet the past month, but we were not sitting still. This update is with new features, I believe this is the biggest update to date, by far. And the best part is that many contributors helped with this update! packed We have more than 20 new features, a redesign and a rewrite to show, so we better get started! New Editor Design As time passed by our UI became more and more cluttered. We lost simplicity for feature abundance and oftentimes it was hard to navigate and find the right button. We absolutely don’t want this and used this as an excuse to go on a spiritual trip and redesign the editor 👨🎨. Again, like the homepage, we received a lot of help from , props to him! Danny Ruchtie The new editor, in its full glory Sidebar A big improvement against the clutter is our new sidebar, inspired by . We now categorize all functionality under their function: Project Info, File Explorer, Deployment, GitHub and Configuration Files. The sidebar is only enabled when you’re looking at your own sandbox. Visual Studio Code The relevant items are behind the corresponding navigation Edit/View Mode We noticed that a lot of functionality was only really useful when you were editing your own sandbox. That’s why we decided to have a separate ‘View Mode’. This mode only shows the sandbox info, the files and the dependencies. View mode highlights the information that’s useful for viewers Floating Preview We’ve upgraded the preview by making it float! You can use the preview now as a window: you can resize and drag it anywhere. This makes it easier to do mobile development: you can resize the preview window to a phone size. This also allows for vertical split between code and preview. You can put the preview wherever you want, you also see the size of the preview while you resize Console Upgrades Our console input received a big upgrade thanks to the work of (also the author of ). You can write multiline commands and now we also syntax highlight and autocomplete your inputs! Xiaoyi Chen react-inspector Syntax highlighting, checking and multiline commands Rewrite to Cerebral When we released CodeSandbox I got in touch with , the author of and . 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! Christian Alfoni Cerebral WebpackBin 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: _Codesandbox.io is an online code editor that allows you to write and share code for modern JavaScript and popular…_medium.com Lessons learned refactoring Codesandbox.io from Redux to Cerebral Configuration Support Our stance on configuration is quite simple; . Oftentimes you can satisfy 90% of the user preferences without configuration. configuration means that the program is too stupid to determine what the user wants 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: , , , and . package.json .prettierrc .babelrc sandbox.config.json .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 update . and package.json From this update on we make the files our source of truth for almost all data, this means that sandbox data is parsed from and other relevant configuration files live in the editor. We add this retroactively; when you open a sandbox we automatically generate a if it doesn’t exist. package.json package.json The dependencies update live as you update package.json Configuration UI We are of the opinion that UI can be far more intuitive than code. That’s why we aim to interfacivize (if that would be a word) all configuration files. We show a UI which you can use to generate code for the configuration files. We still allow you to switch to the code, if you want more control 😉. We don’t have a UI for all configurations yet, but we show custom autocompletions for those configurations. Use a UI to configure your files Babel Plugin Support A much requested feature was custom babel plugins support, not only the official ones, but also community plugins. We now allow the configuration of in the template and will soon enable this in and our upcoming ‘ ’ sandbox. A cool addition to this is that we support the interface. This is especially useful for babel plugins like . Go ahead and try it! .babelrc Preact Vue Custom fs [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval) Live in action! It’s still a bit rough, sometimes you need to hard reload to see changes. Advanced babel plugins like that use are currently in beta. We will streamline babel plugin support over the coming weeks, with a custom UI to search for plugins and the ability to create and select presets. babel-plugin-macros fs Sandbox Configuration You can now configure your sandbox using . You can find more documentation about . sandbox.config.json sandbox.config.json here Configuration options Angular Template Official Angular support was an often requested feature from day one. We now officially support Angular templates, including the corresponding file that comes with it! angular-cli.json Give it a try here: Or open it in the new editor! Native Jest Support We now have Jest support, mainly thanks to ! Gautam opened an for Jest integration about 2 months, and about a month later he opened a PR with a version that already could run all tests of the redux examples. Gautam Arora issue The past week I’ve been working a native UI for Jest that fits with our redesign, and I’m really proud of how it turned out. I took inspiration from and . Let’s see what it looks like. majestic storybook You can find tests next to the console, this is a view with some errors As you can see the files with tests are in the left navigator. When you select a test file you get the details of that file, including statuses and eventual errors. This is how you can interact with the tests We automatically watch all test files. If you change a file we will only rerun the tests that require this file, either directly or indirectly. We also support snapshot testing, though we’re still working on the possibility to save new snapshots. Snapshot reading working! I’m really proud of the integration with Jest, and it was only possible because the Jest team did an job by . We just cherry picked the packages that we needed to make Jest work in the CodeSandbox! example is a good sandbox to play with Jest support. incredible publishing all their functionality in separate packages The Redux TodoMVC Note that this is not fully native Jest, we don’t support writing snapshots, manual mocks using the directory and Jest configuration yet. We will add this soon though. __mocks__ CodeSandbox Bundler Upgrade I did some upgrades to the bundler of CodeSandbox, the most notable improvements are caching and an official HMR API. Compiler Cache After every successful bundle we cache all relevant transpilation and files in IndexedDB. When you refresh the sandbox you only need to actually evaluate all the files instead of doing transpilation etc. This results in very fast initial load times, as you can see in this GIF. Near instant reloading! Hot Module Reloading API We also now have official HMR support (finally!). You can use the API like in Webpack, this is useful for when you want to preserve state between runs for example. We also added official support for the HMR API in our Vue loader, this means that Vue gets proper HMR out of the box! module.hot Using HMR together with Redux to hot reload its state Vue Example: edit the template or the styles and see that the state doesn’t change Updates You Might Have Missed We’ve had many updates recently. Here’s a quick recap of some changes that happened in December: Zen Mode Zen mode hides all distracting elements, therefore it’s perfect for presentations and course videos. You can enable it in preferences or by the keybinding. Zen Mode enabled Keybinding Support You can now set up custom key bindings for actions in CodeSandbox! Quick Actions Quick Actions can be activated with (CMD/CTRL)-Shift-P and will show this as popup: Just type and select! It allows you to quickly active actions without touching your mouse or remembering a key binding. CodeSandbox Documentation To answer questions or explain CodeSandbox concepts we now have an official documentation: _Welcome to CodeSandbox! This documentation serves as a way for you to learn what CodeSandbox is, how to use it and what…_codesandbox.io Documentation — CodeSandbox You can follow either CodeSandbox or me on Twitter to keep up to date with any changes. We also keep a changelog here: https://codesandbox.io/changelog. _The latest Tweets from CodeSandbox (@codesandboxapp). Hello from CodeSandbox! An online editor tailored for web…_twitter.com CodeSandbox (@codesandboxapp) | Twitter _The latest Tweets from Ives van Hoorne (@CompuIves). Creator of https://t.co/o00zRDhu57, software developer at…_twitter.com Ives van Hoorne (@CompuIves) | Twitter What’s Next Oh well, that was a big list of changes… The coming week I will concentrate mostly on my talk at and fixing any bug that may pop up. However, we do have some exciting plans for the coming time! Vue Amsterdam Custom Template We have support for many transpilers right now, but there is no template that supports all of them. We’ve seen that users want to experiment with different things like babel plugins, but don’t want to tie their sandbox to a template that’s not related to their project. That’s why we’ll implement something called a Custom template in the near future. I’ve already done some work on this feature and wanted to release it with 2.5, but ran out of time. Bottom line is, it should be done soon 😃. Hosting Migrations We have grown a lot since we started. We want to have more scalability, so we will move our hosting over to Kubernetes. We are also starting a big project that will start this February and will continue for the coming 3 months. I can’t give any details on that project yet except for saying that it’s an exciting change. Thanks This update received a lot of support from contributors of CodeSandbox. I’m really thankful for all the work from others, and I’d like to especially thank , , and Gautam Arora for their work and support on this update. Bogdan Luca Christian Alfoni Danny Ruchtie Thanks to this list of contributors! Want to get involved? We’re 90% (soon 100%) open source! We welcome any help with open arms. If you’re interested in helping out, I recommend you to check out our repo for the website: _codesandbox-client — An online code editor tailored for web application development 🏖️_github.com CompuIves/codesandbox-client If you want to chat, we have an active Discord server here: _Step up your game with a modern voice & text chat app. Crystal clear voice, multiple server and channel support, mobile…_discord.gg Discord — Free voice and text chat for gamers Also, if you would like to support CodeSandbox financially, you can become a ! CodeSandbox Patron