It has been impossible to keep up with all of the javascript libraries that are sprouting up as of 2014. This list is an attempt to cover the most useful and widely known javascript libraries and frameworks that are being used in the web as of today.

Updated as of: Oct 2020

Difference between a Javascript Library vs Framework:
  • Framework: this describes a given structure of "how" you should present your code. Pretty much like a code-template, along some helpers, constructors etc. to solve/simplify a specific problem or bring your architecture in "order". Examples, "Backbone", "requireJS", "socketIO".
  • Library: Is an entire toolkit which highly abstracts different layers, like browsers / DOM models / etc. Also as a good toolkit, it offers a lot of tools and neat stuff to work with, which in general, simplify your coding experience. Examples "jQuery", "MooTools", "YUI"

Legend:

  • = Favorite
  • = Library
  • = Framework
    • Visionquest uses this product.

Here is a short summary of the Javascript libraries that have good documentation and are popular among the community.

Popular

  • jQuery — jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
  • Bootstrap — Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
  • React.js — A declarative, efficient, and flexible JavaScript library for building user interfaces.
  • Require.js — RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.
  • Modernizr — Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  • socket.io — Realtime application framework (Node.JS server)
  • jQuery UI — The official jQuery user interface library.
  • Next.js — Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
  • Babel — Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
  • Gatsby — Gatsby is a React-based open source framework for creating websites and apps.
  • express.js — Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

DOM MANIPULATION

  • jQuery — jQuery JavaScript Library
  • Prototype Javascript Framework — Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.
  • Moo Tools — MooTools is a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer.
  • midori — Library for animating image backgrounds in websites. Written with three.js and uses WebGL.
  • Dojo Toolkit — A JavaScript toolkit that saves you time and scales with your development process.

Template Systems

  • Jade/Jade Runtime — robust, elegant, feature rich template engine for Node.js
  • Handlebars — Minimal templating on steroids
  • Mustache — Minimal templating with {{mustaches}} in JavaScript
  • Jinja/Nunjucks — A rich and powerful templating language for JavaScript.
  • Twig.js — Twig.js is a pure JavaScript implementation of the Twig PHP templating language
  • EJS — Embedded JavaScript templating.
  • Pug — Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.

LOADERS

  • requireJS — RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
  • browserify — Browserify is an open-source JavaScript tool that allows developers to write Node.js-style modules that compile for use in the browser.
  • lazyload — LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport.
  • systemJS — Configurable module loader, running System modules at almost-native speed, and enabling ES module semantics and features such as top-level await, dynamic import, and import maps with full compatibility for older browsers. Similar to webpack.

BUNDLERS

  • Webpack — At its core, webpack is a static module bundler for modern JavaScript applications.
  • Parcel — Blazing fast, zero configuration web application bundler.

TYPE CHECKERS

  • typescript — TypeScript is an open-source language which builds on JavaScript, one of the world's most used tools, by adding static type definitions.

RUNNER

  • phantomJS — PhantomJS is a headless web browser scriptable with JavaScript.
  • Karma JS — Spectacular Test Runner for Javascript. The main goal for Karma is to bring a productive testing environment to developers.
  • puppeteer — Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

Pure JavaScript / Ajax / Functional programming

  • Socket.io — Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers.
  • Underscore.js — JavaScript's utility _belt. Underscore.js is a JavaScript library which provides utility functions for common programming tasks. It is comparable to features provided by Prototype.js and the Ruby language, but opts for a functional programming design instead of extending object prototypes.

Touch Libraries / Mobile UI liraries

  • Slideout.js — A touch slideout navigation menu for your mobile web apps.
  • hammer.js — multi touch java script library.
  • touch swipe — a jquery plugin for touch devices
  • iconate.js — Transform your icons with trendy animations.
  • Onsen UI — Custom Elements-Based HTML5 UI Framework for Building Your Mobile Front End
  • Ratchet — build mobile apps with simple HTML, JSS, and Javascript components.

Animation Libraries

  • WOW.js — Reveal CSS animation as you scroll down a page
  • Move.js — CSS3 backed JavaScript animation framework
  • bxSlider — The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
  • AniJS — A Library to Raise your Web Design without Coding
  • Greensock — GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
  • Tweenmax — TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal.

Parallax Libraries

  • skrollr.js — Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love)
  • scrollMagic — The javascript library for magical scroll interactions.
  • stellar.js — Parallax scrolling made easy
  • Parallax.js — Parallax Engine that reacts to the orientation of a smart device
  • scrollReveal.js — Easily reveal elements as they enter the viewport.
  • onepage-scroll — Create an Apple-like one page scroll website.

Graphical/visualization (canvas or SVG related)

  • D3.js — A JavaScript visualization library for HTML and SVG.
  • SWFObject — SWFObject is an open-source JavaScript library used to embed Adobe Flash content onto Web pages and to protect the flash game against piracy, which is supplied as one small JavaScript file.
  • Three.js — JavaScript 3D library.
  • velocity.js — Accelerated JavaScript animation.
  • Phaser — a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering
  • Crafty JS — JavaScript Game Engine
  • Leaflet — JavaScript library for mobile-friendly interactive maps
  • Pixi.js — Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
  • Epoch — A general purpose, real-time visualization library.
  • SVG.js — A lightweight library for manipulating and animating SVG

Chart Libraries / Data visualization

  • Chartist.js — Simple responsive charts
  • Flot — Attractive JavaScript charts for jQuery
  • paper.js — Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
  • raphael — Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
  • heatmap.js — heatmap.js is a lightweight, easy to use JavaScript library to help you visualize your three dimensional data!
  • babyon JS — Babylon.js is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5.

