JavaScript libraries
This is a collection of JavaScript libraries that I find useful or interesting. The ★ (star) marks popular, high-quality choices. The ➸ (arrow) points to libraries I've written.
Working with images
OCR, Barcodes
★ tesseract.js, a javascript library that gets words in almost any language out of images.
quaggaJS, a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of various types of barcodes such as EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5 and CODABAR. The library is also capable of using
For reading barcodes with a webcam or phone camera.getUserMedia
to get direct access to the user's camera stream. Although the code relies on heavy image- processing even recent smartphones are capable of locating and decoding barcodes in real-time.
JSBarcode for generating barcodes.
Image processing
★ jimp
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
JavaScript implementation of a GIF 89a encoder and decoder. Animated_GIF, for example, builds on top of this library.
JavaScript library for reading EXIF image metadata.
Lancszos image resampling, for resizing images nicely in the browser.
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips
library (a native dependency).
Drawing, illustration, motion
JavaScript library for all kinds of color manipulations.
Convert a color from and to any format, generate pleasing color palettes and color variations. See also TinyColor, d3-color and my own culori.
★ p5.js
A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
★ paper.js
The Swiss Army Knife of Vector Graphics Scripting.
A renderer-agnostic two-dimensional drawing API for the web.
The JavaScript library for modern SVG graphics.
A JavaScript library for programming graphic design systems with SVG.
motion graphics toolbelt for the web
A 2D rigid body physics engine for the web
A library to capture canvas-based animations at a fixed framerate.
A lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Typography
opentypejs/opentype.js, read and write OpenType fonts using JavaScript
.
★ foliojs/fontkit, an advanced font engine for Node and the browser
.
Pomax/lib-font adds a
.new Font()
object to the JavaScript toolbox, similar to new Image()
for images
harfbuzz/harfbuzzjs, providing HarfBuzz shaping library for client/server side JavaScript projects
.
Data visualization
Repo | Description | Notes |
---|---|---|
★ d3 | A JavaScript visualization library for HTML and SVG. | The tool of choice for any data visualization project. To draw standard charts with D3, take a look at some libraries built on top of it: MetricsGraphics, plottable, d3plus, victory, semiotic. Further reading: awesome-d3. |
vega-lite ↪ | Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis. | |
cytoscape.js ↪ | Graph theory (a.k.a. network) library for analysis and visualisation. | |
dagre | Directed graph renderer for JavaScript | Built on top of graphlib by the same author, dagre helps you build directed graphs that you can then plug into D3 or cytoscape. See the excellent wiki for details. |
3D, VR, WebGL
Repo | Description | Notes |
---|---|---|
★ three.js ↪ | JavaScript 3D library. | Much like D3 is the tool of choice for data visualization, three.js is the established library for working in 3D. See also pre3d (although it hasn't been worked on in ages). |
regl ↪ | Fast functional WebGL. | |
aframe ↪ | Building blocks for the VR Web. | |
blotter ↪ | A JavaScript API for drawing unconventional text effects on the web. | It uses three.js under the hood. |
pex ↪ | PEX is a collection of modular software components that work together well to create a tool for computation thinking. | |
ejecta | A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS | Can help you bring things built with three.js, etc. to iOS. |
Audio
Repo | Description | Notes |
---|---|---|
★ Tone.js | A Web Audio framework for making interactive music in the browser. | |
paulstretch.js | This is a JavaScript implementation - with a few improvements - of Paul's Extreme Sound Stretch algorithm (Paulstretch) by Nasca Octavian PAUL. | |
tuna | An audio effects library for Web Audio. | |
MIDI.js | Making life easy to create a MIDI-app on the web. | |
teoria | Javascript taught Music Theory | |
WebMidi.js | WebMidi.js helps you tame the Web MIDI API. Send and receive MIDI messages with ease. Control instruments with user-friendly functions (playNote, sendPitchBend, etc.). React to MIDI input with simple event listeners (noteon, pitchbend, controlchange, etc.) | |
NexusUI ↪ | NexusUI is a JavaScript toolkit for easily designing musical interfaces in web browsers and mobile apps, with emphasis on rapid prototyping and integration with web audio. | |
Gibberish ↪ | Fast, JavaScript DSP library that creates JIT optimized audio callbacks using code generation techniques | Library behind Gibber ↪ — an audiovisual live coding environment for the browser. See also interface.js ↪ by the same author — a GUI library for music / arts applications that works with touch, mouse and motion events. |
genish.js ↪ | A library for generating optimized, single-sample audio callbacks in JavaScript. Inspired by gen~ in Max/MSP. | |
howler.js ↪ | howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms. |
Dig deeper:
Mapping
Repo | Description | Notes |
---|---|---|
★ leaflet.js | JavaScript library for mobile-friendly interactive maps. | |
Stamen maps | This is the code behind the Stamen maps site, which shows off our custom tiles and explains how to get them into other sites. | |
turf.js | A modular geospatial engine written in JavaScript. |
Gamemaking
Repo | Description | Notes |
---|---|---|
coquette | A micro framework for JavaScript games. Handles collision detection, the game update loop, canvas rendering, and keyboard and mouse input. |
Working with documents
To create PDFs from scratch, look at pdfkit and jsPDF. To create and edit existing PDF files, pdf-lib. To view PDFs, see pdf.js.
pdf2json: A PDF file parser that converts PDF binaries to text-based JSON, powered by a fork of pdf.js.
EPUB
starter-book / perfect-edition.
epub.js: EPUBs in the browser.
magicbook: It aims to be the best free tool for creating print and digital books from a single source.
Spreadsheets
SheetJS (Community Edition), a unified interface to every Excel file format as well as Lotus 1-2-3, Numbers, and Quattro Pro
[Website].
carbone, fast and simple report generator, from JSON to pdf, xslx, docx, odt
[Website].
Algorithms, Data structures
mnemonist: Curated collection of data structures for the JavaScript language.
App architecture
React.js has been, and continues to be, a popular choice for making UI components and organizing JavaScript apps. I’ve used it extensively, and wrote a guide for it.
However, there is now a whole generation of smaller, more performant alternatives to explore: Preact, Solid, Qwik, Marko, and Lit are some libraries on my radar. Going forward, Web Components and this type of lightweight, ideally non-compiled, JavaScript library is where I want to invest my energy, to the detriment of otherwise very valid choices of either Vue.js or Svelte.
Synchronization
Yjs is a shared editing framework. It exposes Shared Types that can be manipulated like any other data type. But they are synced automatically!
A JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.
Prototyping
This section contains tools that make it easier to just start working on your thing without a lot of setup.
Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. This works as a React (or Vue) playground that lets you focus on writing components.
Web scraping, data extraction
★ readability, a standalone version of the readability library used for Firefox Reader View.
Extract the main content from a web page.
➸ hred, reduce HTML (and XML) to JSON from the command line.
Can also be used as a JavaScript library.
artoo, a piece of JavaScript code meant to be run in your browser's console to provide you with some scraping utilities.
Allows you to create custom bookmarklets to scrape a web page from your browser; I could see this being used in places where on a server you'd have to jump through some hoops, e.g. getting your Facebook saved links.
x-ray, the next web scraper. See through the
From the maker of cheerio, and built on top of it, <html>
noise.x-ray
gives you a terse, fluent API to scrape and navigate pages.
fathom, a framework for extracting meaning from web pages.
Seems to be still a work in progress, but it will ultimately be a tool for understanding where some particular type of content is on a page: Where is the body? The title? Is this a 'next page' button? Is this a comment form, and are there comments here? By better understanding the parts of a page, we can improve our understanding of how a user interacts with it.
(source)
Language processing
Repo | Description | Notes |
---|---|---|
natural | "Natural" is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported. At the moment, most of the algorithms are English-specific. | |
franc ↪ | Detect the language of text. | franc can tell in which of the 339 supported languages a piece of text is written. |
retext | Natural language processor powered by plugins. | |
lunr.js ↪ | Simple full-text search in your browser | Since lunr.js only supports English by default, supplement it with lunr-languages which is a collection of languages stemmers and stopwords. |
nlp_compromise | It's a handy, and not overly-fancy tool for understanding, changing, and playing with English. | |
snowball-js | javascript implementation of the popular snowball word stemming nlp algorithm |
Parsing things
★ unified
Content as structured data. Read more on the website.
Parse HTML
★ jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.
Use this for more convenient methods to interact with the HTML (e.g. querySelectorAll()
). linkedom is a nimble, less complete, alternative for basic tasks.
parse5 provides nearly everything you may need when dealing with HTML. It's the fastest spec-compliant HTML parser for Node to date. It parses HTML the way the latest version of your browser does.
Use this to get a barebones representation of your HTML. If you don't mind diverging from the spec, htmlparser2 is a fast alternative.
Parse CSS
css, a CSS parser / stringifier for Node.js
.
postcss is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more
.
csslex aims to be a very small and very fast spec compliant css lexer (or scanner or tokenizer depending on your favourite nomenclature)
.
Parse JavaScript
★ acorn, A small, fast, JavaScript-based JavaScript parser.
@babel/parser, (previously Babylon) is a JavaScript parser used in Babel
[website].
esprima, ECMAScript parsing infrastructure for multipurpose analysis.
Parsers generally produce an abstract syntax tree (AST) that follows the estree format. Use AST Explorer to look around.
To traverse and change the AST, then write it back as a string:
- recast: JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator. Uses
esprima
as the default parser, but can be configured foracorn
or@babel/parser
. - astring
- atravel
To evaluate an AST expression, look at eval-estree-expression.
See also: code-red
Command-line tools
jscodeshift is a CLI tool to apply transforms to JavaScript. It uses recast
under the hood, while offering a more convenient API. See my intro: Use code to explore and change JavaScript files.
Building command-line tools
Parse CLI arguments. Starting with v18.3, Node ships a native CLI argument parser util.parseArgs()
, for which Axel Rauschmayer's has written a handy guide. For bare minumum, ➸ opsh is a lightweight argument parser based on POSIX guidelines. If you prefer a fluent APIs and more convenience out of the box, look at commander.js or sade.
See also: Building a command-line tool.