DEV Community

Cover image for 10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In Your Project!
Aya Bouchiha
Aya Bouchiha

Posted on β€’ Edited on

52 11

10 Of The Most Amazing JS Libraries That Almost You Will Enjoy Using Them In Your Project!

Hello everybody, I'm Aya Bouchiha, in this post, I'll share with you 10 amazing javascript libraries.

Chart.js

Chart.js is an open-source library that lets you visualize data.

cdn

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i chart.js
Enter fullscreen mode Exit fullscreen mode

Anime.js

Anime.js: is one of the most popular libraries which adds awesome animations to your web application.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i animejs
Enter fullscreen mode Exit fullscreen mode

D3.js

D3.js is a JavaScript library for manipulating documents based on data.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js" integrity="sha512-0x7/VCkKLLt4wnkFqI8Cgv6no+AaS1TDgmHLOoU3hy/WVtYta2J6gnOIHhYYDJlDxPqEqAYLPS4gzVex4mGJLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i d3
Enter fullscreen mode Exit fullscreen mode

GSAP

  • GSAP is one of the most famous libraries that animates anything JavaScript can touch, such as CSS properties and SVG.

  • github

  • docs

  • demo

  • tutorial

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js" integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i gsap
Enter fullscreen mode Exit fullscreen mode

vivus.js

vivus: is a lightweight JavaScript class that gives SVGs the appearance of being drawn.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js" integrity="sha512-oUUeA7VTcWBqUJD/VYCBB4VeIE0g1pg5aRMiSUOMGnNNeCLRS39OlkcyyeJ0hYx2h3zxmIWhyKiUXKkfZ5Wryg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i vivus
Enter fullscreen mode Exit fullscreen mode

TypeIt.js

TypeIt: is a JavaScript tool for creating typewriter effects.

cdn

<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i typeit
Enter fullscreen mode Exit fullscreen mode

dropzone.js

Dropzone is a JavaScript open-source library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js" integrity="sha512-VQQXLthlZQO00P+uEu4mJ4G4OAgqTtKG1hri56kQY1DtdLeIqhKUp9W/lllDDu3uN3SnUNawpW7lBda8+dSi7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i dropzone
Enter fullscreen mode Exit fullscreen mode

Scroll Out

ScrollOut is a javascript library that detects changes in scroll for reveal, parallax, and CSS Variable effects.

cdn

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i scroll-out
Enter fullscreen mode Exit fullscreen mode

Three.js

Three.js: is a powerful javascript library that helps you to create 3D computer graphics.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i three
Enter fullscreen mode Exit fullscreen mode

leaflet

leaflet: is an open-source JavaScript library for mobile-friendly interactive maps.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Enter fullscreen mode Exit fullscreen mode

npm

npm i leaflet
Enter fullscreen mode Exit fullscreen mode

Suggested Posts

To Contact Me:

Happy codding!

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (5)

Collapse
 
vagrantjin profile image
Vagrant Jin Kazama β€’

swiperjs also has an excellent API.

isotope.js/isotope-packery for filtering and masonary "packing" grid layouts.

big shout for scrollOut.

Collapse
 
prabhjotsinghchadha profile image
Prabhjot Singh Chadha β€’

Three js is my favourite too..

Collapse
 
ayabouchiha profile image
Aya Bouchiha β€’

Three.js is an incredible library!

Collapse
 
alexmacarthur profile image
Alex MacArthur β€’

Thanks for putting TypeIt on here (I made it)!

Collapse
 
ayabouchiha profile image
Aya Bouchiha β€’

Oh!!! Niceeee, You're amazing!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay