7 of the Best Code Playgrounds

A variety of code playgrounds have appeared during the past couple of years. The majority offer a quick and dirty way to experiment with client-side code and share with others. Typical features include:

  • color-coded HTML, CSS and JavaScript editors
  • a preview window — many update on the fly without a refresh
  • HTML pre-processors such as HAML
  • LESS, SASS and Stylus CSS pre-processing
  • inclusion of popular JavaScript libraries
  • developer consoles and code validation tools
  • sharing via a short URL
  • embedding demonstrations in other pages
  • code forking
  • zero cost (or payment for premium services only)
  • showing off your coding skills to the world!

The best feature: they allow you to test and keep experimental snippets code without the rigmarole of creating files, firing up your IDE or setting up a local server. Here are seven of the best …

JSFiddle

JSFiddleJSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic today, but still offers advanced functionality such as Ajax simulation.

 
 
 

CodePen

CodePenThe prize for the best-looking feature-packed playground goes to CodePen. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding. The PRO service provides cross-browser testing, pair-programming and teaching options for just $9 per month.

CSS Deck

CSS DeckThis may be named CSS Deck, but it’s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen (I don’t know who influenced who!) but you might prefer it.

JS Bin

JS BinJS Bin was started by JS guru Remy Sharp. It concentrates on the basics and handles them exceedingly well. As far as I’m aware, it’s also the only option which offers a JavaScript console. Recommended.

Dabblet

DabbletAnother early playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou but it’s recently received JavaScript facilities. It looks gorgeous and has one killer feature — browser CSS prefixes are added automatically. There’s no need to enter that -webkit, -moz and -ms nonsense yourself.

Tinkerbin

TinkerbinTinkerbin is an alpha release and one of the simpler options here. It may not offer features above and beyond the alternatives but it’s attractive and functional.

Liveweave

LiveweaveLiveweave is slightly unusual in that it places your HTML, CSS and JavaScript into a single file. It’s not possible to share your creation, but you can download the result and store or open it locally. It’s ideal for quick and dirty private experimentation.

I guess I missed your favorite?…

Comments on this article are closed. Have a question about Web Design? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://toddish.co.uk Todd

    I probably use JSFiddle the most, but I find the service very flaky; half the time it’s down or just really slow.

    And http://tinker.io is a better alternative to tinkerbin.com imo.

  • http://ohdoylerules.com James Doyle
  • Pierre

    JS Fiddle has always worked for me. I’ve tried Code Pen but it brings Chrome to it’s knees every time I load up the homepage. I find if I want to see some cutting edge code I visit code pen and have to be prepared to wait and wait and wait for it to load.

    However if I just want to get in and get to work quickly, JS Fiddle works every time. There’s something to be said for simplicity.

  • Max

    http://bin.jhere.net is a playground that my friend @thingsinjars built to hack with maps, so devs can test their code that uses my jHERE jQuery plugin to make beautiful maps.

    But http://bin.jhere.net is not only about maps, it’s in fact a full featured, mobile friendly JS playground with the possibility of saving and sharing code via Github Gists. And it’s open source.

  • http://www.aomuabinhtien.com/ ao mua

    CSS Deck use it quite easy

  • Nelson

    I like using JS Bin because it’s fast and for its simplicity.

  • http://trgovine.merkanty.com Damir Sečki – trgovine

    Yes, I use jsFiddle all the time, but it has become very slow :(

  • Sergiu Z

    I’ve used jsfiddle in the past and liked it. I also use http://writecodeonline.com/php/ for testing some basic PHP lines if needed.

  • DAZ

    You could also have a go at writing your own!

    Here’s an article I wrote for RubySource about how to do it using Sinatra:
    http://rubysource.com/fiddling-around-with-sinatra/

  • DAZ

    Here’s the finished example – you can use loads of HTML pre-processors, sass, less and coffeescript:
    http://riddle.herokuapp.com