Useful JavaScript And jQuery Tools, Libraries, Plugins


Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources.

In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. Among other things, you’ll find handy services and online utilities, recently released JavaScript libraries and jQuery plugins.

You might want to take a look at the following related posts:

Useful JavaScript Libraries

Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More5
The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under.

Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more6

Blackbird: Open Source JavaScript Logging Utility7
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.

Blackbird - Open Source JavaScript Logging Utility8

Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. It is free for all uses and made available under the MIT or GPLv2 licenses.


Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.


Highcharts – Interactive JavaScript charts13
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Highcharts - Interactive JavaScript charts14

jStat: a JavaScript statistical library15
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R).

jStat : a JavaScript statistical library16

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.


Visual Event JS Library19
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end the author created Visual Event to help track events which are subscribed to DOM nodes.

Allan Jardine20

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.


Popcorn.js, is a HTML5 javascript library for integrating the web into video production.


SlickGrid is a JavaScript grid/spreadsheet component.

Welcome to the SlickGrid!26

JavaScript InfoVis Toolkit27
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

JavaScript InfoVis Toolkit28

Handlebars.js: Minimal Templating on Steroids29
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. You might want to read ThinkVitamin’s article Getting Started with Handlebars.js30, too.

Handlebars.js: Minimal Templating on Steroids31

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.


Load JavaScript and Stylesheets on Demand | SidJS34
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they’re needed.

OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit. It contains fully revised codebase of QuipuKit and introduces many new components and features.


D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.


Tempo: JSON rendering engine39
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It not only makes AJAX content easier to work with but also manages clear separations of concerns, i.e. no HTML in your JavaScript files!


Art Deco – Selectable Text41
A quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge here was to achieve ‘split letters’ as part of a Web page layout, while retaining the ability to select text.

Art Deco selectable text!42

Using Less.js to Simplify Your CSS343
LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules.

Using Less.js to Simplify Your CSS344

PhantomJS: Headless WebKit with JavaScript API45
PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

JavaScript Tools and Utilities

TestSwarm: Continious and Distributed JS Testing46
TestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious and distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.

TestSwarm: Continious and Distributed JS Testing47

On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.


Doctor JS50
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint51 as well.

Doctor JS52

Remy Sharp’s JSConsole53
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.


JavaScript Library Boilerplate55
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!

Ben Alman56

JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.


Jasmine: BDD for your JavaScript59
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Jasmine: BDD for your JavaScript60

ObfuscateJS: JavaScript compressor61
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.

ObfuscateJS - A Free Javascript Obfuscator62

Online JavaScript beautifier63
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by

PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.


JSONView is a Firefox extension that helps you view JSON documents in the browser.


jsPerf: JavaScript performance playground68
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.


jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.


Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.


HTML + JSON Report75
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.

HTML + JSON Report demo76

JSON Editor77
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.

JSON Editor78

JSCSSP, a CSS parser in JavaScript79
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.

jQuery Plugins

Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.


jQuery Waypoints82
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Waypoints83

Pietimer jQuery Plugin84
Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer.

Pietimer jQuery Plugin85

ImageLens: a jQuery plug-in for Lens Effect Image Zooming86
You can use this jQuery plug-in to add lens style zooming effect to an image.

ImageLens – A jQuery plug-in for Lens Effect Image Zooming87

Timeglider jQuery Plugin/Widget88
Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning or any other tasks where you’ll need to display a time frame.

Timeglider jQuery Plugin/Widget89

960 Grid on jQuery-Mobile90
A port of a 960 grids to use in jQuery mobile. It aims to bring more flexibility to jQuery-mobile layouts and thus makes it easier to use on tablets. The code is available on Github under MIT license.

960 Grid on jQuery-Mobile91

diagonalFade jQuery plugin92
A jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.

diagonalFade : A jQuery plugin93

Wijmo jQuery UI Widgets94
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Wijmo - jQuery UI Widgets95

Lettering.js – A jQuery Plugin for Radical Web Typography96
CSS does not offer a complete down-to-the-letter control. Here you’ll find kerning type, editorial design, manageable code and complete control — just a few examples of what can easily by done with Lettering.js.

Lettering.js - A jQuery plugin for radical web typography.97

jslide is a jQuery plugin to create a simple slideshow of list elements, containing either images or other content.


Isotope: A jQuery Plugin for Magical Layouts100
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.


Better Check Boxes with jQuery and CSS102
In this short tutorial, the authors will create a replacement for the default browser checkboxes in the form of a simple jQuery plugin.

Better Check Boxes with jQuery and CSS103

Thumbnails Navigation Gallery with jQuery104
In this tutorial the authors are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. They are going to use jQuery and some CSS3 properties for the style.

Thumbnails Navigation Gallery with jQuery105

jQuery Quicktag106
Quicktag is a tagging plugin for the jQuery JavaScript library.

DataTables (table plug-in for jQuery)107
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

DataTables (table plug-in for jQuery)108