Slider Libraries

  • FlexSlider — An awesome, fully responsive jQuery slider plugin
  • OwlCarousel — Owl Carousel. Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
  • Slick.js — Sliders library
  • slippry.js — Carousel library
  • bespoke — Bespoke.js is a super minimal (1KB min'd and gzipped), modular presentation library for modern browsers, designed to foster a rich plugin ecosystem.
  • reveal.js — reveal.js is an open source HTML presentation framework.
  • Flickity — Touch, responsive, flickable galleries
  • Swiper — Most modern mobile touch slider with hardware accelerated transitions

Lightbox Libraries

  • Magnific Popup — Light and responsive lightbox script with focus on performance.
  • Lightbox2 — The original lightbox script, now on Github!
  • luidbox — Replicating and improving the lightbox module seen on Medium with fluid transitions.
  • Colorbox — A light-weight, customizable lightbox plugin for jQuery
  • Fluidbox — Replicating and improving the lightbox module seen on Medium with fluid transitions.
  • Swipebox — A touchable jQuery lightbox
  • Sweetalert — A beautiful replacement for success messages
  • fancyBox — FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Unit Testing / Testing Frameworks

  • Mocha — Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
  • Jest — Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase.
  • Istanbul — Istanbul instruments your ES5 and ES2015+ JavaScript code with line counters, so that you can track how well your unit-tests exercise your codebase.

QA tools

  • prettier — An opinionated code formatter
  • ESlint — ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
  • JShint — JSHint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules.
  • JS Beautifier — This little beautifier will reformat and re-indent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as partly deobfuscate scripts processed by the npm package javascript-obfuscator.
  • husky — Git hooks made easy.

Web-Application related MVC

  • Angular.js — AngularJS is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
  • Backbone.js — Give your JS App some Backbone with Models, Views, Collections, and Events
  • Ember.js — A JavaScript framework for creating ambitious web applications
  • Knockout — Knockout makes it easier to create rich, responsive UIs with JavaScript. Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user's actions or when an external data source changes), KO can help you implement it more simply and maintainably.
  • Meteor — Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js.
  • React.js — A declarative, efficient, and flexible JavaScript library for building user interfaces.
  • Riot JS — Simple and elegant component-based UI library
  • Svelte — Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
  • Vue JS — Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.

Other

  • eyeballs.js — eyeballs.js is a slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype. eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.
  • batman.js — a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. It favors convention over configuration, template-less views, and high performance by simply not doing very much. It all adds up to blazingly fast web apps with a great development process; it's batman.js.
  • impress.js — It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
  • DataTables — Add advanced interaction controls to your HTML tables the free & easy way.
  • dropzone.js — DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
  • typeahead.js — a fast and fully-featured autocomplete library
  • popper.js — Positioning tooltips and popovers is difficult. Popper is here to help! Used with Bootstrap.
  • qtip2.js — HTML and Javascript Tooltips!
  • forkit.js — Adds a unique pull down menu to your site! Mimics the github ribbon!
  • Zepto.js — a minimalist JavaScript library for modern browsers, with a jQuery-compatible API
  • MixItUp — Library for sorting and filtering.
  • Masonry — Cascading grid layout library
  • Packery — Cascading grid layout library
  • Isotope — Filter & sort magical layouts
  • Headroom.js — Give your pages some headroom. Hide your header until you need it
  • Highlight.js — Javascript syntax highlighter
  • Gridster.js — gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
  • CodeMirror — In-browser code editor
  • Moment.js — Parse, validate, manipulate, and display dates in javascript.
  • html2canvas — Screenshots with JavaScript
  • FullCalendar — Full-sized drag & drop event calendar (jQuery plugin)
  • Sortable — is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap.
  • FitVids.js — A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  • jPlayer — jPlayer : HTML5 Audio & Video for jQuery
  • SoundManager 2 — A JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio + RTMP, providing reliable cross-browser/platform audio control in as little as 12 KB. BSD licensed.
  • Jcrop — Image Cropping Plugin for jQuery
  • jQuery Timepicker/Datepicker — Adds a timepicker to jQueryUI Datepicker
  • jQuery validation library — form validation in JS
  • PhysicsJS — A modular, extendable, and easy-to-use physics engine for javascript
  • Device.js — makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
  • AngularJS Touch Carousel — Mobile friendly AngularJS carousel
  • proto.io — Create filly interactive high fidelity prototypes in minutes that look and work exactly like you app should.
  • matchHeight — Ever wish you could have two columns with different sized content match each other's height? With this library you can make a row of columns match each other's height to create symmetrical boxes of equal height throught your website!
  • NSFW.js - protect your site from showing NSFW content powered by AI. Link
  • HTML5 Shiv — This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
  • lodash — A JavaScript utility library delivering consistency, modularity, performance, & extras.
  • URI.js — Javascript URL mutation library
  • jQuery Mobile — jQuery Mobile is a touch-optimized web framework, more specifically a JavaScript library, developed by the jQuery project team.
  • cascade Framework — Cascade Framework is a free CSS framework for creating websites and web apps. Similar to Bootstrap and Foundation, it contains a wide range of HTML and CSS-based interface components, as well as optional JavaScript extensions.
  • Polymer — An efficient, expressive, extensible HTML templating library for JavaScript. Material Web Components.
  • MathJax — Beautiful and accessible math in all browsers
  • clipboard.js — Copy to clipboard without Flash
  • Foundation — Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions.

Technologies / Tools used

  • node JS
  • npm
  • yarn

Sources: StackOverflow, Wikipedia, Weight-of-it.com
Leave a comment below if you have any to add or any descriptions to update!

Leave a Reply