← Back to Toolbox
Working with images
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.
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
Convert a color from and to any format, generate pleasing color palettes and color variations. See also TinyColor, d3-color and my own culori.
A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
The Swiss Army Knife of Vector Graphics Scripting.
A renderer-agnostic two-dimensional drawing API for the web.
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.
|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 is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis.
|Graph theory (a.k.a. network) library for analysis and visualisation.
|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
|★ three.js ↪
|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).
|Fast functional WebGL.
|Building blocks for the VR Web.
|It uses three.js under the hood.
|PEX is a collection of modular software components that work together well to create a tool for computation thinking.
|Can help you bring things built with three.js, etc. to iOS.
|A Web Audio framework for making interactive music in the browser.
|An audio effects library for Web Audio.
|Making life easy to create a MIDI-app on the web.
|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.)
|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.
|This is the code behind the Stamen maps site, which shows off our custom tiles and explains how to get them into other sites.
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.
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.
SheetJS (Community Edition),
a unified interface to every Excel file format as well as Lotus 1-2-3, Numbers, and Quattro Pro [Website].
fast and simple report generator, from JSON to pdf, xslx, docx, odt [Website].
Algorithms, Data structures
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.
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
a standalone version of the readability library used for Firefox Reader View. Extract the main content from a web page.
the next web scraper. See through the From the maker of cheerio, and built on top of it,
x-ray gives you a terse, fluent API to scrape and navigate pages.
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)
|"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.
|Detect the language of text.
franc can tell in which of the 339 supported languages a piece of text is written.
|Natural language processor powered by plugins.
|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.
|It's a handy, and not overly-fancy tool for understanding, changing, and playing with English.
Content as structured data. Read more on the website.
Use this for more convenient methods to interact with the HTML (e.g.
querySelectorAll()). linkedom is a nimble, less complete, alternative for basic tasks.
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.
CSS parser / stringifier for Node.js.
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.
aims to be a very small and very fast spec compliant css lexer (or scanner or tokenizer depending on your favourite nomenclature).
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:
esprimaas the default parser, but can be configured for
To evaluate an AST expression, look at eval-estree-expression.
See also: code-red
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.
Some reading on what users expect from command-line tools: