Pts: creative coding where the point is the primitive

A 1.0 that arrived in 2026

Pts is a TypeScript and JavaScript library for visualization and creative coding, maintained by William Ngan since 2017, and its release history tells a patient story, the 0.x line's last release being v0.11.3 in December 2022, with v1.0.0 landing on 2026-09-12 and v1.0.1 a week later. A version 1.0 arriving four years after the last 0.x tag signals a rewrite or a long quiet maturation rather than routine iteration, and the README's development section confirms the modernization, a Node 24 toolchain, a Playwright-driven check pipeline, a documentation generator built on TypeDoc's Node API. For an adopter, the practical reading is that the published package and the repository have both crossed a stability line, and the project's own getting-started entry at ptsjs.org is the door. The license is Apache 2.0, copyright William Ngan and contributors, with the repository pushed as recently as 2026-09-28.

Two consumption shapes, ESM-first

The library ships in two forms and states its preference, ESM-first with a CommonJS compatibility entry. The package path installs and imports by name:

npm install pts

import { CanvasSpace, Group, Line, Pt } from "pts";

The same names arrive through a CommonJS require for older toolchains. The browser-script path downloads pts.js or pts.min.js from the dist directory or a CDN, cdnjs, jsDelivr or unpkg, and the classic script exposes the library as globalThis.Pts:

<script src="path/to/pts.min.js"></script>

The package manifest backs the claim with an exports map carrying separate type declarations for the import and require conditions, and the sideEffects declaration lists only the two bundle files, so module bundlers tree-shake everything else, a detail that separates a packaging-conscious library from one that merely compiles. The unpkg and jsdelivr fields pin the CDN entry to the minified bundle.

The starter ecosystem: kit, React example, canvas component

Three integration entry points cover the common hosts. The pts-starter-kit is the general scaffold, the pts-react-example shows the library inside a React application, and react-pts-canvas is a published npm component wrapping the canvas for React users, an integration shipped as a component rather than an example, the distinction that saves an afternoon of effect and lifecycle wiring. The demo gallery on ptsjs.org anchors the vocabulary, the README linking directly to a circle intersection demo whose filename pattern, circle.intersectCircle2D, matches the files visible in the repository's demo directory, so every online demo corresponds to a short source file a learner can read. The demo names sketch the library's range, from create.delaunay and create.flock to curve.bezier, curve.bspline and geom.perpendicular, the geometry curriculum the library was designed to teach with.

pnpm check, a one-command quality gate

The development section documents a check pipeline that reads like a list of everything libraries usually verify piecemeal, formatting, linting, types, unit tests, deterministic documentation, documentation and bundle behavior in a real browser, reproducible artifacts, the packed package, ESM and CommonJS resolution, declarations, and tree-shaking, all under one command. Setup is three steps:

pnpm install --frozen-lockfile
pnpm exec playwright install chromium
pnpm check

The packed-package integration suite builds and runs maintained React, Vue, skia-canvas and single-file vanilla fixtures in test/integrations, meaning the library is exercised as consumers actually consume it, from the tarball rather than from source. Beyond check, the package scripts enumerate a bench family with memory measurement under exposed garbage collection, a visual test project with baseline updating, and a browser smoke script, the instrumentation of a project that treats regressions in rendered output, not just in types, as its contract. The maintained environment is Node 24.18 or newer in the 24 line, with the published library also exercised on current Node 20 and 22.

Documentation built for agents and checked for staleness

The documentation story has a modern twist worth noting. The generator uses TypeDoc's Node API to rebuild custom static documentation JSON from explicit source entry points, and it also generates docs.md, guide.md and llms.txt, flat files for agents and other clients that cannot navigate the documentation single-page application, the machine-readable surface most libraries have not yet considered. Generated documentation is checked in, and check:docs regenerates it in memory, reports stale or extra files, and exercises navigation, search, anchors and responsive layouts in Chromium, treating documentation drift as a test failure. A SKILL.md sits in the repository root, continuing the pattern of projects that make their capability legible to coding assistants. The docs and guides remain human-first at ptsjs.org, but the agent-facing artifacts acknowledge how the next generation of users will read the library, and the deterministic-documentation requirement inside pnpm check keeps every surface honest simultaneously.

Demo files as a geometry curriculum

The demo directory doubles as a syllabus, and the filenames organize by concept. The create family generates structure, delaunay triangulation, flocking behavior, gridcells, noise points and sampling. The curve family covers bezier, bspline and cardinal interpolation, geom.interpolate and geom.perpendicular cover vector operations, and the color family converts HSL and LAB to RGB. CanvasForm demos cover composition, gradients and text boxes, and CanvasSpace demos cover actions and resize handling, the two central classes of the rendering side named in the import example itself. This is not incidental documentation, it is the library's teaching posture, every concept visible as a running demo with readable source, and a study directory alongside suggests worked exploration beyond the demos. For a newcomer deciding whether Pts fits a project, an hour in the demo gallery answers the question better than any feature list, because the demos show the grain of the API, how many lines a given visual costs.

Small contributions welcome, larger ones discussed first

The contribution policy is calibrated to a one-maintainer project with a heavy quality gate, issues and small pull requests are welcome as they come, while larger changes should start a discussion with William Ngan before the code is written, the arrangement that keeps the check pipeline's guarantees intact without discouraging participation. Prettier defines formatting, a format:watch mode reformats maintained sources as they change, recommended VS Code settings enable Prettier on save, and CI rejects unformatted changes, so style never reaches review. The bench directory and its scripts serve performance questions with compare and record modes, and the whole tree, from the frozen lockfile to the checked-in documentation, reads as infrastructure designed so that the maintainer's attention goes to geometry rather than process. Set against peers like D3, Pts competes on coherence and typing discipline rather than ecosystem size, the bet that a smaller, carefully checked core outlasts a sprawling one.

Editorial conclusion

Use Pts when visualization or generative work should be typed, modular and tree-shakeable, with the geometry expressed as points and groups rather than an immediate-mode canvas API, and when a React or Vue host needs a canvas component rather than a full framework. Choose D3 when the job is data-bound documents with scales and axes rather than free geometric exploration, or a shader-first stack when the output is per-pixel effects. Verify first which integration matches your stack from the starter kit, React example and react-pts-canvas component, run the demos on ptsjs.org to see the vocabulary in action, and lean on the guides before reading the API reference.

Frequently asked questions

Official sources

1. License: Apache-2.0
2. Project website
3. README
4. Releases
5. williamngan/pts on GitHub