Ives van Hoorne shares how he built CodeSandbox and what’s next

Published in

Avocode — From Design to Code

6 min readDec 3, 2018

This time we sat down with developer Ives van Hoorne, the creator of CodeSandbox. An online code editor that offers first-class support for Vue.js and tries to make life easier for beginners. Although CodeSandbox is written in React.js, it can be used to build applications for any front-end framework.

Can you briefly introduce yourself?

Hello! My name is Ives, and I was still at school until last year. About a year ago, I decided to work full-time on my side project called CodeSandbox. Now, it’s not a side project anymore, but a feasible business.

“I’m still living at the university campus! We live together with 11 students. My best friend and co-founder of CodeSandbox, Bas Buursma, also lives here, so it’s unofficially our headquarters, haha!”

So, CodeSandbox is taking all of your time these days?

Yes, that’s right. I’m fully dedicated to it, and I’m planning to keep it this way for a looong time. It’s like working full-time on my hobby. The space around online code editors is getting more interesting day by day. The work I do is very different from what it was a year ago though, and there are a lot more meetings. There is also so much more to work on!

What specifically got you into programming?

I have always loved building new things. When I was younger, I did that in the form of creating new games, adventures, and worlds. A while later I got interested in game development, and that indirectly sucked me into programming. I started building games for friends and got my hands dirty with Visual Basic. At some point, I got so enthusiastic about solving programming puzzles and building new things that I wanted to try web development.

What did you do before you started with CodeSandbox?

I had worked as a web developer for a year at a company called Catawiki. When I got into university, this experience made the initial lectures easier and gave me some leftover time to hobby away. I wanted to work on something for the web development community for a while, so I decided to work on something called ReactSandbox. I quickly changed the name to CodeSandbox later though.

How did you come up with that?

I got the idea while I was working at Catawiki. We were converting our Ruby on Rails pages to React together with a team of three. At some point, I was on vacation and didn’t have my MacBook with me. I got a question from my coworker about a button implementation in React, but I wasn’t able to see the implementation because I couldn’t access my development environment. It was cumbersome to go through the code mentally, so that’s when the idea came up to create something where people can easily create such code examples.

“It was cumbersome to go through the code mentally.”

How do you see CodeSandbox nowadays?

CodeSandbox is an online editor focused on quickly creating applications. I started building it after I noticed that it was hard to share code examples with things like npm dependencies and multiple files. The goal for CodeSandbox is to make it very easy to quickly set up a project and work on whatever you want to work on. We’re doing our best to remove the attention from build tooling/configuration to actual code.

Additionally, we’re working on share-ability. We want to make CodeSandbox a collaborative platform where people can go to find inspiration, information or to work together on a project.

On the technical side, the editor of CodeSandbox is built with React with some VSCode parts hooked in. We execute most of the code in the browser, so we also created a JavaScript bundler that runs on a separate domain. The homepage and blog of CodeSandbox are built with Gatsby. The backend of CodeSandbox consists of an API server that communicates with microservices. The API server is written in Elixir, the micro-services are written in TypeScript. Our storage includes a Postgres database and two Redis servers. The database is used for storing all persistent data (except for binary files), and the Redis servers are used for caches and storing temporary data.

Could you point out some things that make CodeSandbox different from other solutions?

CodeSandbox flexibly adjusts to being 100% optimized for any specific field. A concrete example is that we want to make deployment easy, so we have built a button that you can press to deploy without opening a command line.

We also show suggestions for some specific error messages from React by analyzing the files and code. I think that’s one of the main differences compared to other solutions. We don’t aim to get many languages to work from the get-go, we want to focus on one thing and make it right.

Do you have any spare time for some fun side projects?

All my spare time side projects are actually in some way related to CodeSandbox, but they’re less pressing. During my spare time I work on making libraries from parts of CodeSandbox, or I try to implement something crazy in CodeSandbox that should not work.

The last thing I applied was a way for people to live preview MD files in CodeSandbox, but the code snippets were also editable & live evaluated with a preview. Like small CodeSandboxes in CodeSandbox!

Are there any challenges that you usually face during product development?

Prioritizing is the hardest thing for me. I want to work on a dozen ideas for CodeSandbox, but it’s super hard to know what’s most important at a given time. I sometimes work on too many things and don’t finish any of them. This is where I need a wake-up call and finish what I started in the first place.

So what’s next?

I hope that CodeSandbox will be a super useful resource for starting web developers and people learning to code. I want it to be a platform where people can go to find information, find inspiration and socialize with other developers.

I generally believe that we should make coding more collaborative and more interactive. It should be a platform where you can both create simple code examples and full-blown applications — just like CodeSandbox for instance.

How do you keep up with the news in the front-end dev world?

I mostly follow Twitter (a bit too much), I also look at Hacker News from time to time.

What tools do you use to cooperate with designers and why?

For CodeSandbox we mostly use a combination of Figma and CodeSandbox. We use Figma for design prototyping and CodeSandbox for the code prototyping part.

What advice would you give to programmers getting into web development?

I think the most important way to learn web development is to start building. Start working on your portfolio page, or make a website with some fresh design explorations. This is also the reason that I began to work on CodeSandbox, I wanted to learn Elixir, so I searched for a project that I can use it with. It’s also extremely valuable to work with people who are experienced in the field. They can give you detailed information that you can’t read in books.

I don’t think I would’ve changed things if I would start over. I do often make mistakes, but I think that’s important. It’s hard to learn without making mistakes.

Want to stay in touch with Ives? Find him on his website or Twitter.

Have a suggestion for an exciting designer or front-end developer we should interview? Hit me up at jurajmihalik@avocode.com.