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

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

Summary

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 (21)

Collapse
 
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.

Collapse
 
sonicoder profile image
Gábor Soós

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

Collapse
 
alextorres profile image
Alexander Torres

How does this compare to stackblitz.com/

Collapse
 
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.

Collapse
 
sonicoder profile image
Gábor Soós

I have tried it, but it doesn't seem to work out of the box
stackblitz.com/github/blacksonic/t...

Collapse
 
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

Collapse
 
sonicoder profile image
Gábor Soós

Thanks, added it to the list.

Collapse
 
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.

Collapse
 
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.

Collapse
 
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)

Collapse
 
albertomontalesi profile image
AlbertoM

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

Collapse
 
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 👍

twitter.com/lostintangent/status/1...

Collapse
 
fultonbrowne profile image
Fulton Browne

not as fast but Gitpod is great.

Collapse
 
sonicoder profile image
Gábor Soós

Seems promising also

Collapse
 
sustained profile image
sustained

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.

Collapse
 
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

Collapse
 
abdheshkumar profile image
Abdhesh Kumar

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

Collapse
 
highcenburg profile image
Vicente G. Reyes

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

Collapse
 
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.

Collapse
 
sonicoder 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.

Collapse
 
skusvv profile image
Vitalii_S

Personally, I like use playground as Chrome exstention popup. Something like this https://chrome.google.com/webstore/detail/js-playground/dndbfngnogbaloehcdbedmagjelddakk?hl=en&authuser=0