The Journey of CodeSandbox Projects


CodeSandbox Projects is the new version of CodeSandbox that enables the workflow of CodeSandbox today, but for projects of any size. During this talk, Ives will share the story of how Projects was created, and how we made it technically possible to build Projects.

32 min
17 Jun, 2022


Sign in or register to post your comment.

AI Generated Video Summary

Code Sandbox is an online code editor that allows for easy sharing of code. It started as a side project and evolved into a company with significant growth. Code Sandbox Projects integrates Git and allows for contributions back to the original sandbox. Code Sandbox uses a micro VM for fast collaboration and hibernation. The future of Code Sandbox includes improved performance and integration of a faster bundler.

1. Introduction to Code Sandbox

Short description:

Welcome to the conference! I'm Yves van Hoornen, one of the cofounders of Code Sandbox. Let me introduce you to Code Sandbox, an online code editor. It's like your local code editor, but with the ability to share your code easily. Try it out!

It's time to meet the guys at the conference. Welcome, Daniel, Marco, and Matt. This is the first time we've had a session, so let's check out what the speakers are up to.

Hello, everyone. It's really nice to be here. I think I've never spoken at a conference with this many people. It's absolutely crazy. Keep in mind, this is the first time that I'm using Keynote. I might be a bit enthusiastic with the animations.

So my name is Yves van Hoornen. You can find me on Twitter under the name Compuives. My name is pretty hard to pronounce, even in the Netherlands. So you can call me Yves. You can call me Ives. My friends also have trouble with my name. They call me Flip. So if you want to call me Flip, that's fine as well. I am one of the two cofounders of Code Sandbox.

And first of all, who of you before today has heard of Code Sandbox or has used Code Sandbox? Okay. That is really, really cool. It doesn't matter. I'm still going to demo it because I want to demo it. So this is Code Sandbox. Code Sandbox is an online code editor. It's essentially like your local code editor, but the nice thing is that whenever you build something, you get a link that you can share with people. So I can make a change. I can change this to hello world, for example. It will update in the preview. And if I press fork, I get my unique link and I can share it with other people. Now, Code Sandbox is quite old.

2. The Story of Code Sandbox

Short description:

Last month we turned five years old. We now have 25 million sandboxes. Today I want to talk about the story of Code Sandbox. How Code Sandbox got started as this little side project that turned into a company and what we've learned along the way. At the end, I will do a bit of a crazy talk about Minecraft. So let's get started. I was a web developer for an auction website called Katawiki. We were converting Ruby on Rails, version 2 pages to React. I got questions from my co-workers about the pieces of code. I started to think, it would be interesting if you would have your development environment available everywhere.

Last month we turned five years old. And this month, the company is four years old. When we started Code Sandbox, I never could have expected this amount of people using Code Sandbox. We now have 25 million sandboxes. And the sandboxes are crazy. There is also, like, the top right one is Mario Kart without JavaScript, just in CSS. Which is... I don't know.

Anyway, today I want to talk about the story of Code Sandbox. How Code Sandbox got started as this little side project that turned into a company and what we've learned along the way. My goal is really to inspire you if you have an idea that you actually think about working on it. At the end, I will do a bit of a crazy talk about Minecraft. Which we'll get to at the end.

So let's get started. So five years ago, I was a web developer for an auction website called Katawiki. We were converting Ruby on Rails, version 2 pages to React. At some point, I was on vacation to St. Ives. And we literally went there, because my name is in it. And at the time, I got questions from my co-workers about the pieces of code. And they just sent me snippets on Slack of React. And I couldn't decipher what was going on. Because nowadays, you have everything has a V8 compiler. I didn't have one in my head. I just tried to decipher what was going on. And I started to think, it would be interesting if you would have your development environment available everywhere. And of course, didn't do much with the idea. Like most ideas, started studying. And I remember going to university, and the first lecture was about Java. And then the second lecture was about Java.

3. The Evolution of Code Sandbox

Short description:

And the third lecture was about Java. I started to get Sketch, the design tool. Created a simple sketch. First implementation was working. Added a navigation bar. Made it a file explorer. Added NPM dependencies. Code Sandbox evolved from a component editor to an online code editor. Every idea starts out imperfect, but by working on it, it gets better.

