DEV Community: CodeSandbox

Inside the Box: September Community Update

Filipe Lima — Tue, 15 Oct 2024 17:43:57 +0000

Hi there 👋

We are back with a fresh "Inside the Box" issue to keep you updated with the CodeSandbox highlights from last month.

Let's dive right in!

Latest Product News

New status page & improved error messages 🚨 — We have received lots of feedback about our error messages and we hear you! So, we have introduced a new detailed status page and improved our error messages to display relevant system status details.

Sandpack accessibility improvements to the file tab bar 🙌 — Sandpack is now more accessible! This update improves focus management and ensures interactive elements are keyboard accessible and visually highlighted when focused. It also brings adjustments to the tab button structure and keyboard controls for better usability. Huge shoutout to shrilakshmishastry for contributing with this PR!

Tons of improvements and bug fixes 🐞 — After our big editor changes, September was a significant consolidation and retrospective month. We shipped dozens of UX improvements and bug fixes that resulted in better stability and performance across the board.

Full changelog 📜 — For a comprehensive list of all other improvements and fixes we released last month, check out the full changelog!

Web Bytes

Napkins & Sandpack 🤝 — Once again, we were thrilled to see Sandpack in action in napkins.dev, a tool that uses AI to transform a wireframe into a fully working app. Kudos to @nutlope for bringing these open-source tools to the community!

Three.js Wiggle Bones Starter 🦴 — We always love seeing new Three.js examples! This Devbox by @xmliszt invites you to start wiggling with this Three.js library.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: August Community Update

Filipe Lima — Thu, 12 Sep 2024 15:54:47 +0000

Hello hello 👋

We are back with a fresh "Inside the Box" issue to keep you updated with the CodeSandbox highlights from last month.

Ok, let's go!

Latest Product News

New & improved template picker 🔥 — Now, we show a single modal that combines all our templates, making it easier to find the ideal language and runtime for your project. You can combine our filters to find anything in seconds. Check it out!

Sandpack static file support 🖼️ — You can now serve static files inside a Sandpack instance! This beta feature allows serving SVGs, fonts, images, and much more, which helps take isolated, interactive code examples to a new level!

Deprecated the legacy editor 👋 — After 7 years, we have officially deprecated our original “v1” editor, which is now replaced by our new editor powered by VS Code Web.

Full changelog 📜 — For a comprehensive list of all other improvements and fixes we released last month, check out the full changelog!

Web Bytes

LlamaCoder & Sandpack 🤯 — LlamaCoder, by @nutlope, is one of the most exciting projects we've seen in a long time! It uses Llama 3.1 and Together AI to generate full React apps and components based on a prompt, and then uses our very own Sandpack to display the generated code in seconds in a live playground.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: July Community Update

Filipe Lima — Thu, 08 Aug 2024 15:46:42 +0000

Hi there 👋

We are back with another issue of "Inside the Box," a summary of the CodeSandbox highlights from last month.

Let's jump right into it!

Latest Product News

New editor powered by VS Code Web 🔥 — After additional testing with thousands of beta users, we have officially rolled out our new editor powered by VS Code Web. Our biggest editor overhaul in years combines the familiarity and extensibility of VS Code Web with the power of CodeSandbox DevTools. For now, you can revert to the old experience by clicking “Disable VS Code Web” at the editor's top right.

New & improved Test Runner 🧪 — Many of our users have relied on the tests feature of our legacy editor for educational purposes and prototyping new features in isolation. Now, it's available in our new editor and has some improvements like test auto-detection and pinning.

Major overhaul of the Docs 📄 — With the launch of the new editor, we saw the perfect opportunity to bundle a series of updates to our Docs. We have added and updated documentation pages for the main product flows and freshened up our FAQ with questions our community shared over the past few months.

Full changelog 📜 — Last month, we also shipped several improvements and fixes to the CodeSandbox experience. Have a look at the changelog!

Web Bytes

node:sqlite running in CodeSandbox with Node.js nightly 🚀 — For all the Node enthusiasts out there, don't miss this Devbox by @karlhorky, made possible by @cjihrig (node:sqlite) and @GNUmanth (node-nightly).

How We Improved Our Workflows by Dogfooding Our Platform 💡 — We have been hearing good things from companies embracing cloud development, which reminded us of this excellent blog post by our product engineer Alex Moldovan. It describes some engineering breakthroughs our teams experienced while coding in the cloud. Worth a read!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: June Community Update

Filipe Lima — Tue, 09 Jul 2024 12:16:42 +0000

Hey there 👋

Welcome back to "Inside the Box"! We've packed this issue with all the best bits from last month.

Enjoy!

Latest Product News

VS Code Web editor (beta) 🌟 — After several weeks of testing and iterations based on feedback from users who tested the experimental VS Code Web editor, it is now available in beta to everyone! To enable the beta editor, click the “VS Code Web” button at the right of the editor's top bar.

Several editor improvements 🔧 — As part of the rollout of the new editor, we're improving its overall stability and developer experience. If you need your shared URLs to open in the legacy editor, you can use a ?editorMode=v1 query string in the address bar. You can also access the legacy editor by disabling 'Unified platform editor' in the Experiments tab of the User Settings.

