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
|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|
|External file add||Manual||Easy||Very Easy|
|Account||Free||Free||Free + Paid|
|Like, Comment, Follow||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|
|Bracket Highlight||Yes (Customizable)||Yes||Yes|
|Auto end bracket||Yes||No||No|
|Line Numbers||Yes (Customizable)||Yes||Yes|
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
- 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.
- 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.
- It saves the history, so you can revisit your previous work for a particular bin.
- I like the collaboration feature of jsfiddle. I think for any collaborative work you also will like this feature.
- Managing your work is very easy. You can make your public and private fiddles very easily without paying anything.
- Creating dummy AJAX request is also another feature. Though for dummy ajax you can use many tricky ways, but JSfiddle provides a easier solution.
- 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.
- You can access other pens which will motivate you and give you more ideas. It’s good for learning too.
- 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.
- It adds the libraries inside the script which is annoying.
- You can’t save the original bin.
- All settings are not exposed in user interface. (In pipeline. Will be added soon)
- 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.
- You can’t delete a bin once you save it, if you are not logged in.
- 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.
- The site is little heavy weight and doesn’t run as fast as the other two.
- No way to see who have forked your fiddle.
- Code windows are not at all user friendly in JSfiddle. You can’t hide them, can’t even minimise.
- It’s not 100% free and I always like free things. 😛
- No way to revision the history.
- 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.
- The result window has specific width and limited height.
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.