And the third lecture was about Java. And at some point, I thought, okay, I want to do something next to the Java lecture. And that's when I started to get Sketch, the design tool. Started to make a design of this idea of Code Sandbox. And created this very simple sketch, where you would have, in the sidebar, you would have a component, and then you would have code, and then you would have a preview. Me as a developer thought, this is a good enough design, so I started with implementation.

And this is the first implementation. And I remember being so happy with this. It was working. You were able to type code. It would update the preview. It would even show you errors. I got so excited that I immediately started working on the next thing, which was adding a navigation bar. And I was thinking, it would be cool if you could build NPM dependencies in Code Sandbox, so you could create multiple NPM dependencies and import them. But this started to really look like a file explorer. So next iteration, make it a file explorer. Then thought, what if we add NPM dependencies? We got NPM dependencies added to the project as well. And it started to really look like Code Sandbox as it is today.

However, the interesting thing is, Code Sandbox didn't start as how it is today. It started as the idea for a component editor, and then it became a component library builder, and then it became an online component library builder, and finally before the release it became an online code editor. And the learning from this is that no matter what idea you have, if you think the idea is imperfect, it's worth working on. Because every idea starts out imperfect. The reason that you start working on it is to refine the idea, and the idea will definitely change. Because then you say, I have an idea but I don't think it's great. And then they don't start working on it. Which is a shame, because really if you start working on the idea, then the idea will get better. So that was a learning. And we got this version. It looked very much like Code Sandbox. It was January 2017.

4. The Journey of Code Sandbox

Short description:

I was looking at Code Sandbox every day and I felt like no one needs this. However, when I showed it to my friends, they were really excited. So my co-founder joined, and we aimed to release everything before April 1st. Seeking external feedback and releasing fast are important. I dropped a feature because no one asked for it, which taught me an important lesson.

But I was looking at Code Sandbox every day, and I was thinking at some point, it's not that special. I didn't feel the same feeling that I had when I created a prototype. I was looking at it every day and I felt like this is no one needs this.

So I started going back to my Java lectures and my friends asked, hey, what have you been doing in this time. And I said, well, I've been working on something called Code Sandbox. And they asked and I showed it to them and they were much more enthusiastic than I expected. They were really excited about this. And I was thinking, okay, maybe there is actually something with Code Sandbox.

So at that time my co‑founder Bas joined. And we said okay, we're going to try to release on April 1st. So we're going to build everything that we want to build before April 1st. If there's anything unfinished on April 1st, we're going to drop it. We're not going to build it. We're not going to finish it. We're going to drop it from the product.

So you can see the spike of implementation. And the learning from this is really seek external feedback. Because when you look at a product every day, your idea of it will get warped. And this will really, really help with this. And also release fast. For example, I dropped a feature on April 1st because I couldn't finish it. And that was supporting sandbox exporting to npm. So you could publish your sandbox to npm. And I thought this is super important. And we released it and no one asked for it. Sad. We still have this PR open. It's a symbolic PR. I would never merge it anymore, because, well, the merge conflicts are a bit too high now. But that's some very important thing to realize.

5. The Importance of Keeping it Simple

Short description:

Keep it simple. Storing code files in Postgres. Over 200 million files. Released Code Sandbox on April 2nd. Six likes on the Tweet. Better to have 100 true fans than 10,000 people who like you.

And also follow KISS. Keep it simple. Because I remember as well that I thought, oh, we need to store the files of the sandboxes on S3 or network storage. But I didn't have time to implement all of that before April. So we stored every file in Postgres. Which sounds crazy. Storing code files in Postgres. And we now have 25 million sandboxes. Over 200 million files. And it's still all stored in Postgres. And it's still very fast. So it's really, really interesting. That's something that is, this is something that well, Postgres has always amazed me. Just like Elixir. But keep it simple. Build it for your first use case and see if you need to grow it.

So we released Code Sandbox on April 2nd. We realized April 1st is the worst date, maybe in the year, to release something. Because it's April fools. So we released it April 2nd. Lots of, lots of anticipation. We had champagne, well, student champagne, because we were students. I got six likes on the Tweet. And all those likes were from my high school friends who didn't code. A bit sad. So we had worked for half a year on Code Sandbox and got six likes. No users. What now? And I remember reading a book, a marketing book. I don't remember the book. But I did remember something from that marketing book where it said, it's better to have 100 true fans than 10,000 people who like you.

