Dropzone.js – Drag and Drop File Uploads
DropzoneJS is a light-weight and open source library that you can use to add drag and drop file uploads with image previews in your website. It doesn’t depend on any other library (like jQuery) and works well with all major web browsers.
There are a lot of customization options available and you can theme the look of this utility to your own desire. For example, here is a bootstrap based DropzoneJS example.
Note that, this is just the client side implementation of file upload functionality. You would still need to implement a server side logic to handle the file upload. You can find multiple examples of how DropzoneJS can be used in pair with server side-implementations such as PHP and NodeJS.
The default look and feel of SweetAlert is quite clean and modern and it offers a lot of out of the box animations such as the one shown in the GIF above. You can customize SweetAlert easily, such as adding a custom icon or changing the theme with pre-existing ones or your own themes.
PhotoSwipe manipulates the browser’s history so that the user can link to each gallery item. It pre-loads neighboring images based on the direction of the user’s movement and you can control the number of images to pre-load.
There are a lot of other features and customizations offered by PhotoSwipe. The best part is that PhotoSwipe is free to use for personal as well as commercial projects.
You will find extensive documentation on the project’s GitHub page.
CamanJS is completely library independent and works both in NodeJS and the browser.
You can play with this example to understand the image manipulating power of CamanJS. Be aware that, this library does client side image manipulations and some of the filters could prove to be heavy on your CPU usage.
Chartist.js – Highly Customizable Responsive Charts
Chartist offers you highly customizable responsive charts that look great out of the box. Chartist uses SVG to render the charts and you can easily style them using CSS.
You can perform advanced animations too in your charts using the Chartist.Svg animation API. Check out some of the examples to get an idea about Chartist capabilities.
Chart.js – HTML5 Charts
As these charts are responsive out of the box and provide interactive support such as tooltip on hover.
You can check out how I used Chart.js and UptimeRobot API to make a status page for all my websites on its GitHub repo.
WOW.js – Reveal Animations When Scrolling
The only downside is that it is free for use in personal projects only and you would need to purchase a developer license to use in commercial applications. However, If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3 without any cost.
Refer to the project’s GitHub page for more information on licensing.
highlight.js – Syntax Highlighting for the Web
Highlight.js is a syntax highlighter that works in the browser as well as on the server (with Node.js). It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.
The project is licensed under BSD license. Check out these demo and play with the styles to see if this suits your project.
Lity – Lightweight Responsive Lightbox
Lity is a lightweight (only 2kB) and responsive lightbox plugin which supports images, iframes (for Google Maps, YouTube and Vimeo) and inline content out of the box.
Lity works with jQuery as well as Zepto and is licensed under MIT license.
Lettering.js – Radical Web Typography
With Lettering.js you can control and style the appearance of individual letters in a word. Lettering.js has the ability to split words and lines as well. Check out some of their examples to learn how this library can help you create stand out text effects in your websites.
Textillate.js – Text Animations
FitText – Text Animations
FitText makes font-sizes flexible depending on the screen size. You can use this plugin on your responsive layout to achieve scalable headlines that fill the width of a parent element.
clipboard.js – Copy to Clipboard without Flash
Clipboard.js allows you to copy content to clipboard without resorting to using Flash in web browsers. This library relies on both Selection and execCommand API and is supported on all modern web browsers.
Awesomeplete – Lightweight Auto-complete Widget
Awesomplete is an ultra lightweight, customizable, simple auto-complete widget with zero dependencies. It is built with modern standards for modern browsers and is licensed under MIT license.