50 Fresh JavaScript Tools That Will Improve Your Workflow


JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.

Many things that were once accomplished using Flash objects can now be built using JavaScript – with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.

Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.

Here are a few other posts that you might find interesting:

Useful JavaScript Tools

Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit5.


Sugar Test7
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.


JS.Class: Ruby-style JavaScript9
JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.


JSON Formatter and Validator11
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.

Faux Console: Simulating a Firebug, Safari or Opera debugging in IE12
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.

JS Bin13
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the video introduction14 to see JS Bin in action.

JS Bin15

PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.

Page Speed17
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow18 that evaluates your web pages for performance. Read more about Page Speed19 best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work20 (who worked for Yahoo! and now works for Google).

Page Speed21

prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump23 utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.


Spket IDE25
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter26 feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.

Spket IDE27

Obtrusive JavaScript Checker28
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension29 or a Greasemonkey script30.

Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.


Javascript Compressor33
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read – which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.

Javascript Compressor34

Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.


RockStar Web Profiler37
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation38 to get an overview of its many awesome features.

bookmarklet maker39
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.

bookmarklet maker40

Tiny JS41
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.

Tiny JS42

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.


A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download47.

CodeRun Code Search48
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE49 without having to download the project locally.

BaseJS: A Mobile (Safari) Javascript Framework50
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).

CodeRun Code Search51

MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page53.


Utility Libraries and Components for JavaScript

narwhal is a server-side JavaScript library following the ServerJS56 standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR57 for PHP.

uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos59 to see the plugin in action.

Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.


Booklaylet is a JS library for letting you easily deploy your bookmarklet63 applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.

JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.