6. Building a Community and Growing

Short description:

It's better to have 100 people who really talk about their friends about you, who are so enthusiastic about you that they follow everything that you do on the product than 10,000 people who just look at a couple moments and they think, oh, this is cool. But then they move on. Implement feedback quickly to make fans. Ship often and publicly to show active development. Between 2017 and 2019, Code Sandbox experienced significant growth.

And that is something that we really followed. It's better to have 100 people who really talk about their friends about you, who are so enthusiastic about you that they follow everything that you do on the product than 10,000 people who just look at a couple moments and they think, oh, this is cool. But then they move on. And so we started doing the unscalable things. We started to talk to people, which is weird. We send them emails. At some point, they even gave feedback on sandboxes, like I saw, oh, a new sandbox has been created, and I send them a message. Hey, you missed a semicolon here. That was a bit too far. But when you talk with these people, they will give you feedback. They will say, oh, I wish I could use ESLint, I could use Prettier, for example. And once your fire way to make them a fan is if you implement that feedback very quickly, because it shows that you listen to them, only if it fits with your road map, by the way, otherwise you're gonna make a Frankenstein, but if you implement that feedback very fast, they will become fans. So ship often. And if you ship, ship publicly so that also the people who like you, they see that you're actively working on it, and they see there's actually a lot of love put into a single product. That was something that was super, super, super important for us. And with that kind of strategy, between 2017 and 2019, we got a lot of growth. It started to grow a lot with Code Sandbox, and anecdotally you can also say that when you look at the graph of my student points, my past exams, it's kind of the same graph but then in reverse. It's understandable, because when you get this kind of feedback, marry me, I'm in love with you, this is delicious, thank you, I've included you in my will, I still need to find this person, but it was super, super, it was just a super exciting time.

7. The Learnings and Expansion of Code Sandbox

Short description:

We've learned that people learn to code using Code Sandbox. Code Sandbox is used by developers to share work with designers and product management. People wanted to use Code Sandbox beyond prototypes, as seen with the example of XcalitRAW, an open-source project that started on Code Sandbox but eventually required custom tooling.

And we've learned from when we released Code Sandbox, we've learned also things that we didn't know initially, the biggest one is people learn to code using Code Sandbox. And when you think about this, in hindsight, it makes sense, right? If you have never coded before and you want to start coding, you suddenly have to learn about the terminal, should I use Next.js or create React app or remix, what code editor should I use? What is Webpack? All these kind of things. You first have to learn about the tooling before you can get to the coding. And with Code Sandbox you can go to a link, you can start editing the white text and you immediately get that dopamine shot of having coded. And this became our most important value for Code Sandbox. This is really the most important thing for us, that we make it, we lower the learning curve of coding.

The second learning was that Code Sandbox was used by developers to share work. Not only with developers, but also with, for example, designers and with product management. Which is really interesting. It included more people from the product team than just developers in Code Sandbox.

And finally, people wanted to use Code Sandbox beyond prototypes. Where people started on Code Sandbox, they started to prototype. And then the prototype became bigger, and bigger, and bigger. And it didn't fit on Code Sandbox anymore, and people had to opt out. And we put all of these in our values in the end. These are the values that we have with Code Sandbox. And we follow them since, well, the start. For the last point, people wanted to use Code Sandbox beyond prototypes. There is one clear example. How many of you know XcalitRAW? Yeah, it's really cool. I would definitely recommend you to check it out. It's a whiteboarding tool. It allows you to really create diagrams very easily, hand-drawn. And I will use this in the presentation as well. But that project is an open-source project that started on Code Sandbox. It was started on Code Sandbox, shared by Christopher Chedeau, on Twitter. And more and more people started to work on it, and it became bigger, and bigger. And at some point, they wanted to have custom tooling. I think they wanted something like docker or something, or they wanted to have some custom ESLint rules. But they weren't able to use Code Sandbox anymore.

8. Introducing Code Sandbox Projects

Short description:

