100+ Essential Resources for Web Designers and Programmers

We have covered extensive lists in the past with titles including Most Used Essential Linux Applications and All AWESOME Linux Applications and Tools under our belt.

Today, we bring you a collection of several JavaScript resources useful to designers and programmers. Without any ado, the list.

Note: This page is updated systematically based on recommendations and suggestions from our readers.

Bundlers

  • browserify – Browserify enables you to bundle your dependencies and requirements (‘modules’) in the browser.
  • webpack – A pack of CommonJs/AMD modules for the browser.
  • Rollup – A modern ES6 module bundler.
  • Brunch – A fast front-end web app build tool with simple declarative config.
  • Parcel – A super fast web app bundler. No configurations are needed.

Loaders

JavaScript Loading Systems and/or Modules.

  • RequireJS – A JavaScript file and module loader.
  • browserify – Browser-side requires () the node.js way.
  • SeaJS – A Module Loader for the Web.
  • HeadJS – The only script in your HEAD.
  • curl – A small, fast, extensible module loader for AMD, Plain text, CSS, CommonJS Modules/1.1, legacy scripts, and HTML.
  • lazyload – A lightweight dependency-free async loader for JavaScript and CSS.
  • script.js – A dependency manager and asynchronous JavaScript loader.
  • systemjs -A module loader compliant with AMD, CJS & ES6 specifications.
  • LodJS – An AMD-based Module loader.
  • ESL – A Module loader browser with support for AMD and lazy define.
  • modulejs – A simple JavaScript module system.

Package Managers

Package managers provide libraries and tools for conveniently packaging software.

  • npm – JavaScript package manager.
  • Bower – A package manager for the web.
  • component – Client package management for building web applications.
  • spm – Static package manager.
  • jam – A package manager using a browser-focused and RequireJS-compatible repo.
  • jspm – Frictionless browser package management.
  • Ender – The no-library library.
  • volo – Create front-end projects from templates, add dependencies, and automate the resulting projects.
  • Duo – A compilation of Component, Browserify and Go ideas in one package manager for better organization and creation of front-end code.
  • yarn – A speed and security-focused dependency manager.

Testing Frameworks

  • mocha – A simple and flexible JS testing framework for the browser and node.js.
  • jasmine – A simple JavaScript testing framework without DOM.
  • qunit – A simple JavaScript Unit Testing framework.
  • jest – Intuitive JavaScript Unit Testing.
  • prova – A Tape and Browserify-based Node and browser test runner.
  • DalekJS – Automated cross-browser functional JavaScript testing.
  • Protractor – An end-to-end testing framework for AngularJS apps.
  • tape – Tap-producing test harness for node and browsers.
  • TestCafe – Automated browser testing for modern web development stacks.
  • ava – 🚀 A next-gen JavaScript test runner.

Assertion Tools

  • chai – a node.js and browser BDD / TDD assertion framework. Can be paired with any testing framework.
  • Enzyme – A JS Testing utility for easier to assertion, manipulation, and traversal of React Components’ output.
  • react testing library – A package of React DOM testing utilities that encourage good practices.
  • Sinon.JS – A JS tester for stubs, spies, and mocks.
  • expect.js – A minimalistic BDD-style assertion for Node.JS and the browser.

Coverage Tools

  • istanbul – Yet another JS code coverage tool.
  • blanket – An easy-to-use JS code coverage library for the browser and nodejs.
  • JSCover – Measure code coverage for JavaScript programs.

Runner Tools

  • phantomjs – A scriptable Headless WebKit.
  • slimerjs – A PhantomJS-like tool running Gecko.
  • casperjs – A navigation scripting & testing utility for PhantomJS and SlimerJS.
  • zombie – A full-stack headless browser tester using node.js.
  • totoro – A simple and reliable cross-browser testing tool.
  • karma – A unique Test Runner for JavaScript.
  • nightwatch – A UI automated testing framework based on node.js and selenium web driver.
  • intern – A futuristic code testing stack for JavaScript.
  • yolpo – A statement-by-statement JS interpreter in the browser.

Quality Assessment (QA) Tools

  • prettier – A smart code formatter.
  • JSHint – Detect errors and potential problems in your code.
  • jscs – A code style checker for JS.
  • jsfmt – For formatting, searching, and rewriting JavaScript.
  • jsinspect – For detecting structurally similar code e.g. copied and pasted snippets.
  • buddy.js – A magic number detection for JavaScript.
  • ESLint – A fully pluggable tool for identifying and reporting patterns in JavaScript.
  • JSLint – High standards, strict & opinionated code quality tool, aiming to keep only good parts of the language.
  • JavaScript Standard Style – A style guide, checker, and formatter with no configuration needed.

