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.