mrkeyoor.com_
Tue 29 Sept 21:20 UTC
Webevaluationupdated 29 Sept 2026

kool-brushez review

The repository formerly named p5-playground now redirects to kool-brushez, a browser drawing studio built with p5.js. It puts six expressive brushes on one shared canvas, with common controls for erasing, undo, auto-fill, aspect ratio, and PNG export.

Verdict

Our run installed 23 packages in 6 seconds and passed all 23 node:test cases, which makes the renamed kool-brushez app an easy recommendation for studying modular p5 brush design. Use it as a compact drawing studio or as source for your own brush collection. Choose the p5.js Web Editor for code editing, and avoid this app when reload-safe projects or vector output are requirements.

We ran it

Lab card: what happened when we ran kool-brushezScreenshot of kool-brushez (kool-brushez.vercel.app)
Install✓ · 6s23 packages · 48 MB
Build✓ · 8s
Tests✓ · 5s23 passed · 0 failed of 23 (node:test)
Known vulns00 critical · 0 high · 0 moderate · 0 low (npm audit)
Repo62 files~8,583 lines of source · 1.9 MB · 0 CI workflows · tests dir

Answers from our run

Does kool-brushez build from source?

Dependencies installed in 6 seconds (23 packages), and the build succeeded in 8 seconds. We cloned commit 0cc5c7f into a clean Debian container with 3 CPUs and no project-specific setup.

Do kool-brushez's tests pass?

Yes: 23 of 23 passed when we ran the project's own test command (node:test). Some failures need services or credentials a bare container does not have.

Does kool-brushez have known vulnerabilities in its dependencies?

npm audit found none in the dependency tree at the time of our run.

Who should not use kool-brushez?

Developers expecting the old name to mean a browser code editor: the current app exposes drawing tools, and new brushes are added in source files.

What are the alternatives to kool-brushez?

p5.js Web Editor, p5.js, tldraw. Our run installed 23 packages in 6 seconds and passed all 23 node:test cases, which makes the renamed kool-brushez app an easy recommendation for studying modular p5 brush design.

Setup5/56-second install, 8-second build, and 23 passing tests
Docs5/5Brush API, controls, shortcuts, export, and test steps are detailed
Community2/5186 stars and 3 open PRs, but source activity stopped September 8
Maturity3/5Clean tested core; no releases, CI, or saved project format

Who it’s for

Creative coders who want a finished p5.js drawing interface rather than a blank sketch.
Developers building unusual raster brushes that can fit the documented registry and lifecycle.
Artists who want quick PNG studies from mouse, pen, or touch input without creating an account.
Educators looking for readable examples of p5 instance mode, canvas compositing, and input handling.

Who it’s NOT for

Developers expecting the old name to mean a browser code editor: the current app exposes drawing tools, and new brushes are added in source files.
Artists who need saved projects: drawings stay in the current tab's memory and disappear on reload unless exported.
Vector workflows that require SVG, editable paths, or layered project files: the only documented export is a flattened PNG.
Large-canvas illustrators who rely on zoom and scrolling: the README says neither is available, and the paper uses a 1,200-unit long edge.
Teams requiring a tagged release and CI gate: GitHub has no release, and our scan found no CI workflow.

Setup reality

Our fresh Debian sandbox installed commit 0cc5c7f in 6 seconds, adding 23 packages and using 48 MB on disk. The build succeeded in 8 seconds. Node's test runner finished in 5 seconds with 23 passed and 0 failed; npm audit found 0 known vulnerabilities.

Development needs Node 20.19 or newer, or Node 22.12 or newer. P5.js and the DM Sans font are bundled locally, so drawing does not depend on a CDN. The production build is a static site.

The default test command covers the Node tests we ran. The repository also has a separate Playwright browser suite that requires Chromium or an installed Chrome channel. Drawings have no persistence beyond the open tab, and export produces PNG rather than an editable project.

The renamed repository contains 6 brushes, not a code editor

GitHub redirects blakeshao/p5-playground to blakeshao/kool-brushez. The current project is a drawing application, not a place to type and execute arbitrary p5 sketches. Its six brushes produce animated music scores, schematic diagrams, airbrushed patches, subway networks, crowds, and model-kit sprues. All of them draw into the same piece of paper, so you can switch styles without discarding earlier marks.

The narrower purpose works in its favor. One brush picker, one settings panel, and one canvas are easier to understand than a general creative-coding environment. Mouse, pen, and touch share the same input path. Desktop panels collapse, while small screens turn them into side drawers. The UI also includes erasing, auto-fill, new variations, clear, aspect-ratio choices, and keyboard shortcuts. It feels like a specific art tool rather than a framework demo.

