codepen || jsfiddle || jsbin

[aoeui]

Hi,

yes http://codepen.io/ is awesome ;)

I used to fiddle around in http://jsfiddle.net/ and I do not want to through out http://jsbin.com/ into bin just because I do not know it much.

Is there any winner ?
What do you use most often ?
And if so, why do you prefer one to others, what are the merits and/or drawbacks ?

[TheDoc]

I used to use JS Fiddle all of the time, but I use Codepen exclusively now. I like having a proper profile and a bunch of the options that ome with it.

[aoeui]

I like it for similar reasons. All the others seem to have similar features and I like the Github login, which reminds me http://dabblet.com/ which I used to like a lot too but not using anymore.

To me it seems that all have HTML, CSS, JS and some preview ability.

What I am thinking and do not know (not so much experience with those other “sandboxes”) is any of these like superior somewhat to others or are those engines equal these days ?

[chrisburton]

I like CodePen for similar reasons Gray has mentioned. However, I prefer a light UI that Dabblet offers. If only they would combine.

[Mottie]

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:

• No way to check revision history (You can just go back a fork in JSFiddle)
• No way to turn off specific code windows http://blog.codepen.io/documentation/features/full-screen-editing/
• No way to tidy up the code You can. Just select all the code and press SHIFT + TAB
• No code checker (JSHint) There is! Press Command-Shift-7 on Mac or Control-Shift-7 on PC
• Not easy to test the code in different versions of a library. You can link up any JS resource you want though. http://blog.codepen.io/documentation/features/adding-external-resources/ But the dropdown menu only allows you to link to the latest copy.
• No way to disable the “update as you type coding” Specifically for JavaScript, you can :: http://blog.codepen.io/2013/04/04/auto-run-in-javascript-now-optional/

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.

[Kitty Giraudel]

I’ve done a round-up on code playgrounds a couple of months ago: http://hugogiraudel.com/2012/11/19/css-playgrounds/.

Pretty much what Mottie said anyway. Hope it helps.

[aoeui]

@Hugo … thanks for the article ;)

[Chris Coyier]

Just to address some of the “Cons” in CodePen … =)

> No way to turn off specific code windows

You can’t turn them off, but you can maximize any of the editors :: http://blog.codepen.io/documentation/features/full-screen-editing/

> No way to tidy up the code

You can. Just select all the code and press SHIFT + TAB

> No code checker (JSHint)

There is! Press Command-Shift-7 on Mac or Control-Shift-7 on PC

> Not easy to test the code in different versions of a library.

You can link up any JS resource you want though. http://blog.codepen.io/documentation/features/adding-external-resources/ But the dropdown menu only allows you to link to the latest copy.

> No way to disable the “update as you type coding”

Specifically for JavaScript, you can :: http://blog.codepen.io/2013/04/04/auto-run-in-javascript-now-optional/

[remy]

Just to address the “cons” in jsbin (too :)

No quick dropdowns to select a javascript library – added as script tags in the HTML

If you switch between different versions of the library, then it’ll just swap out the script, though I think you want to switch back and forth really (though it used to exist, I removed it for simplicity).

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

I’ve never quite been sure what this is. I’ve heard jsfiddle has this rebase thing, which because I’m not user, I don’t really know what it is.

You can save the original for sure though (but I suspect you mean something else, like restoring).

Other “pros” that I think are pretty big, but missed out:

• CodeCasting (also known as Professor Mode in CodePen pro accounts)

• Remote rendering (i.e. point any other device, mobile, old crappy browser to the same url, and it’ll live reload as you code)

• Locally installable (via npm install jsbin)

[Joe Johnson]

It’s been 2 months since Remy’s post, and jsbin was my preferred go-to as of last spring due to integration with GitHub (gists). Remy — very good work there (https://gist.github.com/say2joe/5464912). However, I’ve seen a lot going on with CodePen (which I’ve barely used in the past). I really like the fact that you can easily host any assets required by the snippet very easily.

And, it looks like jsbin and codepen support “teaching” / “sharing” modes — which, if you go to the above gist, you’ll see I would’ve really appreciated last April. Thanks for all the hard work guys, but it looks like this marathon will draw to a close within the next 6-9 months with where everything is at now…

has anyone done a recent (last month) matchup?

*NOTE: Great column / forum for CSS-Tricks!

[queryj]

One feature that seems to be missing in all of these playground is search. I am not talking about searching inside a script. I am talking about searching through my entire fiddles to find some scripts I worked on 3 days ago, 5 months ago, 1 year ago, 10 years ago. I have a lot of fiddles in jsfiddle, but it is really really hard for me to dig out something I used to have worked on. Currently the only option is to eyeball the entire list page after page and see if I am lucky. I tried google searching my fiddles as well, nothing turns out.

[__]

No way to disable the “update as you type coding”

Specifically for JavaScript, you can :: http://blog.codepen.io/2013/04/04/auto-run-in-javascript-now-optional/

Wasn’t aware of that; excellent. Honestly, codepen’s autorun was the one “feature” that frustrated me the most, and the main reason that I never used pens for my own stuff.

Now you just need to be able to disable it everywhere. : )

[__]

Did you come here just to spam us?

The threads you’ve posted in are long dead. This is not an advertising forum.

[Author]

Posts