Javascript Libraries

It has been impossible to keep up with all of the javascript libraries that are sprouting up as of 2024. 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 2024

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 — A JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
  • Bootstrap — A free and open-source CSS framework directed at responsive, mobile-first front-end web development. 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 — A JavaScript file and module loader optimized for in-browser use, also compatible with other environments like Rhino and Node.
  • Modernizr — A JavaScript library that detects HTML5 and CSS3 features in the user's browser.
  • socket.io — A realtime application framework (Node.js server).
  • jQuery UI — The official jQuery user interface library.
  • Next.js — A library offering hybrid static & server rendering, TypeScript support, smart bundling, and route pre-fetching for production-level apps.
  • Babel — A JavaScript transcompiler used to convert ECMAScript 2015+ code into a backwards compatible version for older engines.
  • Gatsby — A React-based open source framework for creating websites and apps.
  • express.js — A minimal and flexible Node.js web application framework.

DOM Manipulation

  • jQuery — A JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
  • Prototype Javascript Framework — Adds useful extensions to the browser scripting environment and provides elegant APIs around Ajax and the Document Object Model.
  • Moo Tools — A collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer.
  • midori — A library for animating image backgrounds in websites.
  • Dojo Toolkit — A JavaScript toolkit that saves time and scales with your development process.

Template Systems

  • Jade/Jade Runtime — A 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 — 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 — A JavaScript file and module loader optimized for in-browser use.
  • browserify — An open-source JavaScript tool allowing Node.js-style modules to compile for browser use.
  • lazyload — An open-source JavaScript tool allowing Node.js-style modules to compile for browser use.
  • 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 — A static module bundler for modern JavaScript applications.
  • Parcel — A blazing fast, zero configuration web application bundler.

Type Checkers

  • typescript — An open-source language that builds on JavaScript by adding static type definitions.

Runner

  • phantomJS — A headless web browser scriptable with JavaScript.
  • Karma JS — A test runner for JavaScript designed to create a productive testing environment.
  • puppeteer — A Node library that provides a high-level API to control Chrome or Chromium.

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.

Touch Libraries / Mobile UI Libraries

  • Slideout.js — A touch slideout navigation menu for your mobile web apps.
  • hammer.js — Multi-touch JavaScript 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, CSS, and JavaScript components.

Animation Libraries

  • WOW.js — Reveal CSS animation as you scroll down a page.
  • Move.js — CSS3 backed JavaScript animation framework.
  • bxSlider — Responsive CSS animation framework for creating sliders, presentations, banners, and more.
  • 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 and desktop.
  • 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.
  • 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.
  • 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 simplifies your work with vector graphics on the web.
  • heatmap.js — A lightweight, easy-to-use JavaScript library to help you visualize your three-dimensional data.
  • babylon JS — 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 — Touch-enabled jQuery plugin that lets you create beautiful responsive carousel sliders.
  • Slick.js — Sliders library.
  • slippry.js — Carousel library.
  • bespoke — Bespoke.js is a super minimal, modular presentation library for modern browsers.
  • reveal.js — 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.

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 — A slim javascript library designed to sit on top of a javascript framework, such as jQuery or Prototype.
  • batman.js — A full-stack microframework designed to maximize developer and designer happiness.
  • impress.js — A presentation framework based on CSS3 transforms and transitions.
  • DataTables — Add advanced interaction controls to your HTML tables the free & easy way.
  • dropzone.js — An open-source library providing drag'n'drop file uploads with image previews.
  • typeahead.js — A fast and fully-featured autocomplete library.
  • popper.js — Positioning tooltips and popovers for Bootstrap.
  • qtip2.js — HTML and Javascript Tooltips.
  • forkit.js — Adds a unique pull-down menu to your site, mimicking the GitHub ribbon.
  • Zepto.js — A minimalist JavaScript library for modern browsers with a jQuery-compatible API.
  • MixItUp — A library for sorting and filtering.
  • Masonry — A cascading grid layout library.
  • Packery — A cascading grid layout library.
  • Isotope — A magical layout filtering and sorting library.
  • Headroom.js — Hide your header until needed.
  • Highlight.js — A JavaScript syntax highlighter.
  • Gridster.js — A jQuery plugin for intuitive draggable layouts.
  • CodeMirror — An in-browser code editor.
  • Moment.js — Parse, validate, manipulate, and display dates in JavaScript.
  • html2canvas — Take screenshots with JavaScript.
  • FullCalendar — A full-sized drag-and-drop event calendar.
  • Sortable — A minimalist library for reorderable drag-and-drop lists.
  • FitVids.js — A jQuery plugin for fluid-width video embeds.
  • jPlayer — HTML5 Audio & Video for jQuery.
  • SoundManager 2 — A JavaScript Sound API supporting MP3, MPEG4, and HTML5 audio.
  • Jcrop — Image cropping plugin for jQuery.
  • jQuery Timepicker/Datepicker — Adds a timepicker to jQueryUI Datepicker.
  • jQuery validation library — Form validation in JavaScript.
  • PhysicsJS — A modular and extendable physics engine for JavaScript.
  • Device.js — Write conditional CSS and JavaScript based on device operating system.
  • AngularJS Touch Carousel — A mobile-friendly AngularJS carousel.
  • proto.io — Create interactive high-fidelity prototypes.
  • matchHeight — Make a row of columns match each other's height.
  • NSFW.js — Protect your site from showing NSFW content powered by AI.
  • HTML5 Shiv — Enable use of HTML5 sectioning elements in legacy Internet Explorer.
  • lodash — A JavaScript utility library delivering consistency, modularity, performance, and extras.
  • URI.js — JavaScript URL mutation library.
  • jQuery Mobile — A touch-optimized web framework developed by the jQuery project team.
  • cascade Framework — A CSS framework for creating websites and web apps, similar to Bootstrap.
  • 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 — A responsive front-end framework providing 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