MVC Frameworks and Libraries

  • angular.js – HTML enhanced for web apps.
  • aurelia – A Javascript client framework for mobile, desktop, and web.
  • backbone – Add Models, Views, Collections, and Events to your JS apps.
  • ember.js – Create ambitious web applications.
  • meteor – An ultra-simple, database-everywhere, data-on-the-wire, pure-Javascript web framework.
  • ractive – Furutistic DOM manipulation.
  • vue – An intuitive, fast & composable MVVM for building interactive UIs.
  • knockout – Easily create rich, responsive User Interfaces using JavaScript.
  • spine – A lightweight MVC library for developing JS apps.
  • espresso.js – A minimal JS library for crafting UIs.
  • canjs – Write JS better, faster, and easier.
  • react – A flexible library for building user interfaces. Supports working with a Virtual DOM.
  • hyperapp – 1kb JavaScript library for building frontend applications.
  • preact – A fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
  • nativescript – For building native cross-platform iOS and Android apps with JavaScript.
  • react-native – A framework for building native apps with React.
  • riot – React-like library, but a lot smaller.
  • thorax – Strengthening your Backbone.
  • chaplin – An architecture for JavaScript applications using the Backbone.js library.
  • marionette – A composite application library for Backbone.js that aims to simplify the construction of large-scale JavaScript apps.
  • ripple – A tiny foundation for building reactive views.
  • rivets – Lightweight and powerful data binding + templating solution.
  • derby – MVC framework making it easy to write real-time, collaborative applications that run in both Node.js and browsers.
  • derby-awesome – A collection of awesome derby components
  • way.js – Simple, lightweight, persistent two-way data binding.
  • mithril.js – Mithril is a lightweight but robust client-side MVC framework.
  • jsblocks – jsblocks is better MV-ish framework.
  • LiquidLava – Transparent MVC framework for building UIs.
  • feathers – A minimalist real-time JavaScript framework for next-gen apps.
  • Keo – Functional stateless React components with support for Shadow DOM.
  • atvjs – Blazing fast Apple TV application development using pure JavaScript.

Node-Powered CMS Frameworks

  • KeystoneJS – A powerful CMS and web app framework.
  • Reaction Commerce – A reactive CMS for real-time architecture and design.
  • Ghost – A simple, powerful publishing platform.
  • Apostrophe – A CMS with content editing and essential features.
  • We.js – A framework for real-time apps, sites, or blogs.
  • Hatch.js – A CMS platform with social features.
  • TaracotJS – A fast and minimalist Node.js-based CMS.
  • Nodizecms – A CMS for CoffeeScript lovers
  • Cody – A CMS with WSYWYG editor.
  • PencilBlue – A CMS and blogging platform.

Templating Engines

Templating engines enable you to interpolate strings.

  • mustache.js – Minimal templating with {{mustaches}} in JavaScript.
  • handlebars.js – An extension to the Mustache templating language.
  • hogan.js – A compiler for the Mustache templating language.
  • doT – The fastest + concise javascript template engine for node.js and browsers.
  • dustjs – A collection of asynchronous templates for the browser and node.js.
  • eco – Embedded CoffeeScript templates.
  • JavaScript-Templates – An extremely lightweight (< 1KB) powerful JavaScript templating engine without dependencies.
  • t.js – A tiny javascript templating framework in ~400 bytes gzipped.
  • Pug (formerly “Jade”) – Robust, elegant, feature-rich template engine for nodejs.
  • EJS – Effective JavaScript templating.
  • xtemplate – eXtensible Template Engine lib for node and the browser.
  • marko – A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags, and CommonJS modules as compiled output.
  • swig – A simple, powerful, and extendable Node.js and browser-based JavaScript template engine.

Data Visualization

Web tools for Data visualization.

  • d3 – A JavaScript visualization library for HTML and SVG.
  • metrics-graphics – A library optimized for concise, principled data graphics and layouts.
  • pykcharts.js – Well designed d3.js charting without the complexity of d3.js.
  • three.js – A JavaScript 3D library.
  • Chart.js – Create simple HTML5 Charts using the tag.
  • paper.js – The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
  • fabric.js – Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
  • peity – Create progressive bars, lines, and pie charts.
  • raphael – A JavaScript Vector Library.
  • echarts – Enterprise Charts.
  • vis – Dynamic, browser-based visualization library.
  • two.js – A renderer agnostic two-dimensional drawing API for the web.
  • g.raphael – Charts for Raphaël.
  • sigma.js – A JavaScript library dedicated to graph drawing.
  • arbor – A graph visualization library using web workers and jQuery.
  • cubism – A D3 plugin for visualizing time series.
  • dc.js – Multi-Dimensional charting built to work natively with cross filter rendered with d3.js
  • vega – A visualization grammar.
  • processing.js – Processing.js makes your data visualizations work using web standards and without any plug-ins
  • envisionjs – Dynamic HTML5 visualization.
  • rickshaw – JavaScript toolkit for creating interactive real-time graphs.
  • flot – Attractive JavaScript charts for jQuery.
  • morris.js – Pretty time-series line graphs.
  • nvd3 – Build re-usable charts and chart components for d3.js
  • svg.js – A lightweight library for manipulating and animating SVG.
  • heatmap.js – JavaScript Library for HTML5 canvas-based heatmaps.
  • jquery.sparkline – A plugin for the jQuery JavaScript library to generate small sparkline charts directly in the browser.
  • xCharts – A D3-based library for building custom charts and graphs.
  • trianglify – Low poly style background generator with d3.js
  • d3-cloud – Create word clouds in JavaScript.
  • d4 – A friendly reusable charts DSL for D3.
  • dimple.js – Easy charts for business analytics powered by d3
  • chartist-js – Simple responsive charts.
  • epoch – A general-purpose real-time charting library.
  • c3 – D3-based reusable chart library.
  • BabylonJS – A framework for building 3D games with HTML 5 and WebGL.
  • recharts – Redefined chart library built with React and D3
  • GraphicsJS – A lightweight JavaScript graphics library with an intuitive API, based on SVG/VML technology.

