DEV Community

loading...
Cover image for 70+ JavaScript library, frameworks, tools, and plugins

70+ JavaScript library, frameworks, tools, and plugins

chinedu profile image chinedu | ddevguys Originally published at ddevguys.com ・6 min read

stacks post HEADING (1).png

Hey and welcome to today's article 😊. 

I decided to put together some JavaScript library, frameworks, tools and plugins.

Some which I use in my projects. 

If you find them intriguing share it and save it for later.

Let's go…💃🕺💃🕺💃

giphy (1).gif

LIBRARY AND FRAMEWORK'S

NodeJs

Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.

ReactJs

React is an open-source, front end, JavaScript library for building user interfaces or UI components. 

VueJs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

NextJs

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.

Angular

Angular is a TypeScript-based open-source web application framework

Svelte

Svelte is a free and open-source front end JavaScript framework

Redux

Redux is an open-source JavaScript library for managing application state.

Meteor

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework written using Node.js.

Backbone.js

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–controller application design paradigm.

Ember.js

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern.


VISUALIZATION

Three.js

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

D3.js

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

Victory.js

A JavaScript 2D vector maths library for Node.js and the browser.

Chart.js

Simple, clean, and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

React-vis

React-vis is a React visualization library.

Trading Vuejs

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

Flexmonster

A pivot table component for web reporting, claims to be the most powerful JavaScript tool for visualizing your business data.

ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

Echarts

A Declarative Framework for Rapid Construction of Web-based Visualization.

Google Charts

Google Charts is an interactive Web service that creates graphical charts from user-supplied information.

amCharts

A go-to library for data visualization. When you don't have time to learn new technologies. When you need a simple yet powerful and flexible drop-in data visualization solution. Includes all basic and advanced chart types, as well as is extendable by additional plugins like Maps and TimeLine.


ANIMATION LIBRARY

Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.

Aos

Animate On Scroll library using CSS3.

Velocity

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation.

Mo.js

Mo.js is a javascript motion graphics library that is fast, retina-ready, modular and open source.

Popmotion

The animator's JavaScript toolbox. Powerful Support for keyframes, spring, and inertia animations on numbers, colors, and complex strings.

ScrollReveal

JavaScript library to animate elements as they scroll into view.

GreenSockJS

GSAP is an industry-standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

Skrollr

skrollr is a parallax scrolling library used to transform, scale, skew, and rotate any element.

AniJS

AniJS, Declarative handling library for CSS animations. very beginner-friendly.

Typed.js

Typed.js is a library that types.

Lottie

Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images.


VIDEO LIBRARY

Video.js

Video JS is a free and open-source HTML5 video player built with JavaScript and CSS.

Plyr

Plyr is a simple, lightweight, accessible, and customizable HTML5, YouTube, and Vimeo media player that supports modern browsers.

Jplayer

jPlayer is a free and open-source JavaScript library developed as a jQuery plugin that facilitates the embedding of web-based media, notably HTML5 audio and video in addition to Adobe Flash-based media.

Fit vid.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

indigo-player

Highly extensible, modern, JavaScript video player. Handles MPEG-Dash / HLS / MPEG-4 and is built on top of the HTML5 video element.

Flowplayer

Flowplayer is an online video platform for broadcasters, publishers, and media houses. It gives you top ranking ad fill rates and the best-of-breed live streaming.

Popcorn Js

Popcorn.js is an open-source JavaScript library for HTML5 media developers, freely available under the MIT License.

Xgplayer

This is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence.


AUDIO

Howler.js

Howler.js is a JavaScript library that works with Web Audio API by default and falls back to HTML5 Audio when not supported.

Tone.js

Tone.js packs in features for different virtual instruments, sequencers, effects, and more.

Wavesurfer.js

wavesurfer.js is an HTML 5 audio player and waveform visualizer, made with JavaScript and Web Audio.

Pizzicato.js

Pizzicato.js is another well-rounded library that provides a feature-packed set of tools to create everything from compositions made up of sample groups to precisely synthesized sounds.

Sound Manager 2

Sound Manager 2 is a JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio. Makes it easy to play audio using JavaScript.

Amplitudejs

AmplitudeJS lets you build a fully customizable web audio player Stop being limited by the web browser's audio player design.

Vexflow

Vexflow is a JavaScript library for rendering standard music notation and guitar tablature.

Sound js

SoundJS abstracts HTML5 sound implementation, making adding consistent cross-browser sound to your games or rich experiences much easier.

Ejecta

Ejecta is like a Browser without the Browser. It's specially crafted for Games and Animations. It has no DIVs, no Tables, no Forms - only Canvas and Audio elements. This focus makes it fast.


GAMES

MelonJS

MelonJS is yet another 2D focused game engine. By including the library into your code, you gain access to all kinds of features required for any game worth its money, such as physics support, collisions, sprites, and more.

Pixi.js

Superfast HTML 5 2D rendering engine that uses webGL with canvas fallback.

Phaser

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software and developed by Photon Storm. Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support.s

Babylon.js

Babylon.js is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5. 

Matter.js

Matter.js is a 2D physics engine for the web.

Egret core

Egret is a brand new open mobile game and application engine which allows you to quickly build mobile games and apps on Android,iOS and Windows.

Melon.js

MelonJS is a lightweight yet powerful HTML5 framework designed from the ground up to provide a true plugin-free 'write-once, run-everywhere' gaming platform. melonJS is an open-source project and supported by a community of enthusiasts. See our Gallery for a few examples of games powered by melonJS.

Crafty

Crafty is a JavaScript game library that can help you create games in a structured way.


FORMS

Quill

Module for simple form and input field bindings. Automatically creates hidden input fields for a form and adds submit handling and submit by key. You may also specify your own custom input fields. It creates fields for text, html and delta.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you're building something new from scratch, but also when you're trying to integrate something into an existing application with lots of existing markup. 

Selectize.js

Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Parsley.js

Parsley, the ultimate JavaScript form validation library
Validating forms for with this tool for frontend have never been so powerful and easy.

Fine Uploader

FineUploader is also simple to use. In the simplest case, you only need to include one JavaScript file. 

Pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.


Thanks for reading!

My hope is that after finishing this article you would have tools for creating awesome features with JavaScript in the browser.

Reach out on Twitter with some of your personal favorite libraries/frameworks and tools to use. Love you❤️❤️❤️🤓🤓🤓

Discussion (0)

pic
Editor guide