List of Javascript Libraries for Faster Front End Development

JR.Anand
Gridbox
Published in
9 min readSep 14, 2017

Form Validation

  • Parsley.js — Validate your forms, frontend, without writing a single line of javascript.
  • jquery-validation — jQuery Validation Plugin.
  • validator.js — String validation and sanitization.
  • validate.js — Lightweight JavaScript form validation library inspired by CodeIgniter.
  • 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 — 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 introduction and step-by-step users guide 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 DOM element adding a 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 ressponsive 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 webpages. 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 theme, simple to customise.
  • 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 a 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. — http://leaverou.github.io/awesomplete/

Calendar

  • pickadate.js — The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
  • bootstrap-datepicker — A datepicker 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 — datedropper 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 select box. It’s jQuery based 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 selection, 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 plugin with progress-bar, drag-and-drop, direct-to-S3 uploading.
  • FileAPI — A set of javascript tools for working with files. Multiupload, drag’n’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, 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 — Light and responsive lightbox script with focus on performance.
  • jquery-popbox — jQuery PopBox UI Element.
  • jquery.avgrund.js — A jQuery plugin with new modal concept for popups.
  • vex — A modern dialog library which 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, taking 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 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 effect.
  • 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 old boring scrollbar.
  • Clusterize.js — Tiny vanilla JS plugin to display large data sets easily.

Menu

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.
  • floatThead — (jQuery plug-in) lock 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

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 YouTubes — 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. https://html5media.info/
  • 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 a 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 https://flowplayer.org/
  • mediaelement — HTML5 or player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers. http://mediaelementjs.com/
  • 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 http://clappr.io

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

  • velocity — Accelerated JavaScript animation.
  • jquery.transit — Super-smooth CSS3 transformations and transitions for jQuery.
  • imrpess.js — Make Prezi-like presentations with CSS3 transformations/transitions in an HTML document.
  • bounce.js — Create tasty CSS3 powered animations in no time.
  • GreenSock-JS — High-performance HTML5 animations that work in all major browsers.
  • TransitionEnd — TransitionEnd is an agnostic and cross-browser library to work with transitionend event.
  • Dynamic.js — Javascript library to create physics-based CSS animations.
  • the-cube — The Cube is an experiment with CSS3 transitions.
  • Effeckt.css — A Performant Transitions and Animations Library
  • animate.css — A cross-browser library of CSS animations. As easy to use as an easy thing.
  • textillate — A simple plugin for CSS3 text animations
  • move.js — CSS3 backed JavaScript animation framework
  • animatable — One property, two values, endless possiblities
  • shuffle-images — The Simplest Way to shuffle through images in a Creative Way http://www.thepetedesign.com/demos/shuffle-images_demo.html
  • smoothState.js — Unobtrusive page transitions with jQuery.

Signup for Gridbox — Simplest Interface Builder for Bootstrap & Foundation.

--

--