There are also some great commercial libraries, like amchartanychartplotly, and highchart.

Timeline

  • TimelineJS v3 – A Storytelling Timeline built in JavaScript.
  • timesheet.js – JavaScript library for simple HTML5 & CSS3 time sheets.

Spreadsheet

  • HANDSONTABLE – A JavaScript/HTML5 Spreadsheet Library for Developers

Editors

  • ace – Ace (Ajax.org Cloud9 Editor).
  • CodeMirror – In-browser code editor.
  • esprima – ECMAScript parsing infrastructure for multipurpose analysis.
  • quill – A rich, cross-browser text editor with an API.
  • medium-editor – A clone of Medium.com’s WYSIWYG editor.
  • pen – enjoy live editing (+markdown).
  • jquery-notebook – A simple, clean, and elegant text editor. Inspired by Medium.
  • bootstrap-wysiwyg – A small bootstrap-compatible WYSIWYG rich text editor.
  • ckeditor-releases – A web-based text editor for everyone.
  • editor – A markdown editor (still in development).
  • EpicEditor – An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
  • jsoneditor – A web-based tool for viewing, editing, and formatting JSON.
  • vim.js – A JavaScript port of Vim with a persistent ~/.vimrc
  • Squire – An HTML5 text editor.
  • TinyMCE – The JavaScript Rich Text editor.
  • trix – A rich text editor for everyday writing developed by Basecamp.
  • Trumbowyg – A lightweight WYSIWYG JavaScript editor.
  • Draft.js – A React framework for building text editors.
  • bootstrap-wysihtml5 – A simple, beautiful wysiwyg editor
  • wysihtml5 – An open source HTML5-based text editor also based on the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
  • raptor-editor – An HTML5 WYSIWYG content editor.
  • popline – An HTML5 Rich-Text-Editor Toolbar.

Documentation

  • DevDocs – An all-in-one API documentation reader with a fast, organized, and consistent interface.
  • dexy – A free-form literate documentation tool for writing any kind of technical document incorporating code.
  • docco – A quick-and-dirty, hundred-line-long, literate-programming-style documentation generator.
  • styledocco – Generate documentation and style guide documents from your stylesheets.
  • Ronn – Build manuals easily. Also, convert simple, human-readable textfiles to roff for terminal display and to HTML for the web.
  • dox – A node.js-written JavaScript documentation generator.
  • jsdox – A JSDoc3 to Markdown documentation generator.
  • ESDoc – A documentation generator for JavaScript.
  • YUIDoc – A Node.js application API documentation generator using comments in source with a syntax similar to tools like Javadoc and Doxygen.
  • coddoc – A jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers through the use of coddoc.addTagHandler and coddoc.addCodeHandler. coddoc also parses source code to be used in APIs.
  • sphinx – Easily create intuitive and beautiful documentation
  • Using JSDoc
  • Beautiful docs – A documentation viewer based on markdown files.
  • documentation.js – An API documentation generator with support for ES2015+ and flow annotation.
  • jsduck – API documentation generator made for Sencha JavaScript frameworks. Supports other frameworks too.

Files

Libraries for working with files.

  • Papa Parse – A powerful CSV library that supports parsing CSV files/strings and exporting to CSV.
  • jBinary – A High-level I/O (loading, parsing, manipulating, serializing, saving) for binary files with declarative syntax for describing file types and data structures.
  • diff2html – A Git diff output parser and pretty HTML generator.
  • jsPDF – JavaScript PDF generation.

Functional Programming

Functional programming libraries to extend JavaScript’s capabilities.

  • underscore – JavaScript’s utility _ belt.
  • lodash – A reliable utility library complete with customization and extras.
  • Sugar – A Javascript library for working with native objects.
  • lazy.js – Similar Underscore but lazier.
  • ramda – A practical functional library for JavaScript programmers.
  • mout – A compilation of Modular JavaScript Utilities.
  • mesh – Streamable data synchronization utility.
  • preludejs – Hardcore Functional Programming for JavaScript.

Reactive Programming

Reactive programming libraries to extend JavaScript’s capabilities.

  • RxJs – The Reactive Extensions for JavaScript.
  • Bacon – A Functional Reactive Programming (FRP) library for Javascript.
  • Kefir – A Bacon.js and RxJS-inspired FRP library for JavaScript with a focus on high performance and low memory consumption.
  • Highland – Re-thinking the JavaScript utility belt, Highland manages synchronous and asynchronous code easily, using nothing more than standard JavaScript and Node-like Streams.
  • Most.js – A high-performance FRP library.
  • MobX – A TFRP library for simple, scalable state management.
  • Cycle.js – A functional and reactive JavaScript library for cleaner code.

