5 Online Playgrounds for HTML, CSS and JavaScript Compared

by on 3rd February 2012 with 12 Comments

screenshot

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

CSSDesk

screenshot

I’ll start with CSSDesk because it’s one of the oldest on this list. It’s been around for years now as a quiet and obscure little tool that is extremely helpful for playing with basic web code. CSSDesk is a very simple tool that focuses purely on HTML and CSS.

What I Like About CSSDesk

There are a lot of things that I just love about CSS Desk. There are three main sections: HTML, CSS and live preview, the sizes of which can all be easily tweaked with a click and drag. I like that you can easily see everything you need in one simple view. There’s no effort or setup here, just load the page and start creating.

There’s also basic syntax highlighting just like all of the other tools on this list. However, one fairly unique feature that you don’t often see in these types of tools is line numbers. It’s such a simple addition but I tend to like line numbers so I really appreciate the inclusion.

screenshot

The toolbar features are pretty cool as well, providing some options that you simply don’t find other places. In addition to the standard sharing feature, you also have the option to download what you just built. Further, there’s a set of default tiling background textures that are applied if you don’t manually override them. These are fun if you’re just building a button or widget of some kind and want something other than the typical plain white background.

screenshot

What I Don’t Like About CSSDesk

Honestly, there’s not much to dislike about this one. Sure, it’s simple and doesn’t have some of the fancy features the other options have, but that’s also what makes it great. I hardly ever use this one anymore but every time I do it’s so nice I think I should stop by more often.

The biggest downside for hardcore coders is the lack of JavaScript support. If this is a deal breaker for you, try checking out one of the other options.

JS Bin

screenshot

JS Bin is another popular place to tinker around with your code. The design of this app is quite minimal and really allows you to focus on the code. By default, the page only shows the HTML and live preview panes, but you can easily add JavaScript to that as well.

What I Like About JS Bin

There are quite a few nice features on JS Bin. The first thing that I found myself appreciating is the fact that refreshing the page doesn’t kill your work. The preview updates automatically but for those rare times when you do need a manual refresh, it’s nice that your first instinct (Command-R) doesn’t result in the accidental loss of an hour’s worth of tinkering.

screenshot

As with CSSDesk, you save, share and download your work. The place where this obviously pulls ahead though is the JavaScript implementation. You can obviously enter your own JS but as a bonus you can choose to include popular libraries like jQuery.

screenshot

Another cool feature is the ability to control which panes you see by manipulating the URL. For instance, “http://jsbin.com/#javascript,html,live” will get you all three panes while “http://jsbin.com/#html,live” will just get you two.

What I Don’t Like About JS Bin

To be honest, JS Bin is my least favorite option on this list. It’s not bad, but it definitely lacks the charm of the others. One thing that always gets me is that there’s no dedicated place for CSS, forcing you to embed it into your HTML. This works just fine, but it’s not as nice as the intentional separation seen in the other options.

jsFiddle

screenshot

jsFiddle has completely taken off in the past few months to a year and is probably the most popular option on this list at the moment. And for good reason, this is one amazing app. Let’s face it, once you dig into jsFiddle, you may never look at any of the other options again.

What I Like About jsFiddle

There are a ton of great things to cover in my list of reasons why you should use jsFiddle. First up is the layout. There are four panels (HTML, CSS, JavaScript and preview) so you can see everything you need to at once and resize each area on the fly. The layout system here feels really flexible and is actually sort of fun to play with.

screenshot

While we’re discussing panels, you can customize the CSS and JavaScript panels to utilize your favorite third party tools. You’ll find support for the Sass SCSS syntax and CoffeeScript.

screenshot

jsFiddle lets you create a login and view a dashboard of your past saved work. There are a ton of menu options and tools once you’ve saved a fiddle, my favorites are the ability to quickly create a fork and the option to automatically tidy up your messy code structure.

screenshot

In addition to the panel customization options, the sidebar has a bunch of other great features as well. For instance, you can quickly add both any major libraries that you want to include (jQuery, MooTools, etc.) and your own JavaScript/CSS resources.

screenshot

One last amazing jsFiddle option that I only just discovered the other day: you can embed fiddles into a webpage. This option is found under the share menu and is a great alternative to other code embedding services.

What I Don’t Like About jsFiddle

My main beef with jsFiddle is the lack of an auto update option for the preview. Once you’ve used all the other options on this list and experienced the joys of auto update, it’s hard to put up with manual refreshes every few seconds in jsFiddle.

As far as other features go, it’s the best on the list but that one annoyance often drives me elsewhere if I just want to bust out a quick test. Keyboard shortcuts help, but they’re still not as nice as something automatic.

Dabblet

screenshot

Dabblet is a fairly new kid on the block in this genre. Like CSSDesk, it focuses on only HTML and CSS with no JavaScript. However, don’t count it out because it brings some serious innovation to the table that you won’t find in any other editor.

What I Like About Dabblet

By default, Dabblet is split into three tabs: CSS & Result, HTML & Result and Result. This provides flexibility and focus while allowing you to always keep an eye on the result.

screenshot

You can change things up with the controls shown below. The split can be vertical, horizontal or taken out completely. There’s also an interesting “behind code” mode where your result is simply the background for the coding area. Notice there’s also a message about using prefix-free. I use Dabblet all the time and never noticed this until just now! This means that you don’t have to use crazy vendor prefixes and can code the simple defaults, the hidden JavaScript will make sure your browsers interprets it correctly.

screenshot

Dabblet has some great saving options as well such as “save anonymously.” It also links to your GitHub account, which coding nerds like will love.

screenshot

My favorite Dabblet feature is the super slick hover effect integration in the CSS. They’re easier to show that describe. Here two few examples:

screenshot

As you can see, hovering over certain bits of CSS brings up these little tooltips that are really great. You can get previews for fonts, colors, sizes, and even images.

What I Don’t Like About Dabblet

Dabblet is a bit quirky from a visual perspective, you either love it or hate it. I personally really enjoy using it but really wish that I had more control over the panel size. Having an auto 50/50 split is great, but I should be able to manually adjust that however I choose.

As far as I know, there’s also no way to view your HTML and CSS at the same time, which is a little annoying if you’re used to options like jsFiddle where you can keep an eye on everything at once.

Tinkerbin

screenshot

Tinkerbin is the closest alternative to jsFiddle that I’ve found. Though it doesn’t have all of the fancy features found in jsFiddle, it has a few tricks of its own that are really nice.

What I Like About Tinkerbin

The default panel layout on Tinkerbin is probably my favorite on this entire list. It’s a very logical layout that puts the code on the left and a nice big auto-updating preview on the right. The HTML, CSS and JavaScript sections are all stacked on top of each other, with optional tabs that allow you to focus on just one of these.

screenshot

Further, Tinkerbin supports even more alternate syntax options than jsFiddle. You can choose HTML or HAML; CSS, SCSS (with Compass), the old SASS syntax or LESS; and JavaScript or CoffeeScript. Needless to say, if you dig preprocessors, this is the option for you.

screenshot

Tinkerbin is the only option that allows you to swap out your preview for a nice, extensive “View Source” window.

screenshot

What I Don’t Like About Tinkerbin

Even more so than Dabblet, the Tinkerbin layout is completely rigid. Sure, I like the default setup the best, but sometimes I want to make that preview wider and I simply don’t have the option here.

Further, the saving options aren’t the best. There’s no account setup, dashboard, GitHub integration, etc. You simply save your experiments to a shortened URL.

Conclusion

By now I’m sure you can see the benefits of having a few of these sites bookmarked. I encourage you to experiment as often as possible with new ideas to keep yourself fresh and these services provide an awesome way to do it.

I hope this review has served as a helpful look into the details of each of these solutions. You should now know not only what makes each option unique but also where each falls short. This will help you make an informed decision about which one or two to primarily focus on.

I personally bounce back and forth with all of them fairly regularly but lately I’ve been hanging out mostly in jsFiddle, Dabblet and Tinkerbin. Which of these is your favorite and why?

Comments & Discussion

12 Comments

  • http://beben-koben.blogspot.com/ Beben Koben

    I already know it all ;)
    How about it http://rendur.com/
    Whether it falls within the category this post!

  • Mr.Feathers

    Thank you! I’ve never used this things before, but now I will ;)

  • http://www.giometri.com egiova

    The fact you gave your opinion in a very sincere way is very useful. Sharing experiences is always the best option.
    Personnaly I have a weakness for Tinkerbean, just feeling comfortable with it. I work with devs who prefer JSbin or Dablet. So, I assume your election will depend on your focus: web dev or app dev.
    Useful post, indeed, for starting a reflexion about the topic, thanks.

  • schadeck

    Of course if none of these do the trick for you. You can always use CodeMirror to create your own: http://codemirror.net/

  • http://nixtu.blogspot.com Juho Vepsäläinen

    I tend to favor jsbin for some casual work and sketching up. Sometimes I use jsdo.it for JavaScript specific tests I want to share with the community or embed at my blog.

    I would probably use jsfiddle a lot more if it had auto update. That’s the deal breaker for me.

  • Dustin

    Thanks for this article! I wasn’t familiar with any of these.

  • Bryan

    I think http://liveweave.com is the best for full screen editing. It also has the ability to download the code to your localhost.

  • rob

    i agree with the above user (@Bryan). http://Liveweave.com also supports context sensitive auto completion for HTML5/CSS3 tags, which IMO is very helpful.

  • http://roryokane.com/ Rory O’Kane

    JS Bin (http://jsbin.com/) now has a separate CSS tab. You can even choose between plain CSS, Less, and Stylus.

    I like JS Bin’s interface more than jsFiddle’s, but I really miss one feature from jsFiddle – the ability to change the contents of a bin/fiddle while keeping the URL the same. jsFiddle lets you do this by choosing a “base” version of your fiddle, which has a URL without a version number. JS Bin only lets you link to numbered revisions.

  • Dom

    I’ve been won over by jsbin. Unlike all the others it’s open source and you can download, hack and do whatever you want with it. I’m just doing this now. The docs on github are a bit behind but it’s just a big Node.js app. Have a go it’s great

    $ npm install -g jsbin
    $ jsbin

    Go to http://localhost:3000

  • Pranav

    Codepen.io is good too. it is the mixture of all.

  • http://wamer.net kos
Subscribe
Membership
About the Author