My favorite online editors

You want to try something out very quickly or you are about prototyping some idea? Online editors/IDEs can be super helpful for that.

I used a couple of them over the past years and wanted to share them with you within this note.

CodePen.io

Codepen is like a well-aged editor being around for several years already. According to Wikipedia it was launched in 2012!

The well-known Chris Coyer has built up a team of people behind it and IMHO they built up a lovely community of creative people sharing their design and dev ideas on the platform. It is the Dribbble of the frontend developers!

I always find inspiration there!

CodeSandbox.io

CodeSandbox.io is the rising star of online editors. At least I perceive it like it is. The main difference is the feeling inside the editor. CodeSandbox feels more like a "real" editor. You don't have the feeling that you are actually on a website writing code, but they try to keep the immersion that you are in your offline editor doing things although you are actually on a website.

Also the community looks more JS-focused, less about design and creativity. More about JS architectural demos. That's why I still like the Codepen community more, although from the pure experience CodeSandbox feels a bit more modern and nicer.

Furthermore a lot of online editors try to provide bootstrapped code for popular frameworks and libraries. But I would personally always choose CodeSandbox over the others for trying out some prototype in React context. Whereas I would rather use CodePen for creative plain HTML, CSS and JS demos.

Repl.it

Repl is for me the go-to editor in the non-web context! It supports many different programming languages. From bash, Erlang to QBasic. So I would recommend Repl.it especially for non-web projects.

Also I noticed that the website got a whole makeover last year or so and they focused their work on performance improvements.

Repl.it is also a nice go-to editor for only classrooms or online courses as it supports so many different languages.

JSBin

JSBin, oh my old boy, was developed since 2008 by Remy Sharp. I actually do not know the concrete status of the project. As they wrote on Github, the current v4 is no longer actively maintained, but there should be some version 5 coming.

I personally mainly use JSBin for trying something out for a few minutes and trashing everything away into the "bin" afterwards. So those are not any demos I want to show to someone. It is mostly for me trying something out very quickly.

JSFiddle

JSFiddle is from 2010 - you see 2008 to 2012 had been busy editor times! JSFiddle still "seems" actively developed (cf. their roadmap) and I use it in the same way as I use JSBin: Trying something out very quickly, but without the goal to save my results and instead just throwing them away again.

JSBin and JSFiddle are both valuable to me due to their simplicity. No long loading times, simple interface and that's it. Really convenient esp. when you have no time to wait for things to load up etc.

Github Codespaces

Github introduced some new beta project called CodeSpaces. It's basically a virtual version of VSCode which you can use to edit your repos online. This move is a logical next step for Microsoft as you might know that Github and VSCode are owned by Microsoft nowadays.

I hope this overview is helpful for you and I really encourage you to try at least some of them out. Or do you already settled down for one?

Greets,

Andi