Data Structures

Data structure libraries to build more sophisticated applications.

  • immutable-js – Immutable Data Collections including Sequence, Range, Repeat, Map, OrderedMap, Set, and a sparse Vector.
  • mori – A library for using ClojureScript’s persistent data structures and supporting API from the comfort of vanilla JavaScript.
  • buckets – A complete, fully tested, and documented data structure library written in JavaScript.
  • hashmap – Simple hashmap implementation that supports any kind of keys.

Date

Libraries for working with Dates.

  • moment – Parse, validate, manipulate, and display dates in JS.
  • moment-timezone – Timezone support for moment.js.
  • jquery-timeago – A jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago”).
  • timezone-js – Timezone-enabled JavaScript Date object. Uses Olson zoneinfo files for timezone data.
  • date – Date() for humans.
  • ms.js – Tiny millisecond conversion utility.
  • countdown.js – Super simple countdowns.
  • timeago.js – Simple library (less than 2kb) used to format date with *** time ago statements.
  • fecha – Lightweight date formatting and parsing (~2KB). Meant to replace the parsing and formatting functionality of moment.js.
  • date-fns – Modern JavaScript date utility library.

String Libraries

  • voca – The ultimate JavaScript string library.
  • selecting – A library that allows you to access texts selected by the users.
  • underscore.string – String manipulation extensions for Underscore.js javascript library.
  • string.js – Extra JavaScript string methods.
  • he – A robust HTML entity encoder/decoder written in JavaScript.
  • multiline – Multiline strings in JavaScript.
  • query-string – Parse and stringify URL query strings.
  • URI.js – Javascript URL mutation library.
  • jsurl – Lightweight URL manipulation with JavaScript.
  • sprintf.js – A sprintf implementation.
  • url-pattern – Easier than regex string matching patterns for URLs and other strings. Turn strings into data or data into strings

Numbers

Libraries for working with numbers in JavaScript.

  • Numeral-js – A JS library for manipulating numbers.
  • chance.js – A random generator helper in Javascript for strings, numbers, etc.
  • odometer – Smoothly transitions numbers with ease.
  • accounting.js – A lightweight JavaScript library for number, money, and currency formatting – fully localizable, zero dependencies.
  • money.js – A tiny (1kb) javascript currency conversion library, for web & nodeJS.
  • Fraction.js – A library of rational numbers for JavaScript.
  • Complex.js – A library of complex numbers for JavaScript
  • Polynomial.js – A library of polynomials for JavaScript

Storage

  • store.js – LocalStorage wrapper for all browsers using localStorage, globalStorage, and userData behavior under the hood. Doesn’t require cookies or Flash.
  • localForage – Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
  • jStorage – jStorage is a simple key/value database to store data on the browser side.
  • cross-storage – Cross-domain local storage, with permissions.
  • basket.js – A script and resource loader for caching & loading scripts with localStorage.
  • bag.js – A caching script and resource loader, similar to basket.js, but with additional k/v interface and local storage / websql / indexedDB support.
  • basil.js – The missing Javascript smart persistent layer.
  • jquery-cookie – A simple, lightweight jQuery plugin for reading, writing, and deleting cookies.
  • js-cookie – A simple, lightweight JavaScript API for handling browser cookies
  • Cookies – JavaScript Client-Side Cookie Manipulation Library.
  • DB.js – A Promise-based IndexDB Wrapper library
  • lawnchair.js – A simple client-side JSON storage.
  • sql.js – SQLite compiled to JavaScript through Emscripten.

Colors

  • randomColor – A color generator for JavaScript.
  • chroma.js – A JS library for all kinds of color manipulations.
  • color – A JavaScript color conversion and manipulation library.
  • colors – Smarter defaults for colors on the web.
  • PleaseJS – A JavaScript library for creating random nice colors and color schemes.
  • TinyColor – Fast, small color manipulation and conversion for JavaScript.
  • Vibrant.js – Extract prominent colors from an image.

i18n And L10n

Localization (l10n) and internationalization (i18n) JavaScript libraries.

  • i18next – JS internationalisation (i18n) the easy way.
  • polyglot – tiny i18n helper library.
  • babelfish – i18n with a human-friendly API and built-in plurals support.

Control Flow

  • async – Async utilities for node and the browser.
  • q – A tool for making and composing asynchronous promises in JavaScript.
  • step – An async control-flow library that makes stepping through logic easy.
  • contra – Asynchronous flow control with a functional taste to it.
  • Bluebird – fully featured promise library with a focus on innovative features and performance.
  • when – A solid, fast Promises/A+ and when() implementation, plus other async goodies.
  • ObjectEventTarget – Provide a prototype that adds support to event listeners (with the same behavior of EventTarget from DOMElements available on browsers).

Routing

  • director – A tiny and isomorphic URL router for JavaScript.
  • page.js – A micro client-side router inspired by the Express router (~1200 bytes).
  • pathjs – Simple, lightweight routing for web browsers.
  • crossroads – JavaScript Routes.
  • davis.js – RESTful degradable JavaScript routing using pushState.