Full changelog 📜 — Want the inside scoop on everything else we've been working on? Head over to our website and check out the full changelog – it's got all the details!

Events & Community

JS Nation Amsterdam — "A full house" doesn't even begin to describe the packed audience that gathered for our very own product engineer, Alex Moldovan, at JS Nation. His talk, "Lessons for building resilient codebases," was praised both for its content and delivery.

Photo: JSNation, Twitter

Sandpack Spotlight: Kempo — Our community project highlight of the month goes to Kempo, a tool to build your code playgrounds using Sandpack. Kempo's approach makes it even easier to display live-running code examples, especially in content platforms like Hashnode.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: May Community Update

Filipe Lima — Mon, 10 Jun 2024 18:27:48 +0000

Hi there 👋

With a new month upon us, it's time for a fresh issue of "Inside the Box" with all of last month's highlights.

Let's go!

Latest Product News

Storybook add-on 🧩 — We're making every story come to life with the CodeSandbox Storybook add-on! After configuring the add-on on your Storybook instance, you will see a button to open that story in a Sandbox, which is great for design system teams and sharing bug repros.

CodeSandbox is now SOC 2 compliant ✅ — This milestone reflects how we handle and process customers' data securely, meeting key security standards.

Unlimited public Sandboxes 🚀 — After countless chats with our users, we decided to update our Free plan so it now includes unlimited public Sandboxes, 5 private Sandboxes and private npm.

Manual VM hibernation 🧊 — We have added an option to manually hibernate a VM from the editor's menu. This may be useful in cases where you want to immediately stop VM runtime.

VM credit spend meter 🧮 — We have added a UI element to the bottom left of the dashboard that displays VM credit expenditure in reference to the allocated quota. This makes it easier to monitor your spending.

Public VM templates for free — We have updated the logic of our public templates running in VMs so that their runtime is not billed to the workspace that created the template. This way, we're empowering everyone to create and share powerful templates with the community at no extra cost.

Web Bytes

How we scale our microVM infrastructure using low-latency memory decompression — If you have a knack for infrastructure, you probably don't want to miss this blog post by our Co-Founder Ives, who explains how we scale our infrastructure to handle 2.5 million microVM resumes per month.

JS Heroes 2024 — It's all good vibes after this year's JS Heroes conference, founded by our Product Engineer Alex Moldovan. Lots of familiar faces around and many demos run in CodeSandbox. A sight to behold!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: April Community Update

Filipe Lima — Fri, 17 May 2024 11:27:27 +0000

Hey folks 👋

How's May treating you so far?

We're happy to be back with the latest issue of "Inside the Box", an update on last month's highlights. Let's dive right in!

Latest Product News

VS Code Web & Extensions 🆚 — We've added support for VS Code Web as the default CodeSandbox editor! This experimental feature allows you to run and install VS Code extensions directly in CodeSandbox and customize your editor the way you like it. You can turn it on in Settings under "Experiments" (click on the CodeSandbox logo in the top left of the editor, then click "Settings" and go to "Experiments").

GitHub PR Extension — Alongside VS Code Web support, we now also enable the GitHub PR Extension by default. This makes reviewing PRs using CodeSandbox much faster.

Updated Dashboard & Workspace Onboarding 🌱 — Our dashboard now has a dedicated "Get started" section with useful tutorials, and new members are welcomed with a new onboarding to help us enhance their experience.

Create repositories from starter templates — Creating a brand-new repository in CodeSandbox is now much easier! In the dashboard you can pick from one of our starter templates and kick off a fresh repo to build your new project.

Automatic domain-based invites ✉️ — Now, you can create an organization and claim a domain in your workspace settings so that when a user registers with a matching email domain, they will see an option to join your workspace with a click.

Self-serve annual plans 🪙 — You can now directly subscribe to an annual subscription of CodeSandbox Pro, which brings 30% savings compared to monthly billing.

Web Bytes

What's Unique about CodeSandbox CDEs — If you've wondered how CodeSandbox is different from other cloud development environments out there, then don't miss this overview by Ives!

How To Use CodeSandbox with Your Design System — Ever since we launched CodeSandbox, we've seen several companies use our Sandboxes as part of their design system. So, we wrote a complete guide on the best ways to improve design system examples, documentation, bug repros, and more.

Making Impact work with React 19 📽️ — Excited about the release of React 19? So are we! So much so that our lead engineer Christian took a deep dive into how some of the latest updates impact... Impact! Also a nice chance to see what it's like to use CodeSandbox on your work projects.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: March Community Update

Filipe Lima — Tue, 16 Apr 2024 16:56:37 +0000

