williamngan/pts

A library for visualization and creative-coding

TypeScript

5,351

865 commits

updated Oct 3, 2026

See the code

README

Pts

Pts examples

Pts is a TypeScript and JavaScript library for visualization and creative coding.

Get started at ptsjs.org. Please try it, file issues, and send feedback to @williamngan.

Usage

Browser script

Download pts.js or pts.min.js from the dist directory, or use a CDN such as cdnjs, jsDelivr, or unpkg.

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

The classic script exposes the library as globalThis.Pts.

Package

Install the package:

npm install pts

Pts is ESM-first and also provides a CommonJS compatibility entry.

import { CanvasSpace, Group, Line, Pt } from "pts";
const { CanvasSpace, Group, Line, Pt } = require("pts");

Starter projects and integrations:

Read the guides and explore the demos.

Development

The maintained build environment is Node 24.18 or newer in the Node 24 line. The published library is also exercised on current Node 20 and 22 releases.

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

Useful individual commands include:

pnpm build
pnpm typecheck
pnpm test
pnpm test:browser
pnpm test:integrations
pnpm check:package
pnpm format
pnpm format:watch

pnpm check validates 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. Its packed-package integration suite also builds and runs the maintained React, Vue, skia-canvas, and single-file vanilla fixtures in test/integrations.

Prettier defines the repository's formatting rules. Run pnpm format once or keep pnpm format:watch running to reformat maintained source files as they change. The recommended VS Code extension and workspace settings also enable Prettier on save, while pnpm check rejects unformatted changes in CI.

Generate documentation

The documentation generator uses TypeDoc's Node API to rebuild the custom static documentation JSON from explicit source entry points. It also generates docs.md, guide.md, and llms.txt for agents and other clients that cannot navigate the documentation SPA:

pnpm run docs

Generated documentation is checked in. pnpm check:docs regenerates it in memory, reports stale or extra files, and exercises navigation, search, anchors, and responsive layouts in Chromium.

Contributing

Issues and small pull requests are welcome. For larger changes, please start a discussion with @williamngan.

License

Apache License 2.0. See LICENSE.

Copyright © 2017-present William Ngan and contributors.

art
canvas
creative-coding
design
generative
generative-art
graphic-design
graphics
linear-algebra
pts
sound
svg
typescript
vector
visualization

williamngan/pts

A library for visualization and creative-coding

TypeScript

5,351

865 commits

updated Oct 3, 2026

See the code

README

Pts

Pts examples

Pts is a TypeScript and JavaScript library for visualization and creative coding.

Get started at ptsjs.org. Please try it, file issues, and send feedback to @williamngan.

Usage

Browser script

Download pts.js or pts.min.js from the dist directory, or use a CDN such as cdnjs, jsDelivr, or unpkg.

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

The classic script exposes the library as globalThis.Pts.

Package

Install the package:

npm install pts

Pts is ESM-first and also provides a CommonJS compatibility entry.

import { CanvasSpace, Group, Line, Pt } from "pts";
const { CanvasSpace, Group, Line, Pt } = require("pts");

Starter projects and integrations:

Read the guides and explore the demos.

Development

The maintained build environment is Node 24.18 or newer in the Node 24 line. The published library is also exercised on current Node 20 and 22 releases.

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

Useful individual commands include:

pnpm build
pnpm typecheck
pnpm test
pnpm test:browser
pnpm test:integrations
pnpm check:package
pnpm format
pnpm format:watch

pnpm check validates 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. Its packed-package integration suite also builds and runs the maintained React, Vue, skia-canvas, and single-file vanilla fixtures in test/integrations.

Prettier defines the repository's formatting rules. Run pnpm format once or keep pnpm format:watch running to reformat maintained source files as they change. The recommended VS Code extension and workspace settings also enable Prettier on save, while pnpm check rejects unformatted changes in CI.

Generate documentation

The documentation generator uses TypeDoc's Node API to rebuild the custom static documentation JSON from explicit source entry points. It also generates docs.md, guide.md, and llms.txt for agents and other clients that cannot navigate the documentation SPA:

pnpm run docs

Generated documentation is checked in. pnpm check:docs regenerates it in memory, reports stale or extra files, and exercises navigation, search, anchors, and responsive layouts in Chromium.

Contributing

Issues and small pull requests are welcome. For larger changes, please start a discussion with @williamngan.

License

Apache License 2.0. See LICENSE.

Copyright © 2017-present William Ngan and contributors.

art
canvas
creative-coding
design
generative
generative-art
graphic-design
graphics
linear-algebra
pts
sound
svg
typescript
vector
visualization

Project health

Overall

5.9/10

Maintained

10/10

Code review

0/10
OpenSSF Scorecard

npm

Latest release

1.0.2 · Oct 3, 2026

Releases this year

3

Significant stargazers

(top 24 of 51)

Feross Aboukhadijeh

14,909 followers · starred Aug 2018

Sebastián Ramírez

32,342 followers · starred Oct 2018

Nazar Mokrynskyi

828 followers · starred Oct 2020

Vlad Filippov

1,963 followers · starred May 2021