Security

  • DOMPurify – A DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML, and SVG.
  • js-xss – Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist.
  • xss-filters – Secure XSS Filters by Yahoo

Log

  • log – Console.log with style.
  • Conzole – A debug panel built in javascript that wraps javascript native console object methods and functionality in a panel displayed inside the page.
  • console.log-wrapper – Log to the console in any browser with clarity.
  • loglevel – Minimal lightweight logging for JavaScript, adding reliable log-level methods to wrap any available console.log methods.
  • minilog – Lightweight client & server-side logging with Stream-API backends
  • storyboard – Universal logging library + Chrome extension; it lets you see all client and server tasks triggered by a user action in a single place.

RegExp

  • RegEx101 – An online regex tester and debugger for JavaScript with support for. Python, PCRE, and PHP.
  • RegExr – HTML/JS based tool for creating, testing, and learning about Regular Expressions.
  • RegExpBuilder – Create regular expressions using chained methods.

Voice Command

  • annyang – A JavaScript library for adding voice commands to your site, using speech recognition.
  • voix.js – A JavaScript library to add voice commands to your sites, apps, or games.

API

  • axios – A Promise-based HTTP client for the browser and node.js.
  • bottleneck – A powerful rate limiter that simplifies throttling.
  • oauth-signature-js – JavaScript OAuth 1.0a signature generator for node and the browser.
  • amygdala – RESTful HTTP client for JavaScript-powered web applications.
  • jquery.rest – A jQuery plugin for easy consumption of RESTful APIs.
  • Rails Ranger – An opinionated REST client for Ruby on Rails APIs.

Streaming

  • Tailor – Streaming layout service for front-end microservices inspired by Facebook’s BigPipe.

Vision Detection

  • tracking.js – A modern approach to Computer Vision on the web.
  • ocrad.js – OCR in Javascript via Emscripten.

Machine Learning

  • ConvNetJS – Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.
  • DN2A – Digital Neural Networks Architecture.
  • Brain.js – Neural networks in JavaScript.
  • Mind.js – A flexible neural network library.
  • Synaptic.js – Architecture-free neural network library for node.js and the browser.
  • TensorFlow.js – A JavaScript library for training and deploying ML models in the browser and on Node.js.
  • ml5.js – Friendly Machine Learning for the Web.

Browser Detection

  • bowser – a browser detector

Benchmark

  • benchmark.js – A benchmarking library. Used on jsPerf.com.
  • matcha – A simplistic approach to benchmarking.

Code highlighting

  • Highlight.js – A JS syntax highlighter.
  • PrismJS – Lightweight, robust, elegant syntax highlighting.

Loading Status

Libraries for indicating load status.

  • Mprogress.js – Create Google Material Design progress linear bars.
  • NProgress – Slim progress bars for Ajax’y applications.
  • Spin.js – A spinning activity indicator.
  • progress.js – Create and manage the progress bar for all page objects.
  • progressbar.js – Beautiful and responsive progress bars with animated SVG paths.
  • pace – Automatically add a progress bar to your site.
  • topbar – Tiny & beautiful site-wide progress indicator.
  • nanobar – Very lightweight progress bars. No jQuery.
  • PageLoadingEffects – Modern ways of using SVG animations to receal new content.
  • SpinKit – A collection of loading indicators using CSS animations.
  • Ladda – Buttons with built-in loading indicators.
  • css-loaders – A collection of loading spinners animated with CSS

Besides libraries, there’s Collection on Codepen, and generators like Ajaxload, Preloaders, and CSSLoad.

Validation

  • Parsley.js – Validate your forms, and frontend, without writing a single line of JS.
  • jquery-validation – A jQuery Validation Plugin.
  • validator.js – For string validation and sanitization.
  • validate.js – A lightweight CodeIgniter-inspired JavaScript form validation library.
  • validatr – Cross-browser HTML5 Form Validation.
  • FormValidation – The best jQuery plugin to validate form fields. Formerly BootstrapValidator.
  • is.js – Check types, regexps, presence, time, and more.
  • FieldVal – multipurpose validation library. Supports both sync and async validation.

Keyboard Wrappers

  • mousetrap – A simple library for handling keyboard shortcuts in JavaScript.
  • keymaster – A simple micro-library for defining and dispatching keyboard shortcuts.
  • Keypress – A keyboard input capturing utility in which any key can be a modifier key.
  • KeyboardJS – A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
  • jquery.hotkeys – jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.
  • jwerty – Awesome handling of keyboard events.

Tours And Guides

  • intro.js – A better way for new feature introductions and step-by-step user guides for your website and project.
  • shepherd – Guide your users through a tour of your app.
  • bootstrap-tour – Quick and easy product tours with Twitter Bootstrap Popovers.
  • tourist – Simple, flexible tours for your app.
  • chardin.js – Simple overlay instructions for your apps.
  • pageguide – An interactive guide for web page elements using jQuery and CSS3.
  • hopscotch – A framework to make it easy for developers to add product tours to their pages.
  • joyride – jQuery feature tour plugin.
  • focusable – Set a spotlight focus on the DOM element adding an overlay layer to the rest of the page.

