40 JS Plugins All Web Developers Should Know About

Friday, August 19, 2016

We searched the web for the best JS plugins and libraries all web developers should know about, and came up with this awesome roundup of 40 most useful JS plugins for your inspiration!

Add these gems to your toolbox! We categorized them, for easy browsing, into JS plugins for audio, buttons and switches, carousel sliders, data visualization, file upload, forms and search, images, layout, maps, modals, navigation, notifications, transition and effects and typography.

Huge thanks to the creators of these amazing JS plugins!

Audio

audio.js

audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. This JS plugin has a consistent HTML player user interface for all browsers. The UI can be styled with CSS.

audioplayer.js

This is a jQuery plugin that replaces the <audio> element with a custom HTML code. You can also get a whole new player which looks the way you want, with just a bit of CSS.

Buttons & Switches

Dot Navigation Styles

These are some subtle effects and styles for simple dot navigation with you. These can be used for a page scroll navigation or a thumbnail preview.

Share-button

This is a fast, beautiful, and painless social share plugin. Check it out!

Carousel

Flickity

Flickity is a JavaScript slider library, optimized for touch gestures, performance, and more!

Glide.js

This is a simple, responsive and fast plugin. This touch-friendly jQuery carousel slider is minimalist and offers everything you need from a simple slider plugin.

Tilted Content Slideshow

This slider plays with 3D perspective and performs some interesting animations on the right-hand side images.

Unslider

Unslider is an ultra-simple jQuery slider for your website. To get started using Unslider, just download the repos.

Data Visualisation

Charts.js

This is a simple yet flexible JavaScript charting for designers & developers. It provides a clear visual distinction between data sets and out of the box stunning transitions when changing data.

Data Visualization Selection

This is a collection of tools that will make your life easier creating meaningful and beautiful data visualizations.

Dynatable

This is a HTML5+JSON interactive table plugin. Dynatable is a semantic, interactive table plugin using jQuery, HTML5, and JSON.

File Upload

Dropzone.js

DropzoneJS is an open source library that provides drag and drop file uploads with image previews. It’s lightweight too!

Forms & Search

Isotope

This plugin lets you filter & sort magical layouts. You can also use Isotope to develop commercial sites, themes, projects, and applications, if using the Commercial license.

List.js

This is an incredibly fast vanilla JavaScript plugin that adds search, sort, filters and flexibility to plain HTML lists, and tables.

Progression.js

This is a jQuery plugin that gives users real time hints & progress updates as they complete forms.

Images

Adaptive Backgrounds

This is a jQuery plugin for extracting dominant colors from images and applying it to its parent.

bLazy.js

bLazy is a lightweight script for lazy loading and multi-serving images. It’s written in pure JavaScript and it doesn’t depend on 3rd-party libraries such as jQuery.

Color Thief

With this plugin you can grab the color palette from an image. It uses Javascript and the canvas tag to make it happen.

croppic

croppic is supported on current browsers, such as chrome, Firefox, IE, safari and opera. This is an image cropping jquery plugin that will satisfy your needs and much more.

Face Detection

This is a jQuery/Zepto Face Detection plugin that works on images and videos.

jQuery Interactive 3D

This is a plugin which lets you create a 3D interactive object using images and one simple JS call.

Layout

Fit.js

Fit.js helps you fit things into other things. The concept is best illustrated on the demo page.

MixItUp

MixItUp is a jQuery plugin providing animated filtering and sorting.
It is great for managing any categorized or ordered content like portfolios, galleries and blogs.

Maps

Leaflet

This is an open-source JavaScript library for mobile-friendly interactive maps, weighing just about 33 KB of JS.

Modals

Animated Modal Windows

This is a jQuery plugin that creates an image slider which gives more information when clicked on. It has included a bunch of built-in animations for the modal windows.

Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with a focus on performance and providing the best experience for users.

Responsive Lightbox

This is a lightbox only for images, not videos, text, and iframes. It is perfect for those who want a purpose-focused, lightweight plugin.

Navigation

Google Nexus Menu

This is a tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.

Swipeable Side Menu

This is a tutorial that will teach you how to replicate the behavior of the side menu, similar to what you’ve seen on smartphone applications.

Notifications

Toaster

toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required.

Parallax

parallax.js

This is a simple parallax plugin. For the best experience, check out this site on a mobile or tablet equipped with a gyroscope.

Scrolling

fullPage.js

This is a plugin for creating beautiful full screen scrolling websites. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.

Midnight.js

Midnight.js lets you switch fixed headers on the fly, create your fixed nav (or header) and also you can use whatever markup suits you.

Transitions & Effects

AnimateScroll

AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style.

animo.js

This is a collection of libraries with useful open-sourced tools for you to use, improve and share.

OriDomi

OriDomi features a built-in queuing system that can be used to easily create sequences. It also has the ability to manipulate a composition with the mouse or by touch is enabled by default.