Since we launched in Public Beta last week over 2.2K new developers got active on using it. The feedback so far is really great and this keeps us going. Thank you so much for everyone helping us making the product better week by week.
So for this week we also have a few updates we want to share.
We improved the List View on the Dashboard to be more straightforward and better organized
You can now rename the active branch through the Command Palette (one less click in the UI 🎉)
Your contribution branches now appear under your personal projects. Open Source contributions for everyone.
We'll automatically stage git changes if the container needs to be restarted
You can now search in folders through the file explorer context menu
Fixed a bug where usernames with special characters could sometimes not create new unix shells.
We further reduced the time for memory Snapshots (which is important for our branching approach). For example, 4 GB Snapshot takes now ~1 second, and a 1GB Snapshot is below the 500ms mark. Branching will get faster and faster as there is still work to be done.
Till next time 👋
CodeSandbox Projects is now in Open Beta
This is an incredibly exciting week for us. We've worked really hard over the last couple of weeks to make this a reality. We got a lot of invaluable feedback from our closed beta testers. and in the last couple of months, the product has come a long way. Now we can share it with the world and are beyond excited about this one.
If you want to learn more about the release itself, we recommend checking out the release blogpost Ives wrote.
Besides this we have also overhauled our Documentation for all systems. You can now access the following documentation pages:
A dedicated page to allow quick switching between the documentation is incoming. We focused on getting it all out in time and want to open it for contributions as soon as possible.
With the public beta release, we have also released our GitHub App to create a more seamless experience for all our users. Please check out the documentation.
If you have used the CodeSandbox Workflow in the past, please make sure to remove that one from enabled projects to avoid unexpected behavior. Using the app will allow us to post automatic preview links on PRs and in we'll be able to improve the CodeSandbox Dashboard performance and more, thanks to optimized data transfers that are just not possible with the default API.
We've also rolled out a few changes to our infrastructure. We've further improved our VM branching. Forking now works within a 2 second timeframe and you'll get an exact copy of the moment you clicked fork. See it in action in this video:
and on top we made various internal improvements in our graphQL API and usage to get faster queries, as we'll constantly look at optimizing performance for all our users. There's a ton of other little things we shipped, but
That's it for this week. Let us know on Twitter about your experiences with using CodeSandbox Projects. If you are curious how our team uses it, here's an excellent Thread written by our very own Alex Moldovan.
Here's a summary of the last two weeks. We've been busy. Lets dive right into it:
Always on previews
You can now access preview URLs even if the VM behind it got hibernated and don't need to wait for it to wake up. It will then seamlessly start the VM if needed again.
Get a UI notifcation when setup-tasks are completed
Fixed the invalid taskId object reference that would sometimes show up
Replaced “Create a Branch” with “Go to Branch” in the Repository tree view. You can now switch to any existing branch or create a new one within a single flow.
Introduced “Go to Repository” and “Go to Branch” commands to quickly switch between all your repositories or all branches within the currently active project respectively.
The project’s default branch is now marked with the label “Default” in both Repository tree view and when selecting branches in the “Go to Branch” quick pick window.
You can create a new branch much faster now due to the improved branch prompt.
Fixed an issue where “Import Project” context menu option would appear on irrelevant menus.
More reliable feedback when clicking "Open in VScode" and something is not working as expected
Fix issue with VSCode asking for a password sometimes if the users' name was not defined during the git setup.
Other improvements, Fixes, and additions
Prompt GitHub scope updates if needed
You can directly fork a project if you do not have write permissions
Branching always takes you to the same file you were just looking at
Reorganized the Context Menu to avoid confusion. For example
Discard all (n) changesare now next to each other to not click the wrong one by accident
Improved the 404 page
Restarting a shell task now properly terminates the previously running task if possible.
We disabled git-access for read-only branches.
Don't show "Open PR" for read-only branches.
Get a generative gradient icon when the user didn't upload an avatar in the team settings.
Fixed a critical bug that could corrupt the VM and would force a reimport of the project.
Limited branch name length to 80 characters as sometimes GitHub would refuse to create branches through the API with too long names
And actually, a lot more happened in these weeks. Easily some of our most productive weeks in recent memory. But ... the coolest things are still on the very close horizon. So stay tuned!
Your CodeSandbox Team
Sandpack React: support add file method #512.
Global-listeners on React package: doesn't unsubscribe all listeners on unsubscribe only one #516;
Sandpack client: make template prop type-safe #504;
Sandpack React: make sure the Sandpack context reacts to prop changes and recreate all states #498;
Code-editor: improve the integration between the inline-error option and Codemirror #495;
File-explorer: adds a property to not show hidden files #488;
Theme: set color-scheme CSS property in theme context #491.
This week we released a lot of new iOS stuff so let's start with that right away:
Filesystem saw many improvements and now supports drag & drop of files and directories to move them around as needed. See it in Action here on Twitter.
Binary files can be uploaded with ease (and drag & drop)
Updated copy change around "forking" branches
Fixed crash compiling React Native apps with an entry point different than index.jsx.
We now support renames
You can now change default branches
There's now PHP, Lua and Shell Script Syntax Highlighting
We also worked a lot on Backend stuff, from updating our Elixir version to a bunch of data migrations on some tables for the next big thing we are cooking up. Hope to share more about it soon.
See yall next week.
Huh... where was week 23? Good that you ask. So here's a little insight into how CodeSandbox Team operates currently.
We try to run a 4-week cycle where the first 3 weeks are discovery and implementation continuously and the 4th week is a "cool-down" week where we try to tie up all loose ends. For example, we write and finish documentation that is missing, evaluate the success of the last few weeks, and so on. We also did this 4 week cycle for the first time in the current structure and we did not ship anything noteworthy in the last week but planned and discovered a lot. So there is much more to come in the future. Overall we're learning and iterating and these weekly releases are what we always focus on getting better at.
On to more fun things as there are cool things to share:
Drag and Drop File Upload
Nothing prevents you anymore from uploading files with one little drag to your project and it gets uploaded in seconds (depending on filesize 😉). Made a neat little Demo for yall.
Better Framework Support
Many Frameworks like Vite, Remix, Solid and more are making sure your code runs perfectly in all conditions. So far it always needed a little bit of manual configuration to get them running in Projects because of how they interact with localhost to show you the latest changes. Luckily we were able to build something to make that obsolete. Now, these projects work as expected in CodeSandbox Projects without extra configuration and can shine. We should make a blog post on this as it's pretty cool.
Other Changes and Fixes
We fixed some performance issues around the LSP implementation
Fork is now called Branch - let us know if this is less confusing
Dropdown menus no longer hide content outside the window by accident
Better Error handling and messaging throughout the import flow
That's all we can share this week, but there's much more to come. Stay tuned.
As some of you may know, one of the exciting new technologies we use to build the experience that we envision for CodeSandbox Projects is Firecracker. This has not been done before in the way we are using it, so there's a lot of experimentation and innovation happening. The good news is - we got it to a state that all new Projets created will run on Firecracker by default and we'll migrate other projects over in the near future.
This is an exciting update because Firecracker allows us to do new things. It's faster branching and faster (sometimes instant) bootup times for running dev servers. We are working on a full blog post for this topic because there is soo much to share. For now, let us share some other highlights from last week:
More Storage by default
Projects now have 6GB (4GB previously) of storage by default. We've seen quite some improvement when it comes to VM size and extra storage, so we've bumped this up for the extra space and comfort.
Alright, this is actually the result of some feature-work we titled "memoize router", but the result of this is a higher FPS count in our Editor as there are fewer refreshes and that is what counts. We'll always keep an eye on this FPS for your snappy Editor feeling and anything we can do to make it fast we'll tackle regularly to make sure the experience is great.
Tasks now have a proper status shown next to them right in VScode. No more guessing which of them is running or not.
CodeSandbox for iOS
Our Mobile Team (it's the one and only Carlos) is hard at work on all days.
You'll now find LSP diagnostics output directly in your editor on mobile, and it's really great. Instant feedback on your JS code, if it's all looking correct, is an amazing feature to have to avoid little oversights.
Improved Code Completion Performance by 0.2 seconds (it actually feels faster, I swear)
That's all for this week. So long, all the best from your
showOpenInCodeSandbox: pass prop to loading component (#486);
React.useIdwhen available, getting ready for React 18 (#461);
CodeEditor: check if error message has a valid position (#466);
CodeEditor: any change on read-only props wasn’t remounting the component (#456);
Sandpack-context: make sure that the method
updateFiletriggers all clients (#455).
It's the first weekly update now ... yay 🎉 - it's also a pretty short one. We did a lot of discovery and discussion last week on some bigger issues we are tackling now, so there are only a few things to highlight. As always we also address various little bugs and quirks along the way but won't highlight them here unless it's really worth sharing. Well here we go:
Since the launch we had Read only branches which defaults to a main branch, so people don't alter this branch by accident for everyone and only forking would be possible. Based on feedback and more usage we also added Protected state which gives people more ways of interacting with a branch if you have write access.
Discard Multiple Changes at once
With our Git Sidebar we offer a nice way to create commits but discarding changes was limited to one file at a time using the context menu. Now you can select and discard the changes for multiple files at once without using the Terminal.
Copy relative file path
We shipped a super handy functionality to our Editor where you can now easily copy the relative file path for any file from its context menu.
Projects Dashboard Cleanup
We cleaned up various interaction hover effects on the Projects Dashboard to make some interactions clearer and squashed some other bugs along the way.
CodeSandbox for iOS
We are also busy on this side. We get a lot of really good feedback from users, but sadly most of the cool changes are only usable by people in the beta (Open Beta soon?) -- regardless we fixed some bugs and rolled out some little updates also when it comes to .env file handling on iOS. The new version is already in review and should land on all iOS devices within this week.
Also, did you know you can subscribe on this page to our updates? This will send this nice little weekly overview directly to your inbox and you won't miss anything.
Your CodeSandbox Team.
It’s been a couple of weeks since we announced CodeSandbox Projects and we couldn’t be happier about the feedback and input we got from all of you. There are 10K+ signups for our waitlist and we’ve been busy at adding more and more people while addressing all the feedback we got.
First of all, a big thank you from all of us at CodeSandbox. 🙇
Here are a few highlights of what has changed over the last few weeks:
You can now seamless drag the size of the file explorer or the DevTools area and toggle their visibility with the Command Palette.
Better Code Highlighting
We rolled out various changes and improvements to our custom CodeSandbox Syntax Highlighting Theme and even released a VSCode Extension due to the positive reception.
Highly requested and ready for you to use. It’s the first iteration of this feature and we’ll add much more to it, but take it slow to make sure security is all tight and in place.
GitHub Action Support
You can now install a GitHub Action for your project to receive automatically created messages with links to the Branch Previews and running code in your PRs where you most need them.
Binary Files Support
We can now show images and other file formats in the editor. We’ll add more special functionality for various file formats in the future.
PR Review Improvements
Whenever you open a PR within CodeSandbox, you can now see what files have changed and see the diffs by clicking on the files in the sidebar.
There's a new button in the sidebar (under the git panel). This button installs a GitHub Action that will automatically add links to a live running environment on CodeSandbox for every new PR.
You can now start collaborative terminals, tasks, and previews right from within VSCode!
Properly comment out
Tasks can now be run from the Command Palette and UI alike.
Better auto-discovery for newly imported projects to get your project running without extra configuration in many cases.
Many projects have been ported over from Kubernetes to Firecracker and this brought many performance improvements across the board, from faster loading times to quicker branching.
The Dashboard now loads faster as we optimised the initial load and data we poll from the GitHub API, especially for bigger projects.
Draft Branches now only get created on CodeSandbox and are only pushed to GitHub when you actually commit changes, reducing the initiation time of new branches.
Various Bug fixes
We are never happy if things don’t work as expected so we squashed a lot of annoying little bugs.
It’s now easier to self-invite new users to your teams and let them experience CodeSandbox Projects as part of your team.
… and so much more that we can’t even list all stuff here in a readable way. This is also the reason why we kick off weekly Changelogs now. There’s so much happening here every week and we’ll also keep you posted about it on a weekly basis.
Oh … and have you seen we released CodeSandbox for iOS?
Your CodeSandbox team.