Notifications

  • iziToast – Elegant, responsive, flexible, and lightweight notification plugin with no dependencies.
  • messenger – Growl-style alerts and messages for your app.
  • noty – jQuery notification plugin.
  • pnotify – JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft.
  • toastr – Simple javascript toast notifications.
  • humane-js – A simple, modern, browser notification system.
  • smoke.js – Framework-agnostic styled alert system for javascript.
  • notie – Simple notifications and inputs with no dependencies.

Sliders

  • Swiper – Mobile touch slider and framework with hardware-accelerated transitions.
  • slick – The last carousel you’ll ever need.
  • slidesJs – Is a responsive slideshow plug-in for JQuery(1.7.1+) with features like touch and CSS3 transitions
  • FlexSlider – An awesome, fully responsive jQuery slider plugin.
  • unslider – The simplest jQuery slider there is.
  • sly – JavaScript library for one-directional scrolling with item-based navigation support.
  • vegas – A jQuery plugin to add beautiful fullscreen backgrounds to your web pages. It even allows Slideshows.
  • Sequence – CSS animation framework for creating responsive sliders, presentations, banners, and other step-based applications.
  • reveal.js – A framework for easily creating beautiful presentations using HTML.
  • 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.
  • bespoke.js – DIY Presentation Micro-Framework
  • Strut – Strut – An Impress.js and Bespoke.js Presentation Editor
  • PhotoSwipe – JavaScript image gallery for mobile and desktop, modular, framework independent.
  • jcSlider – A responsive slider jQuery plugin with CSS animations.
  • basic-jquery-slider – Simple to use, simple to the theme, simple to customize.
  • jQuery.adaptive-slider – A jQuery plugin for a slider with adaptive colored figcaption and navigation.
  • slidr – add some slide effects.
  • Flickity – Touch, responsive, flickable galleries.
  • Glide.js – Responsive and touch-friendly jQuery slider. It’s simple, lightweight and fast.
  • jQuery.adaptive-slider – A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Range Sliders

  • Ion.RangeSlider – Powerful and easily customizable range slider with many options and skin support.
  • jQRangeSlider – A javascript slider selector that supports dates.
  • noUiSlider – A lightweight, highly customizable range slider without bloat.
  • rangeslider.js – HTML5 input range slider element polyfill.

Form Widgets

Input

  • typeahead.js – A fast and fully-featured autocomplete library.
  • tag-it – A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.
  • At.js – Add Github-like mentions autocomplete to your application.
  • Placeholders.js – A JavaScript polyfill for the HTML5 placeholder attribute.
  • fancyInput – Makes typing in input fields fun with CSS3 effects.
  • jQuery-Tags-Input – Magically convert simple text input into a cool tag list with this jQuery plugin.
  • vanilla-masker – A pure javascript mask input.
  • Ion.CheckRadio – jQuery plugin for styling checkboxes and radio buttons. With skin support.
  • awesomplete – Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

Calendar

  • pickadate.js – The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
  • bootstrap-datepicker – A date picker for @twitter bootstrap forked from Stefan Petre’s (of eyecon.ro), improvements by @eternicode.
  • Pikaday – A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
  • fullcalendar – Full-sized drag & drop event calendar (jQuery plugin).
  • rome – A customizable date (and time) picker. Dependency free, opt-in UI.
  • datedropper – date dropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.

Select

  • selectize.js – Selectize is the hybrid of a textbox and a select box. It’s jQuery and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.
  • select2 – a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
  • chosen – A library for making long, unwieldy select boxes more friendly.

File Uploader

  • jQuery-File-Upload – File Upload widget with multiple file selections, drag&drop support, progress bar, validation, and preview images, audio, and video for jQuery.
  • dropzone – Dropzone is an easy-to-use drag’n’drop library. It supports image previews and shows nice progress bars.
  • flow.js – A JavaScript library providing multiple simultaneous, stable, fault-tolerant, and resumable/restartable file uploads via the HTML5 File API.
  • fine-uploader – Multiple file upload plugins with progress bar, drag-and-drop, and direct-to-S3 uploading.
  • FileAPI – A set of javascript tools for working with files. Multiupload, drag-drop, and chunked file upload. Images: crop, resize, and auto orientation by EXIF.
  • plupload – A JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, and client-side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight, and Flash.

Other

  • form – jQuery Form Plugin.
  • Garlic.js – Automatically persist your forms’ text and select field values locally, until the form is submitted.
  • Countable – A JavaScript function to add live paragraph-, word- and character-counting to an HTML element.
  • card – Make your credit card form better in one line of code.
  • stretchy – Form element autosizing, the way it should be.

Tips

  • tipsy – Facebook-style tooltips plugin for jQuery.
  • opentip – An open-source javascript tooltip based on the prototype framework.
  • qTip2 – Pretty powerful tooltips.
  • tooltipster – A jQuery tooltip plugin.
  • simptip – A simple CSS tooltip made with Sass.
  • jquery-popup-overlay – jQuery plugin for responsive and accessible modal windows and tooltips.
  • toolbar – A tooltip style toolbar jQuery plugin
  • hint.css – A tooltip library in CSS for your lovely websites.