jQuery Tags Input109
This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.

jQuery Tags Input - XOXCO110

a jQuery library that enhances a date picker input area with a more convenient date selection.


Last Click

JavaScript Commodore Emulator113
This emulator is meant as a ‘proof of concept’ and uses the HTML5 Canvas-element to render the Commodore 64 screen layout.

JavaScript Commodore Emulator114

A remix of the classic Breakout game. This one will keep you busy for a while.

BreakDOM - A remix of the classic Breakout game.116

Would you like to see more similar round-ups on SM in the future?117customer surveys118


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118

↑ Back to topTweet itShare on Facebook

Soh Tanaka, based in Los Angeles, CA, is a passionate front-end developer and designer who recently launched a CSS Gallery called Design Bombs. He specializes in CSS driven web design with an emphasis on usability and search engine optimization. For more front-end Web development tutorials, check out his Web design blog.

  1. 1

    Marcin Dziewulski

    April 7, 2011 7:05 am

    I would like to suggest MobilyMap plugin: – jQuery plugin that can create a Google Maps-like, draggable interface from any image. Cheers!

    • 2

      I just searched the entire post for a map script and didn’t see any so thanks for posting this.

  2. 3

    Sean McCambridge

    April 7, 2011 7:14 am

    Great post. I’m going to bookmark this so I remember where to find these js tools. With so many choices, I’d love to see some interviews with prominent js developers to see what they’re using at the moment individually.

  3. 4

    Nice roundup ;) I’ve been using Highcharts recently and would advise to anyone in need for simple yet great looking data visualizations.
    Here’s are some things we did with Highcharts:

    Lettering.js also looks real nice ;)

  4. 6

    You know you’re good, but I think you guys are simply amazing. Keep pushing us into better web developments with your libraries, designs, tips and tricks.

    Kind regards,

  5. 7

    Joseph McCullough

    April 7, 2011 7:52 am

    I’m surprised JSHint isn’t on here.

  6. 8

    But I also used this list

  7. 9

    Regarding the poll question (more roundups like this in the future?) I say yes, but only if this sample is representative of what’s to come. Everything in this roundup is either best of breed or new+compelling+innovative. No jQuery Slider roundups, please. ;-)

  8. 10

    I’m a JS junkie so this list is something I’m going to keep in mind. Thank you!

  9. 11

    Absolutely fantastic post

  10. 12

    Minimee is an ExpressionEngine add-on only. To use it elsewhere you’d have to rip out the included, third-party libraries and repurpose them. Perhaps worth mentioning.

  11. 14

    Elf M. Sternberg

    April 7, 2011 11:03 am

    Hey, no love for ProcessingJS? I mean, seriously, is there anything John Resig can’t do?

    • 15

      processing-js is mint. Definitely worth checking out! I’d love to see more developers take advantage of this library for animations inside a design, like the header on processing-js’ website.

  12. 16

    Lettering.js is an incredibly useful script. Works great when you need to kern a typographical logo.

  13. 17

    Awesome post could spend all night looking through them. Definitely want to find some projects to use some of these!

  14. 18

    Nothing at all for Mootools, such a shame ;)

  15. 19

    amazing collection,
    i’m looking for a js framework to do some calculation or simple maths, any idea ?

  16. 22

    nice list, i fall in love with popcorn.js ;)

  17. 23

    Love these libraries so much. Very useful. Thanks SM!

  18. 24

    Good collections. Now I know where to look for JS libraries :)
    Nice work!!!

  19. 25

    These kind off posts are the most usefull too me. Thanks SM

  20. 26

    Amazing collection, must bookmarked for every developer. many thanks

  21. 27

    Best article ever on SmashingMagazine !!!

    I was waiting for this kind of articles since years !!!

  22. 28

    Thank`s for great article :)

  23. 29

    Great list, thanks for the hard work compiling it.

    Maybe it’s just my age, but I do find these lists a bit overwhelming. There’s just too much good stuff out there.

    Maybe it would feel less overwhelming if there was a table of contents at the top? Perhaps get a little sausage.js action on the go too? I’m not sure what the answer is, however I do have a tendency to abandon reading posts like this — as good as they are.


  24. 30

    wonderful list of plugins and js stuff.. :)

  25. 31

    The idea of Less makes me feel very nervous, to say the least. Why? Because JavaScript is the layer for behaviour, and CSS is the layer for presentation. Less looks to be putting presentation functionality into the wrong layer.

    Why is this a problem? Two main reasons. 1) It’s violating the separation of concerns, which could lead to confusion down the line when some future designer comes into a project and can’t find the presentation data in the CSS because it’s actually implemented in JavaScript. 2) A JavaScript error in some other script on your page could break the presentation that depends on Less, leaving your page looking anything from rather odd to completely broken, depending on how dependant on Less your design is. And that’s saying nothing for web crawlers, non-visual browsers and other user agents that don’t know JavaScript or have it turned off.

    While it would be nice if CSS was more featureful (though it does support some limited variables as of more recent versions such as counters) I still feel using JavaScript to fill the gaps isn’t the way to go.

  26. 32

    Wellington Villegas

    April 8, 2011 5:22 am

    Everytime i get amazing tools here.

    Thanks Smashing Magazine

  27. 33

    Two other tools that have helped me tremendously:

    This JS gives you the ability to write specific CSS code for each operating system and each browser.

    corrects standards deficiencies in IE:

  28. 34

    You might want to revise your list and remove the april fools jokes *cough* JavaScript Library Boilerplate *cough*

  29. 35

    Awesome set of libraries and plugins. Thanks for sharing.

  30. 36

    Neat Post … Bookmarked . Keep em coming SM .

  31. 37

    Hunter Hastings

    April 9, 2011 10:20 am

    Fantastic post full of quality stuff.

    HighCharts is a great inclusion. I just started using them the other day for some projects. Clean, powerful, and all around aweosme.

  32. 38

    What’s wrong with jQuery and Javascript, and writing your own code?

    It seems like half my business these days is cleaning up sites built by other developers, who each use some different framework that I have to decipher in order to unbreak the mess they made. The work might be half my business, but it seems to eat up 80% of my time.

    I don’t feel like there is anything I can’t do with jQuery and some time and energy. Is our industry just so overloaded with a lack of creative problem solvers that all of these are necessary?

    I am sure I was probably of the same mind when jQuery was new – at least new to me. But it is so widely in use, and exists on user’s computers via the various CDN hosts that it exists already on most people’s computers these days, which cuts down on load time and speed of site, as well as server load and http requests for the client’s web server.

    Sites like this shove dozens upon dozens of articles at us about how to improve speed, and how adding our fun little gizmos to sites don’t improve overall user experience and decrease the usability of a site, then follow up with articles like these that drive people in the complete opposite direction.

    Ages ago, some wizened old fool said “Too many cooks spoil the soup”. This axiom holds true still in the technology world.

  33. 39

    Great List!

    I would like to recommend jQuery Smart Autocomplete ( plugin to this list.

    Creating sophisticated, custom auto complete fields have become easy with this plugin.

  34. 40

    Simply WOW.Great compilation. Thanks!

  35. 41

    Someone knows about a good or similar implementation for LightBox in jQuery?


  36. 42

    good article, i like it. thank you very much . hoho

  37. 43

    Very nice round up! Some tools are really great.

    You might also want to include dhtmlx library in your next round up:

    Although it’s not very spread out, they have a good set of JavaScript ui widgets, and a very powerful datagrid.

  38. 44

    Another great new resource is the Vanity jQuery Toolset it has a great amount of really useful jQuery plugins.

  39. 45

    I think you forgot Mootools..

  40. 46

    good collection and sharing, thanks. One more site to suggest:

  41. 47

    Not able to get Highcharts to work for me yet but it seems very interesting and useful
    Thanks for sharing!

  42. 48

    great job !!!!

  43. 49

    Hum… The Javascript Library Boilerplate is a joke, right?

  44. 50

    Shai Ben-Yehuda

    April 22, 2011 7:17 am

    Please add jBart to the list (
    jBart is a visual jquery toolkit.

    Javascript libraries are too limiting, they force their HTML and API. In too many cases they are not flexible enough to be used.
    jQuery is different. It does not force any html on the developer and does not have closed data API. This is the reason it is so popular.

    Like jQuery, jBart does not force its html or data structures on you.
    You start with your xml data and build the widgets as a view/editor of your data. You can replace/inject html and javascript at any level.

    jBart is very useful to build complex interactive e-commerce search boxes and interactive product galleries with complex filtering.
    Look at interactive smashingmagazine search box (with images) done with jBart, and goto ‘Customize’ to see how it was developed:

  45. 51

    I am glad I came across your blog today as it will now be part of my daily reading. Thanks for sharing this interesting article.

  46. 52

    Thanks for sharing good work…

  47. 53

    Really surprised head.js isn’t on this list.

  48. 54

    thanks, really interesting article, probably you spent a lot of time harvesting that tools out there

  49. 55

    hey can you make a google chrome browser plugin that add the ability to pie an image or advertisement. like pie in the face plugin. (image or advertisement gets pied in the face sorta thing). and it can stay there till you leave the page or go away after a small time. Be able to adjust the duration of the pie aswell.

  50. 56

    Thanks for sharing
    good work…

  51. 57

    jQuery Waypoints is great, except for the bug on iOS devices.
    If you reload a scrolled page with Waypoints implemented it doesn’t fire an event. So if you fade in your content it will just stay invisible after such reload – till the next scroll event. I found no fix for that on the net, so made my own one.
    I detect iOS devices. Once detected, I fire all the Waypoints events on page load. That fixes the bug on mobile and keeps the Waypoints working on desktop.

    The code itself is:


    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
    if (isiPad || isiPhone) {
    // here I fire the events


↑ Back to top