40+ essential JavaScript tools for the Web

JavaScript is a flexible and diverse scripting language used in millions of web pages and server applications worldwide. You can use it for countless purposes, but you need some tools. Fortunately, across the Web there are countless JavaScript tools being released by developers to perform distinctive tasks.

Here are 45 tools for use with JavaScript. All these tools will help you to create modern websites with all the features users have come to expect. They offer clean design and simple interfaces and much much more…

AngularJS

12

Google built AngularJS to offer a smooth, lightweight framework for presenting information in the browser. It collects data from the server, then compiles the templates locally for presentation. In other words, it’s a Model-View-Controller framework built out of HTML, JavaScript, and CSS to run in the browser.

Odyssey.JS

13

Odyssey is a tool for mixing story and maps with features like “slipping map interactions” bound to parts of the text. The image shows a sandbox for building stories that interact with maps.

PlayCanvas

14

PlayCanvas is a game engine built around WebGL. It combines physics, lighting, shadows, audio, and more into a coherent tool for creating a world filled with objects. The image shows an online development tool for the framework.

Gantt

15

Gantt is a JavaScript component built on jQuery for creating Gantts, task trees, dependencies which exports the resulting data in JSON format. It offers in-place editing, zooming, data shortcuts, CSS skinning, and much more.

Handy.JS

16

Handy is a web application template for nodejs. Handy provides all the basic functionality of a web app freeing you to focus on the features that make your app truly unique.

RegExr

17

RegExr is an online tool for editing and testing Regular Expressions. It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples.

TimelineJS

18

TimelineJS is an open-source tool that enables anyone to build visually,rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet.

Responsive Nav

19

Responsive Nav is a tiny JavaScript plugin which helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance.

Sinon.JS

20

Sinon.JS is a Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework.

Mocha

21

Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

JS Bin

22

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML.

JSLitmus

23

JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.

Bookmarkify

24

Bookmarkify makes it super simple to create your own bookmarklets. Just name your bookmarklet, enter the JavaScript for it, include it, and you’re ready to go.

Kreate.JS

25

Kreate is a helper for jQuery that can quickly generate DOM elements as a standard jQuery object. You can “Kreate” a single element or up to however many elements your browser can handle before crashing. In most cases, Kreate can create a single or multiple elements faster than jQuery – sometimes, significantly faster.

YUI Compressor

1

YUI Compressor is a command-line tool written in Java that allows you to minify your JavaScript files. It is 100% safe and yields a higher compression ratio than most other tools. The YUI Compressor is also able to compress CSS files.

Google Closure Compiler

2

Google Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript.

JSMin

3

JSMin removes comments and unnecessary whitespace from JavaScript files. It typically reduces file size by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

Packer

4

Packer by Dean Edwards is also a very popular JavaScript compressor, which automatically creates a compressed version of your code. Just paste in the code and hit the ‘Pack’ button. It can go beyond regular compression and add advanced on-the-fly decompression with a JavaScript runtime piece.

Meteor

5

Meteor web app framework provides a solid foundation for modern software development. Some are practical, like embracing the open source community to facilitate plug-in contributions. Meteor does that.

Epoch

6

Epoch is a real-time charting library for building beautiful, smooth, and high performance visualizations.

Web Starter Kit

7

Web Starter Kit is a project aimed at aiding developers in supporting multiple devices. That means synchronizing clicks, reloading when necessary, and keeping everything as lean as possible so that the screens remain in sync.

Reveal.JS

8

Reveal.js is a slick HTML5-based replacement for PowerPoint. Click the buttons, and sophisticated animations flip between bits of information, just like PowerPoint. But the real power is how it can be leveraged within your Web strategy.

RxJS

9

RxJS is a framework for adding smooth, reactive, and asynchronous responses to the stream of events generated by the mouse and keyboard. The image shows code for binding a search of Wikipedia to an event.

NodeBB

10

The Node-based evolution of the bulletin board metaphor is responsive and customizable, offering real-time streaming of conversations. The developers of NodeBB have added modern themes and support for smaller screens on phones and tablets.

Gulp.JS

11

Gulp.js is the streaming build system. It’s use of streams and code-over-configuration makes for a simpler and more intuitive build. By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.

Contour

26

Contour is Forio’s visualization library that provides a core set of common visualizations. Built on top of the popular D3 engine, Contour lets you create data visualizations easily, based on intuitive abstractions commonly used in charts and graphs.

Nightwatch.JS

27

Nightwatch.js is an easy to use Node.js based End-to-End testing solution for browser based apps and websites. It uses the powerful Selenium WebDriver API to perform commands and assertions on DOM elements.

EasyStar.JS

28

Easystar.js is an asynchronous A* pathfinding API written in Javascript for use in your HTML5 games and interactive projects. The goal of this project is to make it easy and fast to implement performance conscious pathfinding.

Headroom.JS

29

Headroom.js is a lightweight, high-performance JS widget that allows you to react to the user’s scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

FileAPI

30

FileAPI is a huge set of JavaScript tools for almost anything related to working with files. It provides the features for file uploading (single/multiple) with drag ‘n’ drop support, image cropping, resizing , applying filters, getting file info and much more.

Unminify

31

Unminify is useful tool for unminifying JavaScript, CSS and HTML code and makes it readable and pretty.

HarpJS

32

Harp is a static web server that also serves Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeScript asHTML, CSS, and JavaScript without any configuration. It supports the beloved layout/partial paradigm and it has flexible metadata and global objects for traversing the file system and injecting custom data into templates.

JSHint

33

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions.

GruntJS

34

Grunt is a task-based command line build tool for JavaScript projects. It has the following predefined tasks that you can use in your project: Concatenate files, Validate files with JSHint, Minify files with UglifyJS and run unit tests with node unit.

ZeptoBuilder

35

Zepto Builder is an online version of Zepto’s ./make dist. Choose which modules you want to include from the list and get your own custom build.

Gif.JS

36

Gif.JS is a full-featured JavaScript GIF encoder that runs in your browser.

Favico.JS

37

Favico.js let’s you to add animated badges, images, or even video to your favicon, or create a favicon on the fly from an image, video, or even a live image from your visitor’s webcam.

Chart.JS

38

Chart.JS produces simple, clean and engaging HTML5 based JavaScript charts. It’s an easy way to include animated, interactive graphs on your website for free.

AdminJS

39

AdminJS is a self-contained Ember.js application. The two main files are adminjs.js and adminjs.css. Both of these files need to be included in the page along with Ember.js and EPF.

Sir Trevor

40

Sir Trevor is content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.

Instano.JS

41

Instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard tags so that the messages inside can be shown immediately whenever JavaScript is disabled.

Resumable.JS

43

Resumable.JS is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.

Justas Markus is the co-founder & chief operating officer of Refe. He's a traveler, blogger, athlete and entrepreneur. Catch up with Justas on Twitter More articles by Justas Markus
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress