Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript codepen || jsfiddle || jsbin Reply To: codepen || jsfiddle || jsbin

#134290
Mottie
Member

This is NOT a comprehensive list, but it shows some of the differences that I have noticed between the sites: (updated 12/2013)

JSFiddle

Pro:

  • You can rebase a fiddle, and roughly tell how many updates/revisions there have been.
  • The tidyup button in jsfiddle cleans up/prettifies the code – it’s not perfect, but I use it all the time.
  • JSHint checker
  • Supports Emmet, SCSS (only), CoffeeScript, javascript 1.7 & other javascript libraries.
  • Quickly test the code in different versions of jQuery, MooTools, Prototype, etc.
  • Embeddable

Con:

  • Saving a fiddle saves as a fork, but now you can rebase it.
  • Slower than the other sites
  • No auto-update of code (update-as-you-type)
  • No way to tell who forked your code.
  • No way to turn off specific code windows
  • No LESS, markdown, etc.

Codepen

Pro:

  • Fast
  • Easy to use
  • Browse other pens (with previews!) for inspiration
  • Always saves your pen to the base
  • Best social interaction: view forks, comments, who loved it, etc
  • Supports Haml, markdown, Slim, Emmet, SCSS, LESS, SASS, javascript libraries, etc.
  • Embeddable

Cons:

JSBin

Pro:

  • Fast
  • Update as you type coding (toggle-able)
  • Supports markdown & jade, LESS, stylus, CoffeeScript & javascript libraries (biggest selection).
  • Ability to hide specific windows
  • Quickly test the code in different versions of jQuery, MooTools, Prototype, etc.
  • Revision history saved
  • Minimalistic interface

Cons:

  • No quick dropdowns to select a javascript library – added as script tags in the HTML
  • Not embeddable Yes it is (and has been for over a year now), select “share” and copy/paste the embed code (or just wrap your bin in an iframe and change /edit to /embed).
  • No way to save to the original bin (or rebase).
  • No way to tidy up the code
  • No code checker (JSHint)

-–

I would like to completely switch to Codepen, but I’m sticking with JSFiddle for now for three reasons:

  • Because of the code cleanup button
  • JSHint checker
  • The ability to share minor revisions of the code (revision number in the url increments) without having to fork it.