We have built Code Sandbox Projects, which enables the flow of Code Sandbox for any project of any size, integrated into your existing workflow. It's the same flow as Code Sandbox, but with the addition of Git integration. Every sandbox has a branch, allowing for contributions back to the original sandbox. Let me show you a demo of Code Sandbox Projects with Excalibur running on it.

And that's a shame, because they were using Code Sandbox so far, and it worked out well, where they were able to just share sandboxes with each other, but they couldn't anymore. So we started thinking... Can we enable Code Sandbox for big projects? Can we enable Code Sandbox for really big projects, like Code Sandbox itself? And we went to the drawing board with this.

We decided, okay, what if we start from scratch? One and a half years ago, we went to this drawing board and we asked ourselves, how can we enable the flow of Code Sandbox for any project of any size, integrated in your existing workflow? And that is the thing that we have built. It's called Code Sandbox Projects, and I'm super excited to show it. And the first thing that I'll show is this beautiful keynote animation. Sit. I'm not sure if he's here. But... You want to see it again? Yeah. This is top keynote. Well, anyway, okay, what is Code Sandbox Projects? Important question. It's the same flow that you have with Code Sandbox. You have a sandbox, you can work on a sandbox, you can build the sandbox and you can share it with someone, they can fork it and build their own sandbox, they can continue working on it. However, there's an addition with Code Sandbox Projects. It's integrated with Git. So every sandbox has a branch. So you, for example, start with the main branch. When you press fork, you get a new sandbox with a new branch. This also enables something that I've wanted to build in Code Sandbox for a long time, and that is being able to contribute sandboxes back to the original sandbox. So you can share a sandbox with people, they can fork it, they can open a PR from that sandbox, and then merge it back. Oooh, demo. So this is an example of that. This is Code Sandbox Projects, by the way. It's very much like Code Sandbox, but it's a new editor, which is a bit... It looks nicer. And this is Excalibur running on Code Sandbox. So I could press fork, for example, here, and I would get my own branch, and I would be able to contribute to Excalidraw. And here... Uh oh, let me refresh this page.

9. Code Sandbox Editor and Contribution

Short description:

Here we have our own editor running in Code Sandbox. I can show you. This is really Code Sandbox running in Code Sandbox. We use Code Sandbox to develop Code Sandbox nowadays. When I press fork, we actually create a new branch, and we create a new sandbox from this original sandbox with its own version. Also I have access to the terminal. I can do whatever I want to, really. Now if I want to make a change, if I want to contribute something, I can use this little inspector to click on a React component. It will open the code. Oooh! I'm really excited about this one.

And here we have our own editor running in Code Sandbox. I can show you. And I will ask everyone to close their eyes for a moment, because my authentication token... Oh. Oh, maybe I'm safe. Oh, I need to create an account. On Code Sandbox? Okay. Let me try again. Okay. Close your eyes. This is my token. It's invalid. You cannot use it anymore. Oh, and I need to have an additional permission. Okay. Let's try again. I need to give myself a — I've created a special user for this talk, and I'm now really thinking should I have done that. But I'm in it now. Oh. How can I easily show this? Well, it doesn't really matter. I didn't want to show this anyway. Oh, it works. So this is really Code Sandbox running in Code Sandbox. We use Code Sandbox to develop Code Sandbox nowadays. When I press fork, we actually create a new branch, and we create a new sandbox from this original sandbox with its own version, really. Also I have access to the terminal. I can do whatever I want to, really. Now if I want to make a change, if I want to contribute something, I can use this little inspector to click on a React component. It will open the code. Oooh! I'm really excited about this one.

10. Code Sandbox Workflow and VM Integration

Short description:

And you can go from sandbox to contribution. We want to make this Git flow very easy, so that a designer can change the margin, click open PR, and enable collaboration. Code Sandbox is backed by a micro VM, allowing you to run anything, even a Minecraft server. It also enables running your own development server and connecting your own code editor to Code Sandbox for live collaboration.

And you can, for example, say, welcome to React Summit. The Next.js server will do the HMR. And I'm happy with my PR. I click open PR, and we will handle pushing that branch, committing the commit, and finally pushing that commit as well. And it takes a bit, because we're also doing all the ESLint checks and everything behind the scenes. And then it locks my pop-up. I click done. I click open PR, and you have this PR with the change that we wanted to make. I always delete this list. That's probably why I'm not a developer anymore, but a founder. I'm not sure if others do this as well. And I create a pull request. So this is the flow of code that we really want to enable, where you can go from sandbox to contribution. And we want to make this Git flow also very easy, so that, for example, it sounds a bit crazy, but if a designer wants to change the margin that they can click on a component, change the prop of the margin, and that they can click open PR, it sounds crazy, but I think we can enable this.

