JSbin, JSfiddle or Codepen, which one to use and why?

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

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • rem

    Hi Paul – great write up of the features. I wanted to chime in on the cons on JS Bin as I know it well 🙂

    – Point 1: You mean adds libraries inside the HTML, but yeah, that’s intentional difference that the other pastebins have taken, where JS Bin exposes all the code to create the page, jsfiddle and the like, will only show you the minimum you need for the page. That’s a pro and con in my view. But I thought I’d touch on it.
    – Point 2: Not sure I understand, but it sounds like you just need to get the specific revision and hit save – then you’ve got the original bin (but again, I suspect I’m reading this wrong).
    – Point 3: User settings via console is annoying – I agree – we’re fixing that: http://jsbin.com/blog/twdtw-3-codemirror-settings#usersettings 🙂
    – Point 4: Private bins are coming very soon (though the way it’s worded, it sounds like you’re talking about requesting delete).
    – Point 5: If you’re logged in when you create a bin, then you can delete the bin (and revision) at any time. If you’re logged out, then you can only delete the bin whilst you have an active session (but we’re upgrading that so your browser keeps a history of the bins you created anonymously).

    Hope that’s of help – and thanks again.

    • metalshan

      Hi Remy,

      First of all thank you very much for notifying us about the future updates of JSbin. It really helps.

      Point 1: If you are sharing your bin with someone, than it’s good t have every link in the HTML as the person who is reading can identify the used library easily. But if a person is using the bin for his own testing, the extra lines of HTML may look hazy.

      Point 2: Suppose I’ve created a bin today (jsbin.com/blahbhal/1/edit) and have shared it in some sites. Tomorrow I realize that I had done a mistake in that particular bin. So If I rectify the mistake, then the new copy will be saved to (jsbin.com/blahbhal/2/edit). But in all the sites and forums the link I provided will stiil point to (jsbin.com/blahbhal/1/edit), so people will visit the wrong one. I want to save the original (jsbin.com/blahbhal/1/edit) not want to create a second copy.

      Point 4: Ya I was talking about the request delete. I found that issue discussing in some random forum.

      Point 5: Sorry, have to put the point that it’s for logged out users (will update)

      I would also like add few suggestions as I’m a regular user of JSbin. I use JSbin lots of time to create snippets and test codes, and most of the time I’m logged in. The problem is, it saves everything (until and unless I’m deleting manually). So when I go to my bins, I find a lots of unnecessary bins which make it tough to search a particular bin. So it will be better if there is some bin management system in JSbin. 🙂 🙂

    • rem

      On sharing the url – I know what you mean. Im actually half way through updating how we present the shared urls (which removes the number from the url by default so you’re sharing the latest by default *or* you can elect to share a snapshot). That should be landing in a couple of weeks so should help!

      On your suggestion – I totally agree. In the next round of dev we’re revisiting how the listing of bins works because it’s great when the list is short, but anything over 50 bins (avg is 200, and I have 1500!) and it’s overwhelming. Watch this space is all I can right now 🙂

    • metalshan

      Yaa, this approach will help the sharing url thing. I will suggest don’t completely remove the numbering, rather make it optional…. make it like, if a user goes to a url without number it will landed in the default (or the one set by the creator) page, and if a user goes to url with number it will land to that particular bin only.

      About the suggestion: You atleast provide a feature to name a bin. So that I atleast can search the bin by its name. The filters and listing options you may add later. 🙂 🙂

    • rem

      Numbering isn’t be removing completely. It’ll look like this: https://github.com/jsbin/jsbin/issues/1232#issuecomment-38830909

      Naming bins is also coming. It’s hackable right now (kind of an easter egg feature), but we’ll provide a UI for it too.

    • metalshan

      waiting for the next release of JSbin 🙂

    • Kelderic

      I’ve used JSFiddle exclusively for a while now, but the option of sharing latest/live or a number is really nice, so I’ll be trying out JSBin.

    • rem

      Released a tonne of stuff a few months back now: Sass, editor settings, line highlighting and more: http://jsbin.com/blog – again, cheers for the review.

    • Manas N

      I love JS Bin.
      Infact I stumbled onto this page after using JS Bin and JS Fiddle for a while and then searching for “why dev prefer js fiddle over js bin”
      : )
      Live code reload, console tab, one click support for massive number of libraries, vim mode.
      That’s a JS heaven.

  • Surender Lohia

    Great. Very useful to make the decision. Thanks a lot…

  • superciliousness

    spell check ‘recommendation’

  • superciliousness

    errata:

    change “They are different and they has to be.”

    to: “They are different and they have to be.”

  • nice review, thanks for share.

    i’m use jsbin too, very lightweight and i can run on localhost 😀

  • Thanks for your words.

  • nducus

    Check out HowJS http://howjs.com – It has a much simpler UI & run JS when you’re typing.

    • metalshan

      If it’s you site then you need to improve the UI. There are some bugs also (like unnecessary console print). Need a lot of improvement to compete with the above three giants. (A suggestion)

  • Empe

    This article is kinda outdated. Codepen now supports TypeScript and Babel as well as real time errors and warnings.

  • fraserchapman

    “Hitting the run button everytime is frustrating” – CTRL + Return Run fiddle