Hallo allemaal 👋 (Which is how we'd say "Hi everyone" back at our HQ)

Welcome to the latest issue of "Inside the Box", with a fresh update on all things CodeSandbox!

Keep reading for a short and sweet summary of the main highlights from March.

Latest Product News

New repository import flow 🔥 — CodeSandbox CDE is especially useful for working on your repositories. So, we have rebuilt the repo import flow from scratch, so that after you grant GitHub permissions, we automatically show a list of repos from your GitHub organizations that you can import with a click. You can also type an owner/name combination to quickly import any GitHub repo.

Annual plans 🗓️ — CodeSandbox Pro now has an annual billing option, which is especially useful for teams and companies looking for predictable billing. The process for starting an annual plan may take up to 24 hours for the time being.

Editing subscription add-ons ➕ — CodeSandbox Pro subscribers can now adjust their add-ons at any point through their workspace portal. All changes will take effect at the start of the upcoming billing cycle. Once a change has been scheduled, it may still be adjusted during the period before the billing cycle changes over.

Seamless git checkout 📩 — Now, running git checkout in the terminal clones the VM of the original branch. This seamless flow encapsulates the "one VM per branch" approach that makes CodeSandbox unique.

Web Bytes

Shared Composable State Stores Across Frameworks — In the latest episode of our "CodeSandbox Engineering" series, our engineers Christian and Danilo explored how a simple function combined with reactive primitives could be a shared pattern for shared composable state stores in any framework.

Golden tickets 🎫 — We have released 5 golden tickets into the wild, each worth 1 month of unlimited usage. Tickets are hidden behind 5 super-secret milestones in our CDE. Two have been found so far, but expect an email from us if you find any of the remaining three!

Community Spotlight

We love to shine a light on some of the best projects amazing people create using our platform.

Today, we want to highlight one of the most recent projects approved for our "CodeSandbox Friends" program: Rete.js—a framework for creating visual interfaces and workflows.

On their documentation, you will find several examples running on CodeSandbox (like the one shown below), making it easier for anyone to see a demo and fork it to CodeSandbox to start building.

If you're using CodeSandbox to work on licensed open-source software, developer community projects or non-profit organizations, you may be eligible for "CodeSandbox Friends". More details in our Docs.

Sandstorm animation — Find your mind continuously wandering off to sandy beaches ⛱️? Well, so do we! So it was a nice surprise to feature the impressive work from @xmliszt on our latest community spotlight ✨

We really love seeing what you build using CodeSandbox. So do share with us what you're working on or which insights you would like to hear from us.

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

PS: If you also find the expression "Hallo allemaal" pretty funny, then certainly don't Google it—you might end up playing this song in a loop for 3 hours.

Inside the Box: February Community Update

Filipe Lima — Wed, 13 Mar 2024 18:52:19 +0000

Hey everyone 👋

We are back with our February update!

"But wait," you ask, "aren't we halfway through March?"

And right you are! But let's just say that we've been so busy after the big CodeSandbox CDE release that we have just now got to writing this update.

So, let's get started looking at everything that's been happening in the CodeSandboxosphere.

Latest Product News

Simpler VM resizing 🔥 — Say you've been working on a feature branch in CodeSandbox CDE and have to run an especially resource-intensive task. Don't you wish you could give that VM some more juice for a few minutes? Well, now you can do it using the VM resizing option, right from the editor!

Team-based preview subdomains 🌐 — To empower a growing number of teams using CodeSandbox for their work projects, we have rolled out the ability to enable custom domains for previews. This can be helpful for cases like CORS "allow origin" headers, OAuth redirect URLs, and setting trusted URLs for forwarding requests. This feature can only be enabled on request.

Notifications for PR events 🔔 — Now, whenever a workspace has configured the CodeSandbox GitHub App integration, workspace members will receive Dashboard notifications for events such as PR review requests, approvals, requested changes, and more.

Better invite management 📩 — Adding and managing users in your workspace is now easier than ever! Now, you can edit workspace members directly from the editor's 'Share' modal. Plus, the workspace member overview now also shows pending invitations and pending requests to join a workspace (which can be managed by workspace admins).

Meet Us @ Events

Developer Collaboration in the Cloud — Coding in cloud development environments can massively enhance sync and async collaboration. In this episode of "Bits and Boxes", CodeSandbox engineers Christian Alfoni, Alex Moldovan and Danilo Woznika highlighted some of the most valuable flows of collaborating in the cloud.

Making the Codebase Accessible to Non-Coders — In yet another episode of Bits and Boxes, Alex invited Filipe from the Marketing team to explore CDE flows that are valuable to Marketing, Design and Product teams.

DevWorld Conference — On leap day, Sanne from our BeOps team was greeted by a full house at the DevWorld Conference in Amsterdam for the talk "Elixir: Happy Developers and Scaleable Backends".

Web Bytes

Are CDEs Coming to Replace Local Development? — The million-dollar question: coding in the cloud or locally? Well… why not both? This blog post from our Lead Engineer, Christian, explores the different benefits, drawbacks and synergies of local development and CDEs.

Golden tickets 🎫 — We have released 5 golden tickets into the wild, each worth 1 month of unlimited usage. Tickets are hidden behind 5 super-secret milestones in our CDE. Two have been found so far, but expect an email from us if you find any of the remaining three!

Thank You 🖤

We hope you enjoyed this issue of Inside the Box!

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

Inside the Box: First Big Community Update of 2024

ioana — Thu, 15 Feb 2024 08:18:34 +0000

Hello! Is there anybody out there? 👋

We know it's been a while since the last newsletter but we've been busy bees during the last two months! The good news is that sharing so many great things in this one makes it even more exciting. A big release, a lot of new features and everything in between!

Let's discover what we baked since our last newsletter!

Latest Product News

CodeSandbox CDE ☁️ — In our biggest launch since v1, in January we released CodeSandbox CDE, the cloud development experience we've been building for over 2 years (which started with "Projects" in 2022).

In a nutshell, CodeSandbox CDE brings dedicated cloud environments for every branch & PR that spin up in 2 seconds and are available and collaborative 24/7.

Usage-based billing & plan updates 🪙 With the launch of CodeSandbox CDE, we updated our plans and billing model to meet the needs of cloud development. We've brought nearly all our Pro features to the Free plan and introduced usage-based billing, so Pro workspaces will be billed for what they use instead of how many people exist in the workspace.

VM tiers & usage monitoring ⚡ — You can now choose the VM specs that run your Devboxes and repositories. There are six tiers to choose from: you can go up to 4 vCPUs + 8 GB RAM in Free, 16 vCPUs + 32 GB RAM in Pro, and 64 vCPUs + 128 GB RAM in Enterprise. We also introduced a VM Settings page where you can monitor and control VM usage.

Live sessions in Devboxes 📺 — You can now run live coding sessions right from your browser, powered by our VMs, both in Free and Pro plans. A live session allows you to start a live collaborative coding session with others, which is especially useful for education, interviews and hackathons.

AI autocomplete in Sandboxes 🤖 — Many of our users have asked for autocomplete features similar to those offered by Copilot. So, we have extended our Codeium integration to Sandboxes. Users in our Free plan get 100 Codeium insertions in their code per month, and users in Pro get unlimited.

Unified Platform 🚀 — Probably our biggest launch of 2023, our Unified Platform introduced Devboxes (instant cloud environments running in our VM infrastructure) and brought the biggest overhaul to Sandboxes in 5 years. Watch the AMA live stream with the team for all the details.

Full Changelog 📜 — As we mentioned, we shipped many things recently. Be sure to check the latest changelog and the updates from December. And don't miss the changelog walkthrough video with our Head of Product, Neco.

Meet Us @ Events

Developer Onboarding - Before and After CDEs — Developer onboarding... is not great. However, cloud development environments seek to make onboarding much easier and faster: down from days to hours. In this live stream, Christian Alfoni, Danilo Woznika and Alex Moldovan will show some of the typical pains of getting onboarded as a developer and how CodeSandbox CDE makes it a much better experience. Register here.

DevWorld Conference — Our backend engineer, Sanne, will speak in Amsterdam at DevWorld Conference about "Elixir: Happy Developers and Scaleable Backends". The conference takes place on February 29th & March 1st!

FOSDEM — At the beginning of the month, our Engineering Manager & DevRel, Ioana, moderated a DevRoom at FOSDEM - the largest conference dedicated to Free and Open Source Developers in Europe. Have you been around? What's your favorite devroom there?

Web Bytes

The State of CDEs: post-survey panel — Recently, we surveyed 2200+ software developers and engineering leaders to uncover how CDEs are used today, their main benefits, adoption challenges, and future perspectives. We discussed the key findings from the final report with a panel of founders, engineering leaders, and software developers.

CodeSandbox blog 📰 — We wrote a lot in the last couple of months! A special mention goes to "Are CDEs Coming to Replace Local Development?", "The History of State Management at CodeSandbox", and a unique opinion article by our Co-Founder Ives, "Why I Code in the Cloud".

Live demo: Doing Professional Development in the Cloud — A trio of CodeSandbox engineers took the virtual stage to showcase what it's like to do professional development using a cloud environment. If you didn't catch it live, check out the recording!

Community Spotlight

Each Friday, we try to share on social media some of the projects that our community works on. In this edition, besides the ✨ Community Spotlight ✨ we are highlighting a CodeSandbox Friend too.

Spotlight - Dev Portal Awards — The DX breakthroughs implemented by react.dev, powered by a collaboration with CodeSandbox, won the Dev Portal Award for DX! The React docs also won best API Reference documentation. We couldn't be more proud of this partnership!

CodeSandbox Friends - Preact — Preact is a fantastic open-source project using CodeSandbox for reproductions and demos. We are more than happy to support it through our CodeSandbox Friends program.

But wait, what are CodeSandbox Friends? We're glad you asked! 😅 It is a program through which we offer free or low-cost access to CodeSandbox for eligible projects. We believe in the power of Open Source and we want to support non-profits making a positive impact on the world.

We really love seeing what you build using CodeSandbox. So do share with us what you're working on or which insights you would like to hear from us.

Big Thank You 🖤💚💜️

We hope you enjoyed this issue of Inside the Box! We had a lot to share from the last two months and many activities or updates did not make it. So we encourage you to keep following us on social channels.

We are curious about what you feel is missing from these newsletters and what you would like us to add to the next one!

What should we bring next? Tell us on our community space!

PS: Did you catch the easter egg on the intro? It's our humble shout-out to "Is There Anybody Out There?" by Pink Floyd.

Introducing CodeSandbox CDE

Ives van Hoorne — Thu, 01 Feb 2024 10:27:02 +0000

We are beyond excited to announce CodeSandbox CDE, the experience we’ve been building for the last 2.5 years 🥳 Our cloud development environment makes coding in the cloud available to everyone and empowers teams to improve productivity and collaboration.

When CodeSandbox launched in 2017, we started as an online React playground. Over the years, it has grown significantly to the point that we’ve reached 3 million registered users today! And as we became more popular, more and more people wanted to build bigger projects on CodeSandbox.

Over the years, we repeatedly tried to achieve this vision, but we kept failing to achieve the performance levels we needed. Until Firecracker was released.

In 2022, we took a step forward by introducing CodeSandbox Projects Beta—a complete rewrite of CodeSandbox that runs full-fledged development environments powered by Firecracker VMs.

Today, we are thrilled to officially release this experience as CodeSandbox CDE: an instant cloud development environment that automatically provisions a VM for every branch, accessible with a URL.

In a nutshell, this launch brings:

Dedicated cloud environments for every branch & PR that spin up in 2 seconds and are available and collaborative 24/7.
VMs that are more than twice as powerful in the Free plan & the option to pick from different VM sizes (up to 16 vCPUs + 32 GB RAM in our Pro plan or more in Enterprise).
Massive improvements to our Free plan, which now includes private projects, AI code autocomplete, AI assistant, live sessions, a VS Code extension, and more.
Pay-as-you-go becomes the default billing model, with a new Pro plan that starts at $9 for an entire workspace of up to 20 collaborators.

A faster, more powerful workflow

Web development is changing fast and becoming more complex—yet the way we code hasn’t changed much. Think about it: how much time do you spend maintaining your local setup every week? And how much energy and focus do you lose whenever you have to stop your work and install some local dependencies just to be able to review a PR or quickly fix a bug in another branch?

CodeSandbox CDE reimagines how much better this workflow could be. We’re solving these challenges by making development environments instantly cloneable and sharable, so every branch runs on a dedicated Firecracker VM and is available behind a sharable URL.

With this approach, we provide a centralized environment for the entire development team. This opens the door to a new paradigm of coding that improves productivity, collaboration and accessibility. Let’s go through some examples.

Fast context switching

Since CodeSandbox CDE runs every branch in a unique environment, you can switch between branches without worrying about stashing your changes, running database migrations or installing dependencies. It’s a matter of clicking “Create Branch,” and you’ll have a new environment spun up for you in 2 seconds.

Switching between branches becomes a matter of switching your editor between development environments, instead of switching between files.

Faster PR reviews with live collaboration

In CodeSandbox CDE, every environment is “multiplayer” by default, so everyone on the team is always one click away from live coding and pair programming. This is especially powerful in flows like PR reviews, since clicking a link on the GitHub PR leads to the collaborative cloud environment, where reviewers can quickly leave comments, commit changes, and approve the PR.

From now on, if you need to quickly review a PR, you can instead open a link to that PR with CodeSandbox CDE and get a running environment, instantly available.

This “no setup, instant spin-up” approach also makes the codebase more accessible to everyone in the organization (not just developers), creating new paradigms for cross-functional team collaboration.

Deployment previews for your whole stack

When you configure CodeSandbox for your repository, every branch will also have an automatically provisioned deployment preview.

These deployment previews work for any kind of workload you run on CodeSandbox, including back-end services, databases, Redis, etc. Once you’ve configured your development environment to run on CodeSandbox (using DevContainers), every PR will automatically get a deployment preview.

Deployment previews are available 24/7: we pause them when they're idle and wake them up in 2 seconds whenever someone wants to access them, thanks to Firecracker memory snapshotting.

AI, collaboration and more in Free plans

We believe that cloud development should be accessible to everyone, whether they’re hobbyists, OSS contributors, or professional developers. So, we improved our Free plan, which now includes nearly all our Pro features and updated usage limits. In a nutshell, the new Free plan includes:

Upgraded VMs (more than twice as powerful).
40 hours of free VM usage (in our Nano VMs) every month.
Option to pick from different VM sizes.
Unlimited Devboxes, 20 Sandboxes, and 10 personal draft Sandboxes.
All our AI features (Boxy coding assistant + Codeium autocomplete).
Privacy controls (private Sandboxes, Devboxes and repositories are now also included in Free).
Live collaboration and live coding sessions (new!) in Devboxes.
CodeSandbox VS Code extension: use local VS Code as the CodeSandbox CDE editor.

Overall, this gives you a powerful experience in our Free plan and the option to scale into Pro when your usage needs grow, since our updated plans are now tailored to your usage, as described below.

We also opened a “CodeSandbox Friends” program to provide unlimited Sandboxes to eligible projects (licensed open-source software, developer community projects, non-profit organizations) and discounts for Education. You can apply here.

Revamped Pro plan

After talking to hundreds of our users, we understood that our previous seat-based pricing model was not adjusted to the reality of cloud development.

So, we evolved CodeSandbox to usage-based billing, which means that your bill will reflect what you use instead of how many people exist in your workspace. To achieve this, we implemented a credit system, where credits translate VM runtime per hour into precise costs.

This change lowers the barrier to any team wanting to get started with cloud development. An entire team of up to 20 collaborators can start with our Pro plan to understand their usage needs at $9 per month for the entire team, as opposed to $18/user/month in our previous pricing. If the 40 hours of VM runtime included in the base Pro plan are not enough, teams can access on-demand credits (up to their defined maximum monthly spend) or purchase add-ons with discounted credit packages.

With this approach, we are making cloud development much more accessible for individuals and teams of any size, delivering on our company ethos to make CodeSandbox an accessible, collaborative and empowering tool for every developer.

To celebrate our launch, we’re giving a special launch offer: 50% off on the first month of Pro (valid until February 12th at 7:59 am GMT)! Use coupon code CDELAUNCH during checkout.

Leaping into a new chapter

With this release, you can now use CodeSandbox for your entire stack, whether it’s creating a prototype to demo something simple, building out your new idea, or daily professional development. This is the vision we had for CodeSandbox when we first started, so I’m extremely excited to see it’s out now.

If you haven't yet, create your Free workspace or get a Pro plan with our special launch offer of 50% discount for one month using coupon code CDELAUNCH during checkout (this offer expires on February 12th at 7:59 am GMT).

From all of us here at CodeSandbox, a huge thank you to our community of users for pushing us to make CodeSandbox even stronger. We couldn't have done it without you ❤️. Let us know what you think in our community!

The History of State Management at CodeSandbox

Christian Alfoni — Mon, 11 Dec 2023 13:35:41 +0000

At CodeSandbox, we run your code in our cloud infrastructure, configure the environment for you and keep your code always ready, behind a shareable URL. Give it a try with this Next.js example or import your GitHub repo!

CodeSandbox, the application

CodeSandbox provides a cloud development environment with a powerful microVM infrastructure, supported by several services and an API. This enables developers all around the world to collaborate and build products together. At the very front, we have the web application, where it all comes together and ignites the CodeSandbox experience.

CodeSandbox is not your typical web application. There is surprisingly little traditional data fetching—we only do server-side rendering for SEO purposes and there is only a single page, the editor. This reduces a lot of complexity in developing a web application, but looking at the editor you would quickly label it as a complex piece of software. In reality, this complexity comes from the amount of state and management of that state to create the experience of CodeSandbox.

We are about to embark on our fifth iteration of state management. Since its birth 7 years ago the web ecosystem has had big and small influences. In parallel with building our experiences, we also continuously discuss and reflect on these ecosystem influences and evaluate how they can benefit us. The ultimate goal for us is to use tools that allow us to continue adding new experiences with as little friction as possible.

So as we start this fifth iteration of state management, we have a golden opportunity to reflect on our previous iterations.

It all started with…

At the inception of the CodeSandbox application, Redux was the big hype. Redux enabled an important capability in terms of state management: it exposes state to any component in the component tree without the performance issues of using a React context. It does this by allowing you to select what state should cause reconciliation of the consuming component. In other words, Redux gave CodeSandbox a global state store where the current user, the current sandbox, the live session state, the layout state, etc. could live and be accessed by any component.

With a high degree of state used across components in deeply nested component trees, Redux solved the most critical aspect of managing the state of CodeSandbox. That said, as CodeSandbox grew it had two problems: understanding how the application works and it had subpar performance.

As an example, when you loaded a sandbox the application would need to run an asynchronous flow that included 21 state updates and 9 effects. With Redux this flow was expressed across 10 different action, reducer, and component files. So as a developer, asking yourself the question “What happens when we load a sandbox?”, it was incredibly difficult to infer.

The performance issues we faced with Redux are really the same performance issues you have with React in general. Even though Redux allowed us to narrow down what state components require, it is impossible for a human being to infer how the scope of the state will affect the component reconciliation performance as a whole.

Getting insight

This led us to our second iteration: Cerebral JS. Cerebral would solve both of these problems. By using a sequence API for our complex asynchronous flows of state updates and effects, which also includes a visual development tool for those sequences, we had more insight and understanding of how the application works. Even though new developers would need to learn an API, that learning curve was much smaller. Also, it ensured everyone had the exact same mental model and a good understanding of what happens “when a Sandbox loads”.

The Cerebral JS devtools give deep insight into the state management of the application.

The performance gains came from us combining Cerebral with Mobx. Now our components would automatically observe any state they accessed as opposed to us manually trying to optimize state access with selectors.

In the following presentation you can learn more about the journey of Cerebral JS and how my own journey crossed paths with CodeSandbox.

A presentation at React Finland about Cerebral JS and using it for CodeSandbox.

I hate TypeScript, I love TypeScript

As time passed, TypeScript came on the scene. Its promise of painless refactors and reduced risk of regressions was something we desperately needed. As CodeSandbox grew we were reluctant to change existing code. We were always on high alert after deploying changes and “We did not test it it well enough!” became a point of cultural friction for us.

Cerebral JS, with its exotic declarative sequence API, would never work with TypeScript. That fact, combined with the introduction of Proxies to the language, gave the perfect excuse to throw another state management library into the ecosystem. Overmind was born and it was built from the ground up to be a spiritual successor to Cerebral. It took the same conceptual approach, but with an API that was type friendly and still with just as much insight using its development tools.

A presentation at a meetup in Oslo about how to think about application development separate from user interfaces.

At this point, it would seem that all our challenges were solved. We had great insight into our application, we did not worry about performance, adding new features was straightforward, and with TypeScript we gained more confidence to refactor and deploy our code. But one day we wanted to make TypeScript even stricter, so we turned on strictNullChecks.

Being yelled at by TypeScript

Strict null checking is a feature of TypeScript that gives an error if you try to access a value that might be null or undefined. Without this feature, the following does not give an error:

type State = {
  // The project state might not be initialized
  project?: {
    title: string
  }
}

const state: State = {}

state.project.title // This does not give any error

As we turned on the feature, TypeScript got very upset with us, to say the least. We had so many errors that we decided not to do it. But it was not the number of errors that demotivated us, it was the realization of an underlying message from TypeScript: “You developers have a lot more context about the code than I do”.

This sounds a bit abstract and cryptic, but it is an important point. When you work with global state stores you are in a global context that is initialized before the rest of the application. That means any state that is lazily initialized through data fetching or other mechanisms has to be defined as “possibly there”. This makes sense from the perspective of the global state store, but from the perspective of the consumers of that global state store, there is no guarantee that the state you access has been initialized or not. In practice, that means whenever you consume lazily-initialized state from a global state store you have to verify:

type State = {
  project?: {
    title: string
  }
}

const state: State = {}

if (state.project) {
  state.project.title
}

When you are writing code in a context where you know that the project must have been initialized, for example in a nested component or an action, you have to write additional code to explain TypeScript that this is indeed a valid context to access the project. And in a complex application like CodeSandbox, this happens everywhere. You want TypeScript to have a deep understanding of your codebase and help you, but in this situation, you have more understanding of the codebase and need to help TypeScript. Something is not right in the world.

Putting context into state

Around this time, CodeSandbox had become a company and we were planning, unknowingly at the time, our move into the Cloud Development Environment space. In the web ecosystem, state machines were the big thing and we also experimented with this:

Using a state machine would help us make our code more aware of the context it runs in, and also be more explicit about what contexts it can run in. This experimentation held a lot of promise, at least in theory, and we decided to build our new editor using React primitives with some patterns and minor abstractions to embrace this concept.

Even though this fourth state management iteration did improve the challenge we just discussed, it came short on some of the already solved challenges with our previous iterations. Specifically, we had challenges with performance again as we were relying on React contexts to share state. Also, we were used to imperative actions, which were now replaced with reducers and state transition effects. This split our logic into different files and created indirection.

In practice, it became very difficult to reason about “What happens when this action is dispatched?”. Just the fact that you could not CMD + click an action dispatch in the code and go to its implementation, reading line by line what it does, became a big friction for us.

Exploring React contexts for state management was still an important experience. Instead of thinking state trees, we were now thinking and practicing hooks composition for our state management. And with the advent of suspense, error boundaries and new data fetching patterns in React, it all culminated in our fifth iteration.

Putting state into contexts

With our fifth approach, we embrace the fact that React has contexts to share state management across components, allowing us to initialize state closer to where it is used and take advantage of React data fetching patterns. The only real problem with contexts is their performance. Even with projects like Forget, contexts will remain a bottleneck given that any state change within a context will cause reconciliation to all consumers of that context.

Without going into all the bells and whistles of this iteration, you can imagine a hook that does some state management:

export const useSomeStateManagement = () => {
  const [count, setCount] = useState(0)

  useEffect(() => console.log("Increased count to", count), [count])

  return {
    count,
    increaseCount() {
      setCount(count++)
    }
  }
}

If you wanted that state management to be shared by multiple components, you would expose the hook in a context. But for that to run optimally you would have to:

export const useSomeStateManagement = () => {
  const [count, setCount] = useState(0)

  useEffect(() => console.log("Increased count to", count), [count])

  const increaseCount = useCallback(() => {
    setCount(current => current + 1)
  }, [])

  return useMemo({
    count,
    increaseCount
  }, [])
}

And even then any consumer of this context would reconcile whenever any state within the context changes, regardless of what state it actually accesses from the context.

With Impact we create a reactive context instead, using reactive primitives:

export const useSomeStateManagement = context(() => {
  const count = signal(0)

  effect(() => console.log("Increased count to", count.value))

  return {
    get count() {
      return count.value
    },
    increaseCount() {
      count.value++
    }
  }
})

It does not matter how much state you put into this context—any consuming component reconciles based on what signals they access, regardless of context. You also avoid memoization, dependency arrays and the reconciliation loop altogether. But most importantly, you can use React data fetching patterns and mount these contexts with an initialized state.

An example from our exploration is how we mount a BranchContext within a SessionContext:

// We pass props coming from routing to mount our BranchContext
export function BranchContext({ owner, repo, branch, workspaceId }) {
  // This component lives within our SessionContext, where we can
  // fetch new branches and initialize Pitcher (Our VM process)
  const { branches, pitcher } = useSessionContext();

  // As we need the branch data first we use suspense and the new "use" hook
  // to ensure that it is available before the component continues rendering.
  // A parent Suspense boundary takes care of the loading UI
  const branchData = use(branches.fetch({ owner, repo, branch, workspaceId }));

  // Since Pitcher has progress events while resolving its promise, we consume
  // the observable promise, which is just a promise in a signal, to evaluate
  // its status
  const { clientPromise, progress } = pitcher.initialize(branchData.id);

  if (clientPromise.status === "rejected") {
    throw clientPromise.reason;
  }

  if (clientPromise.status === "pending") {
    return (
      <h4>
        {progress.message} ({progress.progress})
      </h4>
    );
  }

  // We mount the nested context for the branch, giving it the already fetched
  // data and connected Pitcher instance. Any consuming component/context will
  // safely be able to access the initialized data and Pitcher API without any
  // additional type checks
  return (
    <useBranchContext.Provider
      branchData={branchData}
      pitcher={clientPromise.value}
    >
      <Branch />
    </useBranchContext.Provider>
  );
}

Signals and observability is not a new thing, but it has a bit of a renaissance these days. For example, Solid JS, which is a great contribution to the ecosystem, binds its signals to the elements created, being “surgical” about its updates. With Impact and React, the observability is tied to the component. The drawback of that is that you are not as “surgically” updating the actual element bound to a signal, but you keep your control flow in the language. What that means is that there are no special components for lists, switch and if statements. No risk of challenges with typing or language features like destructuring creating unexpected behavior. You can keep your mental model of “It’s just JavaScript”, which I personally favor. And as components only reconcile based on signals accessed, it is a huge performance boost regardless.

We have been running an Engineer @ work stream where Danilo, Alex and I have been exploring these concepts and building prototypes to see how state management through reactive contexts would work for us. The Impact project is also available on GitHub if you want to follow its progress.

There are many kinds of applications you can build and they all have a mix of common and unique challenges. This article and the Impact project are about a very specific challenge for the complexity of state management required in the CodeSandbox editor. We are not aiming for a silver bullet, but something that works for our use case.

Maybe you have similar challenges and if not, I hope this article leaves you with some thoughts for reflection. Thanks for reading!

Introducing AI Code Autocomplete Powered by Codeium

ioana — Tue, 28 Nov 2023 19:39:05 +0000

Powerful, accurate code suggestions for every CodeSandbox user.

Filipe Lima
Product Marketing Manager at CodeSandbox

New day, new launch! Today, AI takes a huge leap forward in CodeSandbox with code autocomplete powered by Codeium.

This is the result of a months-long collaboration with the fantastic team behind Codeium, who provide an extremely powerful AI toolkit for developers.

Plus, we are making this available for free for everyone coding in our Devboxes 🎉

The rise of AI coding assistants

Necoline Hubner
Product Manager at CodeSandbox

In the last year, AI-assisted development has taken the world by storm.

Recently, we asked 2200+ developers how they use AI tools and were surprised to find that 78% spend at least 1 hour per week coding with AI tools. So it’s clear that the use of AI to accelerate coding has quickly become an extension of the development process. Yet finding tools that integrate with the development flow is still a challenge.

We aimed to address this with the release of Boxy, our own AI coding assistant. Since we launched it in May, we have learned a few things. First, with AI and code, context is king. External chat tools are a popular companion for most development, yet the burden of good prompting still rests on users to supply. Smart integrations that are context-aware and provide useful suggestions are the ultimate goal.

In speaking with our users, we learned that even context-aware chat and smart prompts are not enough to accelerate development to the extent we wanted for our users. AI code completion has become a vital tool for many developers. It’s not just a huge productivity boost, it can also be a great teacher for new patterns or APIs. So we are very happy to share that Codeium is now integrated into CodeSandbox and immediately available to all CodeSandbox users.

“At Codeium, we believe strongly that every developer should get the best tools no matter where they are developing. Thus, it only made sense to partner with our friends at CodeSandbox so that their massive community gets access to these cutting edge AI-powered features.” — Anshul Ramachandran, Head of Enterprise and Partnerships at Codeium

Codeium autocomplete

Codeium is an incredible AI-powered developer toolkit. Their code completion tool provides single and multi-line code generation with multiple suggestions to choose from. It supports 70+ programming languages, so it’s a perfect fit with our Devboxes, which can also run any type of project.

Showcase of some of Codeium's capabilities running in a Devbox.

As a team, we have been using it to write code, generate tests and suggest language for content. It only took us a number of days using it to fall in love with the integration and less than a week before it completely changed the way we thought about our coding process and estimation times.

Free for everyone

Codeium code completion is now available for free to every CodeSandbox user on Devboxes.

If you have your AI settings enabled, you will get AI autocomplete working in your code immediately. Note that we disable AI permission toggles by default, so if you have not yet enabled them, you will have a chance to do so through our announcement interfaces or through the workspace settings.

While the experience of using Codeium in CodeSandbox should hopefully be very intuitive, we invite you to have a look at our Docs to learn more about settings and customization.

AI is empowerment

Filipe Lima
Product Marketing Manager at CodeSandbox

It’s tricky to cut through all the AI noise. However, we strongly believe that AI has an increasingly powerful role in empowering developers.

By partnering with like-minded providers like Codeium, we are doubling down on making code more accessible to everyone. AI will shape the next few decades of software development. So we want to make sure it’s available to everyone.

To start blazing through code with Codeium, spin up a Devbox, make sure AI features are enabled, and tab away!

Finally, make sure to join our live stream later today for a Q&A with the team that built this integration, with a special guest from Codeium.