There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So sometimes it become a confusing question which one to use; and more importantly why and when?

Let’s compare these three today and find out which one can be the most suitable one for you. So, first of all let’s compare the features of these three.

Feature comparison table

  JSbin JSfiddle Codepen
Live Output Yes No (In Pipeline) Yes
HTML pre-processor Markdown, Jade No Markdown, Jade, Haml, Slim
CSS pre-processor LESS SCSS SCSS, SASS, LESS, Stylus
JS pre-processor CoffeeScript, TypeScript, Traceur, JSX CoffeeScript CoffeeScript, LiveScript
CSS libraries No Normalize Normalize, Reset
JS libraries 40+ 30+ 8
External file add Manual Easy Very Easy
Keyboard Shortcuts Yes Yes Yes
Account Free Free Free + Paid
Like, Comment, Follow No No Yes
Fork No Yes Yes
Private works Paid Free Paid
Tags No No Yes
Panel Hide Yes No Yes (minimizable)
Error & Warnings Only JS (Real time) Only JS (Not real time) HTML, CSS, JS (Not real time)
Collaboration No Very good and free Good but paid
Theme Yes No Yes
Dummy Ajax No Yes Yes
Bracket Highlight Yes (Customizable) Yes Yes
Auto end bracket Yes No No
Line Numbers Yes (Customizable) Yes Yes
Speed Very fast Slow Fast
Embedding Yes Yes Yes
SEO friendly Yes Yes Yes
Download Yes No Yes
Locally Installable Yes No No

These are the main features provided by these three playgrounds. So according to your requirements you can choose which one is the best for you.

My Personal Recommandation

Why JSbin

  1. It is fast, light weight, windows can be hidden and shown easily. So it is very good for quick works. Especially for showing someone a quick demo or to teach something JSbin is the best.
  2. Good for embedding in your site. Because of window hiding and showing feature, I prefer JSbin over JSfiddle and codepen to ember in your site. Your visitors can easily view the output as well as the code and compare at the same time.
  3. It saves the history, so you can revisit your previous work for a particular bin.

Why JSfiddle

  1. I like the collaboration feature of jsfiddle. I think for any collaborative work you also will like this feature.
  2. Managing your work is very easy. You can make your public and private fiddles very easily without paying anything.
  3. Creating dummy AJAX request is also another feature. Though for dummy ajax you can use many tricky ways, but JSfiddle provides a easier solution.

Why Codepen

  1. Preview feature is what I like there. If someone enters in your profile he can see the preview of your public pens. So for portfolio making I will prefer codepen.
  2. You can access other pens which will motivate you and give you more ideas. It’s good for learning too.
  3. It is sort of a community. These forking and commenting really help us to grow.

Cons of them

I’m not mentioning any paragraph or table for the pros; cause, the feature table itself says about the pros of each of them. Now cons are something which play their role to hate one. So here are few cons of the playgrounds.

JSbin cons

  1. It adds the libraries inside the script which is annoying.
  2. You can’t save the original bin.
  3. All settings are not exposed in user interface. (In pipeline. Will be added soon)
  4. Once you make a bin public, then it’s really hard to make to private. You have to raise it as an issue to them and they will resolve manually.
  5. You can’t delete a bin once you save it, if you are not logged in.

JSfiddle cons

  1. Hitting the run button everytime is frustrating if you are testing a small snippet. Though they are planning to include the auto run feature; I hope it will be added soon.
  2. The site is little heavy weight and doesn’t run as fast as the other two.
  3. No way to see who have forked your fiddle.
  4. Code windows are not at all user friendly in JSfiddle. You can’t hide them, can’t even minimise.

Codepen cons

  1. It’s not 100% free and I always like free things. :P
  2. No way to revision the history.
  3. All pages doesn’t have URL hashing. You have to be a little tricky, otherwise have to click the next button again and again to reach to a pen.
  4. The result window has specific width and limited height.

Conclusion

It’s not possible that you will find all the features in a single playground. They are different and they has to be. Otherwise there is no meaning of their existence. From the feature table given above you can decide which things are necessary for you and in what conditions and can choose your suitable js/css playground. They all are good in some field and also have cons in some situations. Consider all of them and choose your one smartly.