Thi.ng: A Vast Toolkit for Computational Design

Thi.ng is not a framework. It's a collection of over 350 open-source projects—with at least half actively maintained—that have grown organically since 2006. Created by Karsten Schmidt, it's a bottom-up library ecosystem for computational design, generative art, and data visualization.

The Numbers

  • 350+ sub-projects, with 216 packages in the thi.ng/umbrella monorepo
  • ~245k lines of code, documentation, and diagrams
  • 185 fully documented example projects
  • 500+ topics covered (from 2D graphics to WebAssembly)
  • Zero third-party dependencies in the monorepo (except for a few tools)

TypeScript at the Core

The primary development focus is on TypeScript. Since 2018, the thi.ng/umbrella monorepo has been the main vehicle, housing about half of all projects. These packages are independent but share a common philosophy: functional, declarative, and data-driven. They prioritize composition, interoperability, and powerful data structures over classic OOP.

What's Inside?

Thi.ng covers a staggering range of topics:

  • 2D/3D graphics: WebGL, SVG, canvas, bezier curves, voxels, meshes
  • Data structures: typed arrays, trees (quadtree, octree, KD-tree), graphs, heaps, hash maps
  • Algorithms: noise (Perlin, simplex), Voronoi, Delaunay triangulation, FFT, physics, flocking
  • I/O: file formats (TIFF, JPEG, PNG, SVG, OBJ, STL), binary parsing, CSV, JSON
  • UI/UX: reactive streams, DOM diffing, component-based UIs (hdom)
  • Audio: oscillators, filters, envelope generators, waveform synthesis
  • Math: linear algebra, geometry, statistics, random number generation
  • Languages: DSLs, parsers, code generation, transducers

Each package is small, focused, and can be used independently. The tag cloud on the site lists over 500 topics, and you can filter by multiple tags to find relevant packages.

Example: Using thi.ng for Generative Art

Here's a quick example of using @thi.ng/geom and @thi.ng/rstream to create a reactive animation:

import { circle, asSvg, svgDoc } from "@thi.ng/geom";
import { reactive } from "@thi.ng/rstream";

const pos = reactive([100, 100]);

pos.subscribe({
  next(p) {
    document.getElementById("svg")!.innerHTML = asSvg(
      svgDoc({ width: 200, height: 200 },
        circle(p, 20)
      )
    );
  }
});

// Move the circle pos.next([150, 50]);


This creates a reactive circle that moves when the stream updates—no framework needed.

## No Dependencies, No Lock-In

Thi.ng packages have almost no external dependencies. The monorepo's internal relationships are explicitly documented in each package's README. This makes the library lightweight and avoids dependency hell. All packages are Apache 2.0 licensed.

## History and Philosophy

Karsten Schmidt started thi.ng in 2006 to support his own design work. Over the years, it expanded as open-source tooling for computational design was scarce. He contributed to Processing and Clojure, and his work has been exhibited at MoMA, the Victoria & Albert Museum, and the Barbican.

The philosophy is bottom-up: small, composable pieces that can recombine to meet changing needs. Projects are maintained in a round-robin fashion based on feedback. Some projects have active followings even a decade after their last release.

## Beyond TypeScript

While TypeScript is the current focus, thi.ng also includes projects in Clojure, ClojureScript, C11, Houdini VEX, and even Zig. They share the same principles: functional, declarative, and data-driven.

## Getting Started

1. Visit [thi.ng](https://thi.ng) and explore the tag cloud.
2. Install a package: `npm install @thi.ng/geom`
3. Check the 185 example projects for inspiration.
4. Join the discussion on the [forums](https://github.com/thi-ng/umbrella/discussions).

## Why It Matters Now

Generative design and data visualization are increasingly important in frontend development. Thi.ng offers a mature, dependency-free alternative to heavy frameworks like Three.js or D3.js for specific use cases. If you need fine-grained control over geometry, colors, or reactive data flows, thi.ng is worth exploring.

## Editor's Take

I've been using thi.ng for a few side projects, and honestly, the sheer breadth of packages is both a strength and a weakness. On one hand, you can find a library for almost anything—yesterday I needed a Delaunay triangulator and `@thi.ng/geom` had it. On the other hand, the documentation is sparse for some packages, and the lack of a unified API can be confusing. But if you're comfortable reading source code and experimenting, thi.ng is a goldmine. I'd love to see better onboarding docs, but the library itself is rock solid.