Next to this, integrated with Git, we also have that it's backed by a micro VM. And this enables a lot. We can literally run anything. Normal cases, run Postgres, run MongoDB, for example, run your docker-compose thing, and the funny thing is, if you fork the main branch, all the data of the Postgres will also be in the new branch. It's an exact copy. Yesterday I ran a Minecraft server on code sandbox. That's possible. You can try this at home, but it's possible. And this also allows us to run our own development server on the VM. And this allows us to run something called Pitcher. And it's a development environment that other code editors can connect to, and the API is closed right now, but we're going to open this API, but this essentially allows you to really connect your own code editor to code sandbox. So remember I was working on this VR here? I can also click Open in VS Code, and it will actually open this branch, you can use your own editor. And one thing that I really like about this is that you can also have live collaboration in the end. So where am I? I'm here. Am I here? I'm here, look you can see my VS Code cursor here as well. You can collaborate too.

11. Collaboration and VM Speed

Short description:

You can work in VS Code and collaborate with others in Code Sandbox. Can a VM be fast? Yes, with Firecracker, a micro VM that can save the memory of a running VM to disk. Code Sandbox uses this to create snapshots of the main branch and start new branches from them, allowing for a unique development environment without waiting for starting time.

I'm connected twice. So you might be working in VS Code and you want to get some feedback from someone, you can share a link, they can open it in Code Sandbox, you can collaborate together, follow each other. Or you're working in your own branch in VS Code, someone opens a PR, you quickly want to review that PR, but you don't want to switch your own branch? Well you can just open it in Code Sandbox and you have a separate development environment to review the PR.

Okay, I'm gonna speed this up now because I'm over time. The question is, can a VM be fast? Because that's the big question of having something like this. Like you can run generic stuff, you can do anything really, but can a VM be fast? And I would say yes, with the caveat that the nice thing is that servers can store states. They can store gigabytes of states. And if you have the main branch, you essentially want to create an exact copy of the main branch when you press fort, ideally within a second, right? So the first response is, okay, what if we copy the disk? But the disadvantage of that is that you still have to start the Next.js server from the ground up or Docker from the ground up. That is not very nice. So the question is, can we copy everything? And what does that even mean? Everything? So there is this very cool tool. It's called Firecracker. Of course, there has to be fire there. It's created by the Amazon team to host AWS Lambda and AWS Fargate. And it's a micro VM. Normally, VMs spin up in, like, six seconds. Firecracker spins up in 200 milliseconds. But the really interesting property of Firecracker is that it can save the memory to disk of a running VM. So essentially, when I have a VM with Next.js, it can snapshot that memory, put it to disk. And then this is the interesting part. I can now start new VMs just from this snapshot, like, multiple VMs starting exactly at the same time from that snapshot, just continuing its operation. This is perfect for Code Sandbox, because we fork. We are a fork-based company. So when you have the main branch, we always create a snapshot of that. When someone presses fork, we can copy that snapshot, and we can start a new branch from that, and it will just continue where the main branch left off. But you do have a unique development environment that you can work with. So you don't have to wait anymore for, like, starting time. This takes a couple seconds. We found a faster way as well, where when you start a new branch, it directly uses the existing snapshot, and every time it writes memory, it doesn't write the memory to that snapshot, it writes it to a separate snapshot. Copy and write. And this allows us to start VMs in 600 milliseconds, and you don't have to wait for a Next.js server.

12. Code Sandbox Forking and Always On Branches

Short description:

Code Sandbox allows for fork behavior and Always On branches. After five minutes of inactivity, the VM's memory is saved to disk and can be turned off. When you return, the VM can be immediately spun up in 600 milliseconds, giving the impression that the branch is always running. Let me demo this with a Minecraft server connected to Code Sandbox. I make changes, disconnect, and reconnect to show the continuous running of the branch.

