A New and Improved Editor Powered by VS Code Web
We have combined the best pieces of VS Code and CodeSandbox to bring you a new editor experience.
With CodeSandbox, you can turn your repository into a shareable development environment that's available 24/7. Give it a try with this Next.js example or import your GitHub repo!
A code editor fundamentally defines our flow while coding. Ever since CodeSandbox was born, our web editor has been a central part of our quest to facilitate the best developer experience.
Over the years, it has gone through multiple iterations, as we aim to make continuous improvements to make coding in our platform as smooth as possible.
Today, we are launching an editor that combines the best pieces of VS Code and CodeSandbox. This editor integrates the CodeSandbox productivity tools you know and love and effectively marks the deprecation of the original CodeSandbox editor.
In search of the perfect balance
As a team of software developers building a development tool for developers, we inexorably seek ways to create an experience that delivers as much value as possible to our users.
As we built CodeSandbox CDE, we wanted to capitalize on the potential of cloud development by creating our own opinionated development flow with a minimalistic yet powerful editor that zeroed in on collaboration.
While this produced exciting results, it came at a significant cost to our users: requiring a transition to a new IDE.
Most software engineers have fine-tuned their own IDEs, relying on code extensions and customizations to maximize their productivity. While we did provide a performant integration with VS Code Desktop, the majority of our users are looking for a powerful and familiar coding experience right from their browser.
Seeing VS Code Web as an excellent standard for in-browser productivity, we completely overhauled our editor on top of this technology, integrating it with our unique set of tools to deliver an integrated editor experience to go the distance.
A new editor you already know
The web editor looks and functions as VS Code for the web, with a few built in CodeSandbox tools.
The activity bar holds all the tools for managing your developer experience. The web editor will always contain the standard VS Code tools, namely the File explorer, Search, Source Control, Run and Debug and the Extension marketplace.
The web editor also comes with a CodeSandbox DevTool extension that provides access to all the unique CodeSandbox features (more on that later).
In the terminal panel, you can see all the running tasks, any private terminals as well as shared terminals (managed by CodeSandbox).
While the layout is entirely customizable, the standard layout opens previews, and support tools like documentation and setup tools in the right editor panel.
Things to know when switching over
In case you’ve been working on CodeSandbox before and haven’t had the chance to try the experimental version of VS Code Web, it may take a minute to get used to our new editor. So here are a few things to consider.
First, all CodeSandbox DevTools, such as previews, tasks, and shared terminals, are now nested under the “CodeSandbox DevTools” panel on the activity bar. From there, you can manage all these DevTools when needed, but most of these actions will still be performed automatically, just like before. For example, if your project has a task configured that runs the dev server on VM startup, it will automatically open the preview for you when you open the project.
One thing to be aware of regarding terminals is that they now come in two flavors: private terminals powered by VS Code Web and shared terminals powered by Pitcher (a CodeSandbox service). This way, you can choose the terminal that best suits your needs.
Finally, this update might blur the lines between using our web editor (powered by VS Code Web) and our extension for VS Code Desktop. While most of the functionality between these two editors is identical, there are some differences to be aware of, which we outline in our Docs.
Thank you
Getting here has been a long journey of discovery and iteration, only made possible by the feedback we’ve received from hundreds of our users.
Looking back at these past few years, it has been a thrill to grow our editor with our community and reach a performant, stable version that will continue to empower people to code and collaborate for years to come.
Feel free to try out the new editor and, as always, reach out to us on our community platform if you have any questions or suggestions!