A brush needs 3 files and a small lifecycle

Each brush has a registry entry, an implementation module, and a preview image. The registry declares its name, controls, description, and lazy loader. The factory then implements setup, resize, drawing, pointer handling, finishing, clearing, auto-fill, randomization, and settings methods. The host owns the canvas, history, export, and coordinates, which prevents every brush from creating a separate p5 world.

The interface has useful constraints. A brush cannot create or resize the main canvas, install global callbacks, or save the file itself. Switching brushes finishes pending animation, commits pixels to the common artwork, and clears temporary layers. Modules load on demand and are initialized once. Those rules are specific enough to stop state from leaking across tools, yet adding a seventh brush does not require modifying the studio internals.

What happened when we ran it

We ran commit 0cc5c7f in a fresh unprivileged Debian container with 3 CPUs, 8 GB of RAM, Node 22, and no secrets. Installation took 6 seconds, added 23 packages, and used 48 MB on disk. The checkout contained 62 files, roughly 8,583 lines of source, and occupied 1.9 MB before dependencies. The Vite build completed successfully in 8 seconds.

The default test command finished in 5 seconds with 23 passed and 0 failed under node:test. Npm audit reported 0 known vulnerabilities across every severity. The repository has a tests directory, no Dockerfile, and no CI workflow. This was a clean run for the supplied Node target. It did not include the separate Playwright browser command, so we did not independently verify touch, export dimensions, Retina behavior, or cross-brush compositing in Chromium.

History stops at 16 steps, and reload removes the drawing

Undo and redo keep raster snapshots of the whole paper, with a limit of 16 editing steps. That includes strokes, auto-fill, and clear. The history restores pixels rather than procedural brush state, so a restored pattern may begin animating from fresh internal state. The approach is simple and predictable for a small canvas, but each checkpoint copies image data and the stack is intentionally bounded.

The harder limitation is persistence. Artwork lives only in the current tab's memory. Reloading or closing the page loses it unless you exported first. PNG export settles pending animation and saves the full-resolution paper without the controls or cursor. There is no documented JSON project file, layer model, SVG path export, or cloud save. For a quick visual study, that is fine. For work you expect to revise tomorrow, it is a deal breaker.

The paper favors fitted studies over detailed navigation

Fixed aspect ratios include 1:1, 4:3, 3:4, 16:9, and 9:16. The long edge stays at 1,200 logical units, and rendering density can rise to 3 times the logical size for a dense screen. Existing artwork is fitted uniformly when the window or ratio changes, without cropping. The app retains source pixels between resizes until another edit is committed.

There are no zoom controls and no canvas scrolling. That makes the entire paper visible and keeps pointer mapping straightforward, but it rules out a common illustration habit: zooming into one corner for precise cleanup. The eraser is shared across every brush and acts on committed raster pixels. If you need editable objects, selectable strokes, or an infinite work area, tldraw or a vector editor is a better starting point.

The September 8 push is recent, but the project is still young

The current repository was created on September 3, 2026, and its last default-branch push was September 8. GitHub showed 186 stars and 3 open issues and pull requests on September 29; all 3 were pull requests, and there were no open issues in the API response. One proposes transparent PNG output, while another adds a new brush. There is no tagged release.

MIT licensing is clear, and the bundled font carries its own SIL Open Font License notice. The project also documents Node versions, the brush contract, shortcuts, query parameters, build commands, and browser testing. Those details make it easier to fork than its age suggests. Still, the absent CI workflow and release history leave maintenance expectations undefined. Our 23 passing tests support the current snapshot, not a promise about future compatibility.

Alternatives

ProjectWhat it isPick it when
p5.js Web EditorThe official browser editor for writing, saving, and sharing p5.js sketches.pick this instead when you want to edit code in the browser or share complete sketches rather than use six fixed brush families.
p5.js gh↗The underlying creative-coding library for building custom interactive graphics.pick this instead when you need full control over the canvas and do not want the studio interface or brush contract.
tldraw gh↗An embeddable infinite-canvas SDK with shapes, editing tools, and multiplayer support.pick this instead when persistence, structured objects, collaboration, or an infinite canvas matters more than painterly brushes.

What people are saying

  1. [velocity-scout] blakeshao/p5-playground

Sources

  1. kool-brushez README
  2. Brush registration and lifecycle
  3. Shared studio implementation
  4. Package scripts and dependencies
  5. Commit tested by the lab

More web reviews

vinext · robinhood-meme-token-stock-launchpad · pure · shadcn-admin · m3e-canvas · fable51-worlds · the whole board →