This is super cool, because it allows for this fork behavior. That's also what I demoed just now with contributing. But it also allows for Always On branches. After five minutes of inactivity of a VM, we can save its memory to disk. We can turn off the VM. The moment that you come back, we can immediately spin up the VM in 600 milliseconds, and it will continue running. And for you, it will seem like the branch is always running. It never turns off.

Okay, I really want to... I'm gonna demo this, because this is something, an idea of last night, and I've been working on this last night, and I really want to show it. Okay, so I hope it works. Let's say I have this Minecraft server. I start Tilscale, which allows me to connect to the Minecraft server. Where is my Tilscale? I have... Yeah, sandbox. Okay, I open Minecraft. I connect with this sandbox. Okay, now I'm connected with a sandbox, on-code sandbox. Ooh, it's very dark. Let me set the time. You can clearly see I'm a millennial now that I know all these things on Minecraft. Or is it gen Z? And this is the logo of code sandbox. I know, right? We just changed our logo to make it this easy to build in Minecraft. That was the goal. And let's say I want to make some changes. Like I want to change something in the world. And I disconnect. Now one cool thing is I can now... Ooh. Let me quickly open my terminal, because I forgot that.

13. VM Hibernation and Forking

Short description:

I can hibernate and resume the VM, with the ability to connect to the same world. After forking, I create a new VM from the existing snapshot, creating a new development environment. I can connect to both the original sandbox and the new development server. I need to restart the tail scale server to connect to sandbox-2.

I can now hibernate this VM and I can resume it. And I will be able to go into that same world. It's this VM. I can hibernate it now. This VM is now hibernated. If I go to this URL, it will not seem like it's hibernated, because it spins up really, really, really fast. So now it's back on. Can you believe that it was... Well, anyway. It was off for a moment. I can connect to it again. And my world is still here. I'm still in this logo.

That is one thing. But what if I now press fork? And I create a new VM from the existing snapshot, so a new development environment. So I press fork. It creates a new environment. And I have to rerun the tail scale, because that's a detail. And now I have a new connection to I have sandbox one here. And now I connect to a new development server. So I have sandbox. I guess I can still connect to that. Yeah. I can still connect to that. And now I can also connect to sandbox-1. Or can I? Oh, wait. I need to restart the tail scale server, I think. Let me see what the name is. This is the thing with the tail scale. Oh, sandbox-2.


Code Sandbox Projects and Private Repos

Short description:

In the future, Code Sandbox will combine projects with the main platform, allowing for browser-based and full development projects. Code Sandbox also works with private repositories and will support GitLab, Bitbucket, and custom Git servers. CodeSandbox projects is currently in closed beta and will be free. Additional features like VM hibernation after inactivity are included.

Oh, sounds. And now I'm connecting to another server and it will have the same changes that I just made in that original. And we didn't save the world. We didn't stop the Minecraft server. We have an exact copy of the original Minecraft server running on another node. And that's essentially the power that firecracker enables you. And this will, well, this is Minecraft. You won't use this at work. But that is the thing that I find really cool about the fact that we can enable this.

In the future we're going to combine Code Sandbox Projects with Code Sandbox itself. And you will be able to run browser based projects on Code Sandbox and you will be able to run full development projects with running Postgres Server, for example. I'm a bit over time, but thanks a lot for bearing with me. And I wish you all a very nice day today. And enjoy the rest of the conference.

Alright, well... I'm just lost for words. But luckily we have questions from the audience. So, does CodeBox Sandbox also work with private repos, so they are not on GitHub? Yes, it does. Right now we have GitHub as one of the main things. We only enable GitHub right now. But we have built this in such a way that it would work with more Git repositories because we built on top of Git. So in the future you will be able to use GitLab, Bitbucket, your own Git server. Even on private repos. So you can authenticate and do everything, your development work on CodeSandbox projects.

Nice. Is this free? And if so, how do you earn money? So CodeSandbox projects is free. It's in closed beta by the way right now. We're going in open beta in a month. But you can go to to get into the closed beta. It's free because we are doing all these extra things like after five minutes of inactivity we hibernate the VM, for example.

Scaling, Financing, and Student Days

Short description:

We have implemented tricks to scale and host Code Sandbox for free, with a focus on open source projects. For private repositories, we plan to ask for subscriptions. Initially, as students, we ran Code Sandbox in the browser and scaled it to 500,000 monthly users on a $40 hosting budget. We later raised funding and now use VMs for scaling. Additionally, we have a subscription model to finance our hosting. In the early days, we lived frugally as students, but we have since grown and attracted investors who understand the student company culture of working hard and playing hard.

And you won't notice this, but this allows us to much more easily scale workloads. If you hibernate a VM after an hour, you will often get 300, 400 concurrent VMs. When you compare that with hibernating a VM after five minutes, you will usually have 30, 40 concurrent VMs. That makes it very easy for us to host. So we're doing a lot of tricks behind the VM that will make it easier for us to both scale this, but also make it cheaper for us to scale and because of that we can make it free and we will always want to have Code Sandbox free for open source.

In the end for private repositories, that's when we want to ask money, ask a subscription, so to say. Ask or enforce. All right. How are you able to pay for the infrastructure cost then? My favorite spare time projects typically also burn a big hole in my wallet. Asked by David.

Yeah, so when Code Sandbox was, when we were just students, we only made €500 a month and that was our student loan and we paid €300 of those euros to our housing. So we had €200 a month to really spend for our food and to spend for Code Sandbox. So that's why the first version of Code Sandbox ran everything in the browser and for the first two years, we were able to scale Code Sandbox to 500,000 monthly users on $40 a month of hosting because it was a Elixir server backend. It was a Postgres database connected to it and then there was a very heavy, thick client in front of it that was served by Cloudflare. And that allowed us to really scale it to so many people. And then from then on, we've raised funding, first a Series C and then a Series A, and this allows us to also scale it on VMs. So that is the… Oh, and actually, we also have a subscription. There are companies also paying for Code Sandbox today which allows us to finance all our hosting. So yeah.

Okay. Well, sounds like in your student days, you grew up on noodles. Yeah, it was weird. When we started raising money from investors, at some point, we were in a call with an investor and there were people playing beer pong in the hallway, and they were shouting really loud. And the investor, we were trying to be very neutral, and the investor was saying, What are those sounds? We just said, yeah, people playing beer pong. And he was very cool with that. He proposed to come to the university to meet us. It created a very weird contrast of students versus… The investors know that it's a student company, right? So they know it's work hard, play hard.

Alright, next question from Jeroen. Does Code Sandbox projects also… Oh, that's not marked as done yet. Question from anonymous.

The Future of Code Sandbox Performance

Short description:

Code Sandbox performance is getting slower, especially when resolving dependencies. However, our in-browser bundler has been rewritten to be much faster, and we're currently testing it with Sandpack. In the future, we plan to integrate this improved bundler into Code Sandbox to enhance its performance. If you have any questions or want to discuss further, please find me at the speaker booth. Thank you all for your time and applause.

I love Code Sandbox and we use it extensively, but it seems to be getting slower. Ouch. Especially resolving dependencies. So what's the future of Code Sandbox performance?

Okay. Well, I won't call him out. There is someone here. He maybe has a Code Sandbox t-shirt, but he's rewritten our in-browser bundler to be much faster, a couple times faster. And we're now testing that out with Sandpack. But in the future, we want to move this to Code Sandbox as well so that the performance of Code Sandbox increases. And we need to really think about why it's getting slower because we haven't made many changes on to the bundler. Well, that's a separate discussion. And I'd love to talk about that as well in person. So anonymous, you can find Ives at the speaker booth. Oh, I have stickers by the way. So definitely come up to talk to me not only about Code Sandbox, but if you're thinking of building something yourself, I would love to talk, just to share some experiences.

My clock says that's all the time we have. So thanks a lot. One big round of applause, everyone.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.
In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Workshop Free
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.
We’ll show you how to create an app that accesses information from a development store and can run in your local environment.

GraphQL Galaxy 2021GraphQL Galaxy 2021
165 min
Hard GraphQL Problems at Shopify
Workshop Free
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.
Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.

JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
Workshop Free
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
Workshop Free
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs
- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
Workshop Free
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:
- Introduction to the CK 5 ecosystem.
- Introduction to a “Notion-like” project template.
- Embedding CK 5 on a page.
- Basic CK 5 configuration.
- Tuning up CK 5 for a specific use case.
- Enabling real-time editing features.