HTML 5’s Canvas66 element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern67 demo and the Marbles in Space68 (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.


liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.

Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.


JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development74 philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action75.

This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page77 to see the library in action.

Useful JavaScript Libraries

GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page79 to see different types of GlassBox implementations.


jQuery TOOLS81
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page82.

jQuery TOOLS83

Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.

Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.


Unobtrusive Table Actions Script87
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.

LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.


JavaScript Graphical / Virtual Keyboard Interface90
This JavaScript package adds a virtual keyboard interface into web pages.

JavaScript Graphical / Virtual Keyboard Interface91

Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.


qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.


Educational JavaScript Resources and Tutorials

Ajax Frameworks Decision Center96
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.

Ajax Frameworks Decision Center97

jQuery vs MooTools98
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.

Ajax Framework Analysis Results99
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.

Ajax Framework Analysis Results100

Sexy Drop Down Menu w/ jQuery & CSS101
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.

Sexy Drop Down Menu w/ jQuery & CSS102

Easy Display Switch with CSS and jQuery103
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.

Easy Display Switch with CSS and jQuery104

Create a Slick and Accessible Slideshow Using jQuery105
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page106 to see the slideshow in action.

Create a Slick and Accessible Slideshow Using jQuery107

Learning Advanced JavaScript108
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.

Learning Advanced JavaScript109

JavaScript tests & Compatibility tables110
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.

JavaScript tests & Compatibility tables111

Code Conventions for the JavaScript112
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.


  1. 1 http://www.smashingmagazine.com/2009/02/08/50-extremely-useful-javascript-tools/
  2. 2 http://www.smashingmagazine.com/2009/03/02/40-stand-alone-javascript-libraries-for-specific-purposes/
  3. 3 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
  4. 4 http://ejohn.org/blog/fireunit/
  5. 5 http://www.softwareishard.com/blog/firebug/fireunit-testing-in-the-firebug-world/
  6. 6 http://ejohn.org/blog/fireunit/
  7. 7 http://sugartest.scriptia.net/
  8. 8 http://sugartest.scriptia.net/
  9. 9 http://jsclass.jcoglan.com/
  10. 10 http://jsclass.jcoglan.com/
  11. 11 http://jsonformatter.curiousconcept.com/
  12. 12 http://icant.co.uk/sandbox/fauxconsole/
  13. 13 http://jsbin.com/
  14. 14 http://jsbin.com/about#video
  15. 15 http://jsbin.com/
  16. 16 http://phpjs.org/
  17. 17 http://code.google.com/speed/page-speed/
  18. 18 http://developer.yahoo.com/yslow/
  19. 19 http://code.google.com/speed/page-speed/index.html
  20. 20 http://stevesouders.com/
  21. 21 http://code.google.com/speed/page-speed/
  22. 22 http://james.padolsey.com/javascript/prettyprint-for-javascript/
  23. 23 http://www.petefreitag.com/images/blog/jsdump.gif
  24. 24 http://james.padolsey.com/javascript/prettyprint-for-javascript/
  25. 25 http://www.spket.com/
  26. 26 http://www.spket.com/javascript-formatter.html
  27. 27 http://www.spket.com/
  28. 28 http://robertnyman.com/obtrusive-javascript-checker/
  29. 29 https://addons.mozilla.org/en-US/firefox/addon/9505
  30. 30 http://code.google.com/p/obtrusivejavascriptchecker/downloads/detail?name=ObtrusiveJavaScriptChecker-0.8.user.js&can=2
  31. 31 http://softwaremaniacs.org/soft/highlight/en/
  32. 32 http://softwaremaniacs.org/soft/highlight/en/
  33. 33 http://javascriptcompressor.com/
  34. 34 http://javascriptcompressor.com/
  35. 35 http://www.incaseofstairs.com/firediff/
  36. 36 http://www.incaseofstairs.com/firediff/
  37. 37 http://rockstarapps.com/joomla-1.5.8/products/razor-web-profiler/overview.html
  38. 38 http://docs.google.com/Present?docid=acmj49ptxpc7_7dx5qzcf4
  39. 39 http://userjs.up.seesaa.net/js/bookmarklet.html
  40. 40 http://userjs.up.seesaa.net/js/bookmarklet.html
  41. 41 http://tinyjs.com/
  42. 42 http://tinyjs.com/
  43. 43 http://www.jscharts.com/home
  44. 44 http://visitmix.com/lab/glimmer
  45. 45 http://visitmix.com/lab/glimmer
  46. 46 http://jania.pe.kr/aw/moin.cgi/JSSpec
  47. 47 http://code.google.com/p/jsspec/downloads/list
  48. 48 http://www.coderun.com/Search/?q=Ajax
  49. 49 http://www.coderun.com/ide/
  50. 50 http://iphoneized.com/2009/04/basejs-mobile-safari-javascript-framework/
  51. 51 http://www.coderun.com/Search/?q=Ajax
  52. 52 http://mochaui.com/
  53. 53 http://mochaui.com/demo/
  54. 54 http://mochaui.com/
  55. 55 http://narwhaljs.org/
  56. 56 https://wiki.mozilla.org/ServerJS
  57. 57 http://pear.php.net/
  58. 58 http://www.uploadify.com/
  59. 59 http://www.uploadify.com/demo/
  60. 60 http://www.gscottolson.com/blackbirdjs/
  61. 61 http://www.gscottolson.com/blackbirdjs/
  62. 62 http://www.digitalhymn.com/argilla/booklaylet/
  63. 63 http://en.wikipedia.org/wiki/Bookmarklet
  64. 64 http://javascriptools.sourceforge.net/
  65. 65 http://www.lamberta.org/blog/doodle/
  66. 66 http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element
  67. 67 http://www.lamberta.org/demo/js/doodle/examples/01/spiral.html
  68. 68 http://www.lamberta.org/demo/js/doodle/examples/01/rotate.html
  69. 69 http://www.lamberta.org/blog/doodle/
  70. 70 http://digitalhymn.com/argilla/liteajax/
  71. 71 http://hyper-metrix.com/#Burst
  72. 72 http://hyper-metrix.com/#Burst
  73. 73 http://code.google.com/p/js-test-driver/
  74. 74 http://en.wikipedia.org/wiki/Test-driven_development
  75. 75 http://www.youtube.com/watch?v=V4wYrR6t5gE&eurl=http%3A%2F%2Fwww%2Egmodules%2Ecom%2Fgadgets%2Fifr%3Furl%3Dhttp%253A%252F%252Fgoogle%2Dcode%2Dproject%2Dhosting%2Dgadgets%2Egooglecode%2Ecom%252Fsvn%252Fbuild%252Fprod%252Fv&feature=player_embedded
  76. 76 http://code.google.com/p/jspdf/
  77. 77 http://jspdf.googlecode.com/svn/trunk/examples/basic.htm
  78. 78 http://www.glassbox-js.com/
  79. 79 http://www.glassbox-js.com/#examples
  80. 80 http://www.glassbox-js.com/
  81. 81 http://flowplayer.org/tools/index.html
  82. 82 http://flowplayer.org/tools/demos/index.html
  83. 83 http://flowplayer.org/tools/index.html
  84. 84 http://neofreeman.freepgs.com/Moousture/
  85. 85 http://cssglobe.com/lab/tablecloth/
  86. 86 http://cssglobe.com/lab/tablecloth/
  87. 87 http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script
  88. 88 http://livepipe.net/
  89. 89 http://livepipe.net/
  90. 90 http://www.greywyvern.com/code/javascript/keyboard
  91. 91 http://www.greywyvern.com/code/javascript/keyboard
  92. 92 http://digitalhymn.com/argilla/tipmage/
  93. 93 http://digitalhymn.com/argilla/tipmage/
  94. 94 http://qgallery.quadrifolia.de/
  95. 95 http://qgallery.quadrifolia.de/
  96. 96 http://www.athenz.com/app/decision/center/ajax
  97. 97 http://www.athenz.com/app/decision/center/ajax
  98. 98 http://jqueryvsmootools.com/
  99. 99 http://raibledesigns.com/rd/entry/ajax_framework_analysis_results
  100. 100 http://raibledesigns.com/rd/entry/ajax_framework_analysis_results
  101. 101 http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
  102. 102 http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
  103. 103 http://designm.ag/tutorials/jquery-display-switch/
  104. 104 http://designm.ag/tutorials/jquery-display-switch/
  105. 105 http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
  106. 106 http://sixrevisions.com/demo/slideshow/final.html
  107. 107 http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
  108. 108 http://ejohn.org/apps/learn/
  109. 109 http://ejohn.org/apps/learn/
  110. 110 http://robertnyman.com/javascript/
  111. 111 http://robertnyman.com/javascript/
  112. 112 http://javascript.crockford.com/code.html

↑ Back to top Tweet itShare on Facebook

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

  1. 1

    Great list…thanks :)

  2. 2

    Thanks you… It was great list for javascript tools.

  3. 3

    great resources we got here

  4. 4

    thanks for this great collection

  5. 5

    Thanks for the resources.

  6. 6


  7. 7

    I’ve been using many tips & tricks from SM to build my start-up healthcaremagic since early days.

    And once again, This is a high resourceful article, especially the slideshows in this post & other previous posts on SM… Thanks for the resources :)

  8. 8

    Nice. Thanks for sharing this resource.

  9. 9

    Great !
    I love this kind of post !

  10. 10

    Hey, nice collection of tools, i’ll be giving fireunit and a couple of canvas tools a go!

    Thanks for including us as well, nice way to start the day!

  11. 11

    Excellent collection for javascript. SmashingMagazine is my twice, thrice a day following website.

  12. 12

    This is really awesome, thank you for that, really nice….

  13. 13

    Good job, you may also like these two: http://bit.ly/8DCwx & http://bit.ly/1cXRJG

  14. 14

    Excellent list. Tagged and tweeted.

  15. 15

    its has everything
    bookmarking 60-70 site its better to bookmark it here
    saves space

  16. 16

    Great list guys… don’t forget to use Google Code CDN. We keep an up-to-date XML manifest of available libs and dependencies at http://scrumpy-jack.com/google/

  17. 17

    Excellent, it will take me days to go through each one in detail!!

  18. 18

    August Lilleaas

    June 22, 2009 3:51 am

    Mentioning my JS-Time library here! It’s a utility class that makes it easy to perform time calculations such as:

    * atBeginningOfMonth()
    * isLeapYear()
    * advanceMonths(-2)
    * daysInMonth()


  19. 19

    G. Andrew Duthie

    June 22, 2009 5:21 am

    FYI, Internet Explorer 8 now supports javascript console logging using the same syntax as Firebug. So you no longer need additional scripts like Faux Console to debug using the same console commands across browsers.

  20. 20


  21. 21
  22. 22

    I’ve found jslint to be an invaluable resource when writing, modifying, or even learning javascript code. YMMV.

  23. 23

    Benedikt Roßgardt

    June 22, 2009 7:05 am

    Thank you. This is a really good list of up-to-date contents. Now, I have enough to read for this month :-S

  24. 24

    Great! By the end of the year, when I’ve gone through all these, my workflow will improve and I can start on a project. Unless they come up with 50 more tools for me to learn. But I’ll get there. Eventually. I hope.

  25. 25

    Another winning post!

  26. 26

    Great List! – You should add http://ajaxden.net/image-manipulation/image-magnifier/

    It’s a great image magnifier script

  27. 27

    Good post, this will help me alot

  28. 28

    Thank you. Great list .

  29. 29

    Wow wonderful

  30. 30

    very useful! thanks as always!

  31. 31

    Thanks for great collection!

  32. 32

    Awesome! Danke schön!

  33. 33

    Simon Harlinghausen

    June 23, 2009 1:54 pm

    JQuery, Dojo and all the other tools are just useful.
    How does it look with crawlebility for searchengines?

  34. 34

    How does it look with crawlebility for searchengines?
    This depends on how extensively the scripts affect the content of your site and how well the code is implemented. Most SEO consultants advocate the removal of js from a page for the best results, but I believe that is a reactionary move to code that has been poorly applied.
    Typically, if a site is still usable with js disabled, then the effect of the js on ranking should be negligible.

  35. 35

    Thanks for great collection! Noah Lieske

  36. 36

    “JS.Class is a library designed to facilitate object-oriented development in JavaScript”

    Why do you keep dredging up these things?
    JavaScript is object-oriented to its core, so that description is clearly not very accurate…

  37. 37

    this is great information; I am using jQuery and I really get more information jQuery and MootTools

  38. 38

    Any tips on a tool/plugin to debug jQuery?


  39. 39

    pls provide more information about mootools library.

  40. 40

    Hmm, love jQuery. Thanx 4 the links.

  41. 41

    Hey thanks a lot for this list, as a Flash developer looking to get into more complex JS this is priceless.


↑ Back to top