50 popular JavaScript open-source projects on GitHub in 2018
Tags: javascript, projects, opensource, github
Published: 2018-08-27 05:48:08

---
title: 50 popular JavaScript open-source projects on GitHub in 2018
published: true
description: 
tags: javascript, projects, open source, github
---

![cover](https://thepracticaldev.s3.amazonaws.com/i/6lu8ktjkh6dgnymmk34r.png)

This post is curated by [IssueHunt](https://issuehunt.io/) that a crowdfunding and sourcing platform for open-source projects.

Anyone can fund any issues on GitHub and these money will be distributed to maintainers and contributors.

https://issuehunt.io/

---

## 1) VuePress
![1.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/1-1524306011006.png)  
VuePress is a minimalistic static site generator with a Vue-powered theming system, and a default theme optimized for writing technical documentation. VuePress page has its own pre-rendered static HTML, which not only provides great loading performance but it also is SEO-friendly.

GitHub: https://github.com/vuejs/vuepress

## 2) React
![2.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/2-1524306040366.png)  
React is the Facebook's JavaScript library for building user interfaces.  
Following are the distinctive features of React according to its official documentation:

> -   **Declarative:**  React makes it painless to create interactive UIs. Design simple views for each state in your application, and React
> will efficiently update and render just the right components when your
> data changes. Declarative views make your code more predictable,
> simpler to understand, and easier to debug.
> -   **Component-Based:**  Build encapsulated components that manage their own state, then compose them to make complex UIs. Since
> component logic is written in JavaScript instead of templates, you can
> easily pass rich data through your app and keep state out of the DOM.
> -   **Learn Once, Write Anywhere:**  We don't make assumptions about the rest of your technology stack, so you can develop new features in
> React without rewriting existing code. React can also render on the
> server using Node and power mobile apps using  React Native.

GitHub: https://github.com/facebook/react



## 3) Vue
![3.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/3-1524306064540.png)  
Vue is a progressive framework for building user interfaces.
It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases.

It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

GitHub: https://github.com/vuejs/vue



## 4) Prettier
![](https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-banner-light.png)
Prettier is an opinionated JavaScript code formatter.
It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

GitHub: https://github.com/prettier/prettier


## 5) Parcel
![](https://user-images.githubusercontent.com/19409/31321658-f6aed0f2-ac3d-11e7-8100-1587e676e0ec.png)
Parcel is a web application bundler, differentiated by its developer experience.
It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

GitHub: https://github.com/parcel-bundler/parcel


## 6) React-Spring
![6.jpg](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/6-1524306097588.jpg)  
React-spring is a set of simple, spring-physics based primitives (as in building blocks) that should cover most of your UI related animation needs once plain CSS can’t cope any longer. Forget easings, durations, timeouts and so on as you fluidly move data from one state to another.
This isn’t meant to solve each and every problem but rather to give you tools flexible enough to confidently cast ideas into moving interfaces.

GitHub: https://github.com/drcmda/react-spring



## 7) Prepack
![7.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/7-1524306121237.png)  
Prepack is a partial evaluator for JavaScript. Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently.
For initialization-heavy code, Prepack works best in an environment where JavaScript parsing is effectively cached.

GitHub: https://github.com/facebook/prepack


## 8) Node
![](https://camo.githubusercontent.com/9c24355bb3afbff914503b663ade7beb341079fa/68747470733a2f2f6e6f64656a732e6f72672f7374617469632f696d616765732f6c6f676f2d6c696768742e737667)  
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

GitHub: https://github.com/nodejs/node



## 9) Spectrum
![9.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/9-1524306177352.png)  

Spectrum aims to be the best platform to build any kind of community online by combining the best of web 2.0 forums and real-time chat apps.

With best-in-class moderation tooling, a single platform for all your communities, threaded conversations by default, community health monitoring (and much more to come), we think that we will be able to help more people start and grow the best online communities.

GitHub: https://github.com/withspectrum/spectrum


## 10) Popmotion
![10.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/10-1524306202230.png)  
Popmotion is a functional, flexible JavaScript motion library.
Almost all kinds of animations you can achieve using Popmotion. For example: Tween, spring, decay, keyframes, physics etc.

GitHub: https://github.com/Popmotion/popmotion



## 11) AR.js 
![](https://cloud.githubusercontent.com/assets/252962/23441016/ab6900ce-fe17-11e6-971b-24614fb8ac0e.png)  
AR.js is an efficient augmented reality for the web using ARToolKit.
It works like charm on mobile as well (on 60fps).

GitHub: https://github.com/jeromeetienne/AR.js


## 12) Tone.js
![](https://avatars2.githubusercontent.com/u/11019186?s=200&v=4)  
Tone.js is a Web Audio framework for creating interactive music in the browser.  
The architecture of Tone.js aims to be familiar to both musicians and audio programmers looking to create web-based audio applications.  

On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for scheduling events and prebuilt synths and effects. For signal-processing programmers (coming from languages like Max/MSP), Tone provides a wealth of high performance, low latency building blocks and DSP modules to build your own synthesizers, effects, and complex control signals.

GitHub: https://github.com/Tonejs/Tone.js




## 13) TensorFlow.js
![](https://js.tensorflow.org/images/TF_JS_lockup.png)
A WebGL accelerated, browser based JavaScript library for training and deploying ML models.

GitHub: https://github.com/tensorflow/tfjs-core




## 14) Mark Text
![14.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/14-1524306253630.png)  

Mark Text is a Markdown editor for Mac, Windows, and Linux. It is a concise text editor, dedicated to improving your editing efficiency.  
Mark Text support CommonMark Spec and GitHub Flavored Markdown Spec.  
And it is a realtime preview editor, what you type is what you see finally.

GitHub: https://github.com/marktext/marktext



## 15) Nano ID
![](https://github.com/ai/nanoid/raw/master/distribution.png)
A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

GitHub: https://github.com/ai/nanoid



## 16) Draggable
![](https://user-images.githubusercontent.com/643944/35602291-99e2c56e-0605-11e8-847f-95f1f6be1610.jpg)
Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience.

GitHub: https://github.com/Shopify/draggable



## 17) Reaction Commerce
![](https://raw.githubusercontent.com/reactioncommerce/reaction-docs/master/assets/Reaction-Commerce-Illustration-BG-800px.png)
Reaction Commerce is an event-driven, real-time reactive commerce platform built with JavaScript (ES6).  
It plays nicely with npm, Docker, and React.

GitHub: https://github.com/reactioncommerce/reaction




## 18) WhatsApp Web 
WhatsApp Web intends to provide a complete description and re-implementation of the WhatsApp Web API, which will eventually lead to a custom client.
WhatsApp Web internally works using WebSockets; this project does as well.

The architecture of Whatapp Web looks like the following:

![](https://raw.githubusercontent.com/sigalor/whatsapp-web-reveng/master/doc/img/app-architecture1000.png)

The **GitHub** page of WhatsApp Web from where you can download and see the project code is: 

GitHub: https://github.com/sigalor/whatsapp-web-reveng


## 19) G2: The Grammar of Graphics in JavaScript
![](https://camo.githubusercontent.com/751d3546926b972365f3d1e548fd6391fee7821a/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f414f77674b496a6b6e5866676750696a6d68796d2e676966)  
G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability.
It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms.
With G2, users can describe the visual appearance of a visualization just by one statement.

GitHub: https://github.com/antvis/g2



## 20) Greenlet
![](https://camo.githubusercontent.com/fb5e49bb86f420914fd5d8dd6b8835694804210a/68747470733a2f2f692e696d6775722e636f6d2f653858625962642e706e67)
Move an async function into its own thread. A simplified single-function version of workerize.

GitHub: https://github.com/developit/greenlet




## 21) Stimulus
![](https://github.com/stimulusjs/stimulus/raw/master/assets/logo.svg?sanitize=true)  

Stimulus is a JavaScript framework with modest ambitions.  
It doesn't seek to take over your entire front-end—in fact, it's not concerned with rendering HTML at all.  
Instead, it's designed to augment your HTML with just enough behavior to make it shine.  
Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.

GitHub: https://github.com/stimulusjs/stimulus



## 22) Oni
![](https://github.com/onivim/oni/raw/master/assets/oni-header.png)  
Oni is a new kind of editor, focused on maximizing productivity - combining  _modal editing_  with features you expect in modern editors. Oni is built with  [neovim](https://github.com/neovim/neovim), and inspired by  [VSCode](https://github.com/Microsoft/vscode),  [Atom](https://atom.io/),  [LightTable](http://lighttable.com/), and  [Emacs](https://www.gnu.org/software/emacs/)

The vision of Oni is to build an editor that allows you to go from  _thought to code_  as easily as possible - bringing together the raw editing power of Vim, the feature capabilities of Atom/VSCode, and a powerful and intuitive extensibility model - wrapped up in a beautiful package.

GitHub: https://github.com/onivim/oni



## 23) Workbox
![](https://user-images.githubusercontent.com/110953/28352645-7a8a66d8-6c0c-11e7-83af-752609e7e072.png)
Workbox is a collection of JavaScript libraries for Offline Caching and Offline Analytics.

GitHub: https://github.com/GoogleChrome/workbox




## 24) Luxon
![](https://lh3.googleusercontent.com/Q-TyP-0iMexxAQDt7N81PLjLCrkoBkZVuSxP_1laOHxmctHhwJKsOXC9DYeBGXs8NIM=s180)  
Want to work with dates and times in JavaScript?  
Luxon is a library for working with dates and times in Javascript.

GitHub: https://github.com/moment/luxon



## 25) slate-md-editor
![](https://camo.githubusercontent.com/e5874675d83ef4a43302d3e5f459d7054129c3fa/68747470733a2f2f692e696d6775722e636f6d2f4f71514d4d69432e676966)
A markdown editor, that allows you to edit live. This project is built on top of [slate framework](http://slatejs.org/#/). Support markdown syntax and hot keys.

GitHub: https://github.com/Canner/slate-md-editor




## 26) Puppeteer
![](https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png)  

Puppeteer is used to generate screenshots and PDFs of pages, crawl a SPA and generate pre-rendered content (i.e. "SSR"), automate form submission, UI testing, keyboard input, etc., and create an up-to-date, automated testing environment. 

GitHub: https://github.com/GoogleChrome/puppeteer



## 27) SheetJS
![img](http://sheetjs.com/logo.png)  

SheetJS is the parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, and test files.

Emphasis on parsing and writing robustness, cross-format feature compatibility with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.

GitHub: https://github.com/SheetJS/js-xlsx


## 28) Remote Browser
![](https://github.com/intoli/remote-browser/raw/master/media/tour-screenshot.png)  
Remote Browser is a library for controlling web browsers like Chrome and Firefox programmatically using JavaScript.  
You've likely heard of similar browser automation frameworks before, such as  [Puppeteer](https://github.com/GoogleChrome/puppeteer)  and  [Selenium](https://github.com/SeleniumHQ/selenium).  

Much like these other projects, Remote Browser can be used to accomplish a wide variety of tasks relating to UI testing, Server Side Rendering (SSR), and web scraping.  

What makes Remote Browser different from these other libraries is that it's built using standard cross-browser compatible technologies, and its primary goal is to facilitate interactions with existing APIs rather than to create a new one of its own.

GitHub: https://github.com/intoli/remote-browser



## 29) JS Paint
![](https://github.com/1j01/jspaint/raw/gh-pages/images/readme/main-screenshot.png)
A nice web-based MS Paint remake and more.

GitHub: https://github.com/1j01/jspaint



## 30) Lozad.js
![](https://github.com/ApoorvSaxena/lozad.js/raw/master/banner/lozad-banner.jpg)
Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.

GitHub: https://github.com/ApoorvSaxena/lozad.js

---

This post is curated by [IssueHunt](https://issuehunt.io/) that a crowdfunding and sourcing platform for open-source projects.

Anyone can fund any issues on GitHub and these money will be distributed to maintainers and contributors.

https://issuehunt.io/

---

## 31) Rough.js
![](https://camo.githubusercontent.com/321c5ec903de912560670ba0fb8d6b7705a2a4e5/68747470733a2f2f726f7567686a732e636f6d2f696d616765732f6361705f64656d6f2e706e67)
**Rough.js**  is a light weight (9kB) graphics library that lets you draw in a  sketchy,  hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing  [SVG paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).

GitHub: https://github.com/pshihn/rough



## 32) D3: Data-Driven Documents
![](https://camo.githubusercontent.com/722a5cc12c7d40231ebeb8ca6facdc8547e2abf7/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667)

**D3** (or **D3.js**) is a JavaScript library for visualizing data using web standards.  
D3 helps you bring data to life using SVG, Canvas and HTML.  

D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

GitHub: https://github.com/d3/d3


## 33) Quokka.js
![](https://cloud.githubusercontent.com/assets/979966/23738552/734affec-04e5-11e7-8390-999cd1083d7a.gif)  

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript.  
It runs your code immediately as you type and displays various execution results in your code editor.

GitHub: https://github.com/wallabyjs/quokka




## 34) Rythm.js
A javascript library that makes your page dance.

GitHub: https://github.com/Okazari/Rythm.js


## 35) Webpack Monitor
![](https://camo.githubusercontent.com/a1fc4e408df880b47d1dd8afff233d5fa9e673de/68747470733a2f2f726f6163686a632e6769746875622e696f2f77706d6c6f676f2d736d65642e706e67)  

Webpack Monitor is a configurable Webpack plugin that captures relevant statistics on your production builds, and an interactive analysis tool that helps developers better understand bundle composition and identify and prioritize optimization strategies.  


GitHub: https://github.com/webpackmonitor/webpackmonitor



## 36) Webamp
![](https://github.com/captbaritone/webamp/raw/master/images/preview.png)
A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

GitHub: https://github.com/captbaritone/webamp



## 37) jsvu
![](https://github.com/GoogleChromeLabs/jsvu/raw/master/screenshot.svg?sanitize=true)
_jsvu_  is the  **J**ava**S**cript (engine)  **V**ersion  **U**pdater.

GitHub: https://github.com/GoogleChromeLabs/jsvu




## 38) Amplitude.js
Amplitude.js is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage — not the browser.
No dependencies (jQuery not required).

GitHub: https://github.com/521dimensions/amplitudejs


## 39) Consola
![](https://github.com/nuxt/consola/raw/master/assets/screen1.png)
Elegant console logger. It is easy to use. It gives fancy output with Fallback for Continuous Integration (CI) environments.

GitHub: https://github.com/nuxt/consola


## 40) Superstruct
![](https://github.com/ianstormtaylor/superstruct/raw/master/docs/images/banner.png)
A simple and composable way to validate data in JavaScript.

GitHub: https://github.com/ianstormtaylor/superstruct



## 41) JSNES
![41.png](https://boostlog-public.s3.us-west-1.amazonaws.com/articles/5adb126e47018500491f3fac/41-1524306482821.png)  

A JavaScript NES emulator.  
It's a library that works in both the browser and Node.js.

GitHub: https://github.com/bfirsh/jsnes


## 42) Workerize
![](https://camo.githubusercontent.com/c8c479a26287b1b3b501dcb68135a5b70d2d6240/68747470733a2f2f692e696d6775722e636f6d2f4d426c486f44702e6a7067)
Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

GitHub: https://github.com/developit/workerize




## 43) Glide
![](https://glidejs.com/images/glidejs-cover.jpg)
Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s
lightweight, flexible and fast. Designed to slide. 

GitHub: https://github.com/glidejs/glide



## 44) scrollama.js
![](https://camo.githubusercontent.com/dd3cf52f5dee986437b0ef5b16c24c44364c2a38/68747470733a2f2f72757373656c6c676f6c64656e626572672e6769746875622e696f2f7363726f6c6c616d612f6c6f676f2e706e67)  

**Scrollama** is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.

GitHub: https://github.com/russellgoldenberg/scrollama



## 45) Buttercup
Cross-platform, free and open-source password manager based on NodeJS.

GitHub: https://github.com/buttercup/buttercup-desktop



## 46) JARVIS 
![](https://github.com/zouhir/jarvis/raw/master/.github/readme-logo.png?raw=true)  

J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod.

The **GitHub** page of Jarvis from where you can download and see the project code is: 

GitHub: https://github.com/zouhir/jarvis




## 47) Bottender
![](https://user-images.githubusercontent.com/3382565/33872101-6cbd07d8-df50-11e7-9c80-d1415448122a.png)
Make Bots in Your Way, Fast and Flexibly.

GitHub: https://github.com/Yoctol/bottender



## 48) luma
![](http://tangiblejs.com/wp-content/uploads/2017/10/luma.gl_.jpg)
luma provides easy-to-use WebGL2-based building blocks enabling high-performance GPU-based data visualization and computation in your browser.

GitHub: https://github.com/uber/luma.gl



## 49) Spacetime
![](https://user-images.githubusercontent.com/399657/31140478-80a4269a-a842-11e7-8dbf-b541fe3e87a7.png)  

A simple way to manipulate, compare, and format dates and times across the Earth.

GitHub: https://github.com/spencermountain/spacetime



## 50) MapTalks.js
![](https://user-images.githubusercontent.com/13678919/31573203-99ae6894-b0e9-11e7-8a7e-2b26eaff58c6.png)  

A light JavaScript library to create integrated 2D/3D maps.

GitHub: https://github.com/maptalks/maptalks.js





---

This post is curated by [IssueHunt](https://issuehunt.io/) that a crowdfunding and sourcing platform for open-source projects.

Anyone can fund any issues on GitHub and these money will be distributed to maintainers and contributors.

https://issuehunt.io/