We’ve all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of:

• Setting up a dedicated directory
• Create a file with markup
• Finding the latest version of your favorite libraries, downloading them and including them in your code
• Creating your stylesheet
• Configuring your webserver

That seems like an awful lot of work just do do some simple code testing. Thankfully there are tools that make this type of work trivial.

In this tutorial, I’d like to go over one of my favorite tools for interactive JavaScript testing, JSBin.

The Case for JSBin

As I mentioned previously, in many cases you simply need to test a small subset of JavaScript code. Setting up a whole development environment for such a use case, in most cases, doesn’t really make a lot of sense unless there’s a clear dependency on hardware (for example, WebRTC) or reliance on a third party API or product where you need backend services to successfully access information.

What JSBin offers is a browser-based user interface where you can enter:

• HTML markup
• CSS
• JavaScript

… and get immediate feedback based on your code. In addition, you can optionally include any number of popular frameworks into your onscreen code, allowing you to leverage the framework’s capabilities as well. The main benefit is the real-time feedback you get from the updates you make.

Let’s look at these tools a little more closely.

Getting to Know JSBin

JSBin was created and is actively maintained by well-respected developer Remy Sharp. The idea to develop it came from the need to collaborate interactively with other developers to debug JavaScript code. It has since matured into a robust tool which:

• Allows groups of developers to work together to solve code problems
• Serves as a sort of bin that developers can go back to reference
• Makes sharing code and solutions incredibly easy

JSBin is also opensource licensed under the liberal MIT license allowing community members to freely contribute to it or fork it to create their own customized solutions.

JSBin offers a straightforward UI that breaks each type of code into individual vertical panels.

Each panel provides a mini-IDE that allows you to enter code and receive immediate feedback via the Output panel. For example, if I add the following code to the HTML panel:

<div>Rey Bango</div>

I’ll immediately see the new element and the text render in the Output panel.

Of course, you can add any number of elements to the markup allowing you to create a page quickly and interactively. Being able to style your markup is equally important since in some cases, the JavaScript you’re testing is explicitly designed to manipulate styles and CSS rules applied to your elements. That’s where the CSS panel comes in. It offers full CSS style capability, so you can layout your elements to suit your needs, even taking advantage of CSS3 rules. So adding the following code:

div { 
  color: red; 
  font:20px Tahoma,sans-serif; 
  border: 1px solid black; 
  width: 100px;
  margin: 30px;
  padding: 10px; 
  transform:rotate(15deg);
  -webkit-transform:rotate(15deg); 
}

… provides the following results:

So far, the code has been simple but I need to stress that the important thing here is not the complexity of the code but the fact that you’re able to receive immediate feedback. I could easily grab more involved code, like that of the CSS Transitions demo on the Mozilla Developer Network and add that into JSBin to produce a similar effect for my test code:

div { 
  color: red; 
  font:20px Tahoma,sans-serif; 
  border: 1px solid black; 
  width: 100px;
  margin: 30px;
  padding: 10px; 
  -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}

div:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

So while I’m more specifically focused on the JavaScript aspect of JSBin, it’s clear that web developers in general can benefit from the interactive nature of the tool.

Using JavaScript

For me, the main benefit of JSBin is the ability to test JavaScript quickly. I’m able to whip up quick and dirty code that I can test and adjust on-the-fly without the need to spin up a whole work environment. Sure, most browsers provide developer tools that offer a console where you can enter quick snippets but they’re not yet at a point where you can interactively test large amounts of code, let alone define complementary custom markup and styling to the output.

JSBin’s JavaScript panel is where you’re able to define your custom JavaScript code. As expected, you have full access to the language as well as the DOM API supported by the browser. This means that when I write:

var myDiv = document.querySelector( "div" );

myDiv.innerHTML = "Foo";

it:

• Allows me to create a local variable
• Provides access to the div element I created in the HTML panel
• Changes the element’s content

The results are immediate, allowing me to debug as I’m writing the code.

Having access to plain ole JavaScript is great but it’s very common to use a JavaScript utility library like jQuery or a full-blown framework like Ember to abstract the complexities of cross-browser development or create app-like experiences in the browser. JSBin addresses this by allowing you to include most of the popular libraries into your test code.

Clicking on the Add library menu option provides a very long list of supported libraries that can be injected into your JSBin project. What this does is creates a script tag in your code that pulls the JavaScript file from a CDN. Selecting “jQuery 2.0.2” from the list injects the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />

… while selecting Backbone adds the following:

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>

Notice how JSBin uses different CDNs based on where the files are available. Most of the big name projects are listed, including:

• jQuery
• Dojo
• Modernizr
• Bootstrap

… and many more.

Adding in jQuery gives me full access to all of the libraries’ excellent helper methods and capabilities. I can switch to using its nice, terse API to access DOM elements and set values in one nicely-chained line of code:

$( "div" ).text( "Foo" );

Or, I can take it a bit further and test out an Ajax request to Flickr’s API to pull back JSON data and render images based on it:

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "div" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

The code above would render as follows:

Having the full power of these libraries and frameworks really opens up the testing scenarios that you can setup with JSBin.

Again, this is a list of the most popular libraries and frameworks available and clearly, some niche ones just won’t be in the list. If you need to add your own custom library, the documentation shows how you can add it in yourself.

Additional Features and Resources

I find JSBin invaluable for my desktop development and as I shift to focusing on mobile devices, I’m glad to see that I’ll be able to continue to use it to test on those devices as well. As of version three, JSBin has incorporated a feature called “live rendering” which acts as a simulcast across multiple connected devices. These devices aren’t explicitly connected but instead, leverage a specific URL which allows them to essentially render the results at the same time. You can see this feature in action in the following video.

Another important feature is the ability to create your own JSBin account where you can save your bins for future reference and sharing. Registration is simple and you can even leverage your Github credentials via Github’s OAuth functionality.

The key benefit to registering is the ability to keep a history of the bins you create so that you can revisit them later.

To really get a feel for the full breadth of functionality offered by JSBin, I urge you to go to Remy’s Youtube channel for JSBin, where he’s done a bang up job of creating tutorial videos exploring all of the excellent features of the service. The FAQ also does a great job of answering common questions you might have.

JSBin is one of my most valuable tools I’ve found for JavaScript development. The fact that it’s free and open source makes it a no-brainer to add to any toolkit. And Remy’s continued commitment to the service is commendable. All of this combined, makes it easy for me to spread the word about such a great tool.