Toolbox

JavaScript libraries

The ★ star denotes 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 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. For reading barcodes with a webcam or phone camera.

JSBarcode for generating barcodes.

Image processing

jimp

An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.

omggif

JavaScript implementation of a GIF 89a encoder and decoder. Animated_GIF, for example, builds on top of this library.

exif.js

JavaScript library for reading EXIF image metadata.

Lanczos.js

Lancszos image resampling, for resizing images nicely in the browser.

sharp

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

chroma.js

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.

opentype.js

Read and write OpenType fonts using JavaScript.

two.js

A renderer-agnostic two-dimensional drawing API for the web.

snap.svg

The JavaScript library for modern SVG graphics.

rune.js

A JavaScript library for programming graphic design systems with SVG.

mojs

motion graphics toolbelt for the web

matter-js

A 2D rigid body physics engine for the web

ccapture.js

A library to capture canvas-based animations at a fixed framerate.

anime.js

A lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

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.

EPUB. starter-book / perfect-edition.

Repo Description Notes
pdf2json A PDF file parser that converts PDF binaries to text-based JSON, powered by a fork of pdf.js
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.

Algorithms, Data structures

Repo Description Notes
mnemonist Curated collection of data structures for the JavaScript language.

App architecture

Repo Description Notes
react A declarative, efficient, and flexible JavaScript library for building user interfaces.
svelte Cybernetically enhanced web apps.
astro Build faster websites with less client-side JavaScript.

Prototyping

This section contains tools that make it easier to just start working on your thing without a lot of setup.

Repo Description Notes
storybook 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

Repo Description Notes
artoo artoo.js is 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 <html> noise. From the maker of cheerio, and built on top of it, 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
readability A standalone version of the readability library used for Firefox Reader View. Extract the main content from a web page.

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())

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.

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.

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:

To evaluate an AST expression, look at eval-estree-expression.

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 CLIs

commander.js, Node.js command-line interfaces made easy

sade, a Smooth (CLI) Operator.

opsh is a lightweight argument parser based on POSIX guidelines.

Further reading