Modals and Popups

  • Magnific-Popup – A Light and responsive lightbox script with a focus on performance.
  • jquery-popbox – jQuery PopBox UI Element.
  • jquery.avgrund.js – A jQuery plugin with the new modal concept for popups.
  • vex – A modern dialog library that is highly configurable and easy to style.
  • bootstrap-modal – Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.
  • css-modal – A modal built out of pure CSS.
  • jquery-popup-overlay – jQuery plugin for responsive and accessible modal windows and tooltips.
  • SweetAlert – An awesome replacement for JavaScript’s alert.
  • baguetteBox.js – Simple and easy-to-use lightbox script written in pure JavaScript.
  • colorbox – A light-weight, customizable lightbox plugin for jQuery.
  • fancyBox – A tool that offers a nice and elegant way to add zooming functionality for images, html content, and multi-media on your webpages.
  • swipebox – A touchable jQuery lightbox
  • jBox – jBox is a powerful and flexible jQuery plugin, that takes care of all your popup windows, tooltips, notices, and more.

Scroll

  • scrollMonitor – A simple and fast API to monitor elements as you scroll.
  • headroom – Give your pages some headroom. Hide your header until you need it.
  • onepage-scroll – Create an Apple-like one-page scroller website (iPhone 5S website) with the One Page Scroll plugin.
  • iscroll – iScroll is a high-performance, small footprint, dependency free, multi-platform javascript scroller.
  • skrollr – Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery.
  • parallax – Parallax Engine that reacts to the orientation of a smart device.
  • stellar.js – Parallax scrolling made easy.
  • plax – jQuery powered parallaxing.
  • jparallax – jQuery plugin for creating interactive parallax effects.
  • fullPage – A simple and easy-to-use plugin to create fullscreen scrolling websites (also known as single-page websites).
  • ScrollMenu – A new interface to replace the old boring scrollbar.
  • Clusterize.js – Tiny vanilla JS plugin to display large data sets easily.

Menu

  • jQuery-menu-aim – jQuery plugin to fire events when the user’s cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon’s.
  • jQuery contextMenu – contextMenu manager.
  • Slideout – A responsive touch slideout navigation menu for mobile web apps.
  • Slide and swipe – A sliding swipe menu that works with the touchSwipe library.

Table/Grid

  • jTable – A jQuery plugin to create AJAX based CRUD tables.
  • DataTables – (jQuery plug-in) It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
  • Tabulator – (jQuery plug-in) An extremely flexible library that creates tables with a range of interactive features from any JSON data source or existing HTML table.
  • Bootstrap Table – An Extension to the popular Bootstrap framework for creating tables that fit the style of your site with no need for additional markup.
  • floatThead – (jQuery plug-in) locks any table’s header while scrolling within the body. Works on any table and requires no custom html or css.
  • Masonry – A cascading grid layout library.
  • Packery – A grid layout library that uses a bin-packing algorithm. Useable for draggable layouts.
  • Isotope – A filterable, sortable, grid layout library. Can implement Masonry, Packery, and other layouts.
  • flexboxgrid – Grid based on CSS3 flexbox

Frameworks

  • Semantic UI – UI Kit with lots of themes and elements
  • w2ui – A set of jQuery plugins for front-end development of data-driven web applications.
  • fluidity – The world’s smallest fully-responsive css framework
  • Ink – An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping

Boilerplates

  • html5-boilerplate – A professional front-end template for building fast, robust, and adaptable web apps or sites.
  • mobile-boilerplate – A front-end template that helps you build fast, modern mobile web apps.
  • webplate – An awesome front-end framework that lets you stay focused on building your site or app while remaining really easy to use.
  • Cerberus – A few simple, but solid patterns for responsive HTML emails. Even in Outlook.
  • full-page-intro-and-navigation – An intro page with a full-width background image, a bold animated menu, and an iOS-like blurred effect behind the navigation
  • Fluid-Squares – A fluid grid of square units.
  • Mobile-First-RWD – An example of a mobile-first responsive web design
  • this-is-responsive – This Is Responsive
  • npm run-scripts Task automation with NPM run-scripts.

Gesture

  • hammer.js – A JavaScript library for multi-touch gestures.
  • touchemulator – Emulate touch input on your desktop.
  • Dragula – Drag and drop so simple it hurts

Maps

  • Leaflet – JavaScript library for mobile-friendly interactive maps.
  • Cesium – Open Source WebGL virtual globe and map engine.
  • gmaps – The easiest way to use Google Maps.
  • polymaps – A free JavaScript library for making dynamic, interactive maps in modern web browsers.
  • kartograph.js – Open source JavaScript renderer for Kartograph SVG maps.
  • mapbox.js – Mapbox JavaScript API, a Leaflet Plugin.
  • jqvmap – jQuery Vector Map Library.
  • OpenLayers3 – A high-performance, feature-packed library for all your mapping needs.

