DEV Community

Cover image for The online Javascript playground that will blow your mind
Gábor Soós
Gábor Soós

Posted on • Updated on

The online Javascript playground that will blow your mind

Online code playgrounds are a great way to try out code snippets without setting up a project locally and firing up your IDE. You can quickly validate your idea and share it with others. The majority offer a quick and dirty solution for this. However, most of them fall short when dealing with bigger applications.

The basics

Online code playgrounds offer a variety of basic, we can say must have, functionalities:

  • syntax highlighting
  • preview window
  • file pre-processing (like Typescript, SASS)
  • inclusion of external files and JavaScript libraries
  • sharing via a short URL
  • embedding demonstrations in other pages
  • zero cost for basic features

There is a long list of editors that fulfill the above criteria: JSFiddle, CodePen, JSBin, Liveweave, PlayCode, Plunker, JSitor.

The problem

The above playgrounds are completely fine, but I wanted to share complete projects generated by framework CLIs (like Angular CLI, Vue CLI, and CreateReactApp). Although some playgrounds let you use frontend frameworks, those are usually accessed globally. The way you wouldn't write your next production application.

The features I wanted:

  • use the same stack as on a production project
  • import from Github
  • use any NPM package

The solution

The project that surprised and me and has the above features is Codesandbox.


Codesandbox lets you import your Github projects or start a new React, Angular, Vue application generated by their CLIs. It just works and boots fast. I managed to migrate my TodoApp implemented in React Hooks within seconds.

It has some nice additional features also:

  • deployment to Netlify or Zeit
  • VSCode integration (like shortcuts)
  • live collaboration
  • autocompletion
  • linting
  • devtool functionality
  • Github committing
  • container sandboxes for backend applications (Node.js)
  • it's open-source, you can contribute


I was amazed by the simplicity, speed, and feature set of Codesandbox. It feels like THE online playground that we needed. I've tried other playgrounds, but after this, I'm not looking back.

Hope you will feel the same and try out this awesome website.

Top comments (23)

pat_metzdorf profile image
Patrick Metzdorf

It's been around for quite a while now and a lot of people are using it every day.

I see it used a lot by "influencers" who need to share their ideas and examples on social media, but also a ton of educators who use it for their courses, both live and recorded.
It's pretty good and keeps getting better.

Another good one, when it comes to fullstack apps, is Glitch. Not as helpful with the initial boilerplate setup, although those can be found as templates, but it's quite good at giving you the Node backend to code at the same time and the live reload for that is impressively fast.

vuesomedev profile image
Gábor Soós

It was completely new to me.
Glitch seems promising too.

alextorres profile image
Alexander Torres

How does this compare to

johncarroll profile image
John Carroll

codesandbox is open source, stackblitz is not (though parts of it are). Otherwise, I find that both have advantages vs disadvantages over the other. For example, I've had trouble loading some angular cli configs in codesandbox (but not in stackblitz), and I've had trouble loading some libraries (like luxon) in stackblitz but not codesandbox. Though both are very similar and evolving fairly quickly so your mileage may vary.

Personally, I've come to prefer codesandbox over stackblitz for the sole reason that it is open source (codesandbox was also started before stackblitz, and I'm suspicious that stackblitz is largely a proprietary attempt to copy codesandbox).

But if you ever run into a problem with one, it's worth trying the same thing in the other.

vuesomedev profile image
Gábor Soós

I have tried it, but it doesn't seem to work out of the box

httpjunkie profile image
Eric Bishard • Edited

What about StackBlitz which had also been around for a year or two. I agree that both are mind blowing, but Stackblitz has been around for just as long if not longer. Do you know how each is different? Client based vs VM based?

Both are amazing. One cannot be mentioned and championed without mentioning the other.

johncarroll profile image
John Carroll • Edited

So, unless you have access to some non-public information, codesandbox (repo started in Nov 2016) is significantly older than stackblitz (repo started in July 2017). Personally, I'm suspicious that stackblitz is simply a proprietary copy of the open source codesandbox (not that stackblitz doesn't bring it's own innovations to the table).

I also learned about stackblitz before codesandbox (via Angular), and incorrectly thought that codesandbox was copying stackblitz.

ashvin777 profile image
Ashvin Kumar Suthar

Codesanbox is a great tool. It almost like an ide for web development. JSfiddle Codepen etc are more of snippet based tool where one can create some small small snippet to test out some basic functionality. In the same list there is one more tool you can consider is JSitor and I am really proud to create that. If you wanna more about it checkout article

vuesomedev profile image
Gábor Soós

Thanks, added it to the list.

therealkevinard profile image
Kevin Ard

Live collab??? I'm on mobile now, so I assume I'm limited with them, but could it fit a scenario like:

  • A jr is having trouble with what's on the screen.
  • says "hey, kevin. Idk why this isn't working 😭"
  • kevin: "plop the pieces into codesandbox and we'll work through it together."

That's a surprisingly difficult spec to fill. Telemetry... I need to check-back on that. (We're IntelliJ, not atom, so that's not a go-to)

albertomontalesi profile image

You can do that on vs code too and it works really well.

lostintangent profile image
Jonathan Carter • Edited

I just shipped an integrated playground experience for VS Code, which might be worth checking out? It leverages your existing VS Code setup as the rich editor, and GitHub Gists as the storage. That way, you can have a fully-featured playground experience, without really having to change your workflow. I’d love to hear whether this meets your needs, and if not, what your feedback is! It’s fully open-source and I’ve been iterating pretty quickly with the community thus far 👍

sustained profile image

I knew this article was going to be about Code Sandbox before I even opened it - and I was not disappointed.

It truly is fantastic.

fultonbrowne profile image
Fulton Browne

not as fast but Gitpod is great.

vuesomedev profile image
Gábor Soós

Seems promising also

nancinanci8 profile image
nanci nanci

I firmly believe it will bring useful values, I also often look to entertainment things like music, klingelton kostenlos is the first thing that comes to mind

waylonsims profile image

I think spotify apk is more top choice in music. But the options above are also great.

abdheshkumar profile image
Abdhesh Kumar

It is quite famous tool. I got to know from material ui. They used this tool for components demonstration.

highcenburg profile image
Vicente Antonio G. Reyes

I can finally practice creating components on Vue! Thank you for sharing!!!

jacobmgevans profile image
Jacob Evans

It's absolutely fantastic and has been using it for well over a year. Some of my best learning and experiments happen on codesandbox.

vuesomedev profile image
Gábor Soós

Hope I will say the same a year later.

I am currently working on implementing TodoApp with the same architecture in React, Vue, and Angular. The idea is that they will be very similar.

skusvv profile image

Personally, I like use playground as Chrome exstention popup. Something like this