The Journey of CodeSandbox Projects

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 projects.codesandbox.io 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.

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.

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.