Video/Audio

  • prettyembed.js – Prettier embeds for your YouTube – with nice options like high-res preview images, advanced customization of embed options, and optional FitVids support.
  • html5media – Enables and tags in all major browsers.
  • Play-em JS – Play’em is a javascript component that manages a music/video track queue and plays a sequence of songs by embedding several players in an HTML DIV including Youtube, Soundcloud, and Vimeo.
  • polyplayer – Rule YouTube, Soundcloud, and Vimeo player with one API
  • flowplayer – The HTML5 video player for the web.
  • mediaelement – HTML5 or player with Flash and Silverlight shims that mimic the HTML5 MediaElement API, enabling a consistent UI in all browsers.
  • SoundJS – A library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers.
  • video.js – Video.js – open source HTML5 & Flash video player
  • FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid-width video embeds.
  • Ion.Sound – Simple sounds on any web page
  • photobooth-js – A widget that allows users to take their avatar pictures on your site
  • clappr – An extensible media player for the web.

Typography

  • FlowType.JS – Web typography at its finest: font size and line-height based on element width.
  • BigText – jQuery plugin, calculates the font-size and word spacing needed to match a line of text to a specific width.
  • circletype – A jQuery plugin that lets you curve type on the web
  • slabText – A jQuery plugin for producing big, bold & responsive headlines
  • simple-text-rotator – Add a super simple rotating text to your website with little to no markup
  • novacancy.js – Text Neon Golden effect jQuery plug-in.
  • jquery-responsive-text – Make your text sizing responsive!
  • FitText.js – A jQuery plugin for inflating web type
  • Lettering.js – A lightweight, easy-to-use Javascript <span> injector for radical Web Typography

Animations

Image Processing

  • lena.js – A Library for image processing with filters and util functions.
  • pica – High-quality image resize (with fast Lanczos filter, implemented in pure JS).
  • cropper – A simple jQuery image cropping plugin.

ES6

  • es6features – Overview of ECMAScript 6 features.
  • es6-features – ECMAScript 6: Feature Overview & Comparison.
  • es6-cheatsheet – ES2015 [ES6] cheatsheet containing tips, tricks, best practices, and code snippets.
  • ECMAScript 6 compatibility table – Compatibility tables for all ECMAScript 6 features on a variety of environments.
  • Babel (Formerly 6to5) – Turn ES6+ code into vanilla ES5 with no runtime.
  • Traceur compiler – ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.

SDK

  • javascript-sdk-design – Javascript SDK design guide extracted from work and personal experience
  • Spotify SDK – Entity-oriented SDK to work with the Spotify Web API.

Miscellaneous

  • echo – Lazy-loading images with data-* attributes.
  • picturefill – A responsive image polyfill for <picture>, srcset, sizes.
  • platform.js – A platform detection library that works on nearly all JavaScript platforms.
  • json3 – A modern JSON implementation compatible with nearly all JavaScript platforms.
  • Logical Or Not – A game about JavaScript specificities.
  • BitSet.js – A JavaScript Bit-Vector implementation
  • spoiler-alert – SPOILER ALERT! A happy little jQuery plugin to hide spoilers on your site.
  • jquery.vibrate.js – Vibration API Wrappers
  • list.js – Adds search, sort, filters, and flexibility to tables, lists, and various HTML elements. Built to be invisible and work on existing HTML.
  • mixitup – MixItUp – A Filter & Sort Plugin
  • grid – Drag and drop library for two-dimensional, resizable, and responsive lists.
  • jquery-match-height – a responsive equal heights plugin for jQuery.
  • survey.js – JavaScript Survey Engine. It uses JSON for survey metadata and results. http://surveyjs.org/
  • Array Explorer and Object Explorer – Resources to help figure out what native JavaScript method would be best to use at any given time
  • Clipboard.js – “Copy to clipboard” without Flash or use of Frameworks.

Podcasts

  • JavaScript Air – The live video broadcast podcast all about JavaScript and the Web platform.
  • Web of Tomorrow – Podcast about JavaScript for beginners.
  • Javascript Jabber – A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams, and more.

Worth Reading

  • You Don’t Know JS – Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
  • braziljs/js-the-right-way
  • JSbooks
  • Superhero.js – A collection of resources about creating, testing, and maintaining a large JavaScript code base.
  • SJSJ – Simplified JavaScript Jargon is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words.
  • How to Write an Open Source JavaScript Library – A comprehensive guide through a set of steps to publish a JavaScript open source library.
  • Jaavascript tutorial – Learn Javascript online from a diverse range of user-ranked online tutorials.
Conclusion

Congratulations, you have made it to the end of the list! Share it with your loved ones.

Credit: Thanks to Sorrycc for adding this list and waiving all copyright and related/neighboring rights to this work as he released it on GitHub under the Public Domain.

Think of this post as a fork of the original article (which is libre) so your contributions in the form of suggestions, comments, etc. are always welcome.

Are you happy with today’s list? Share your thoughts with us in the comments section below.

Divine Okoi is a cybersecurity postgrad with a passion for the open-source community. With 700+ articles covering different topics in IT, you can always trust him to inform you about the coolest tech.

Each tutorial at GeeksMint is created by a team of experienced writers so that it meets our high-quality writing standards.

3 thoughts on “100+ Essential Resources for Web Designers and Programmers”

Got Something to Say? Join the Discussion...