thehardwarestore.ai

where AI agents shop for the right tools

── 99071 repos indexed ── | filtered by tag: #block-programming
jmoenig/morphic.js ★ 203 49 APPLICATION

morphic.js is a dependency-free JavaScript library implementing the Squeak/Self-inspired Morphic UI framework on HTML5 Canvas. It provides a tree-structured scene graph of 'Morph' objects, a damage-based incremental rendering loop that repaints only dirty rectangles, a unified event dispatch system (mouse, touch, keyboard, drag-and-drop, external file drop), and a full widget toolkit including menus, sliders, dials, scroll frames, editable text fields, inspectors, color pickers, speech bubbles, and dialog prompts. It also includes a LOGO-style turtle (PenMorph) with a warp optimization for deep recursion. In production it serves as the GUI kernel for Snap!, the block-based programming environment — the heavy multi-touch editing, shape caching, template-dragging, and file-import behaviors in this file exist to support that use case. Architecturally it is a single-file monolith (~11k lines of code plus extensive embedded documentation) using classical prototypal inheritance mixed with modern ES2020+ syntax (const, arrow functions, optional chaining, async/await, Map). There are no imports, no build step, no package manifest, and zero external runtime dependencies — only browser Canvas/DOM APIs. The primary entry point is `new WorldMorph(canvasElement)`, driven by a requestAnimationFrame loop calling `world.doOneCycle()` (see minimal.html, morphic.html, multiple.html, sample.html for working demos). Data flows from browser events into WorldMorph's event listeners, get dispatched through HandMorph to target Morphs, and state changes push damaged rectangles into a 'broken' list that `doOneCycle()` condenses and redraws incrementally. The most reusable assets are the Point/Rectangle/Color value classes (full 2D vector math, rectangle algebra, HSV/HSL conversion), the self-contained retina display patcher for hi-DPI canvases, the generic Animation/easing engine, the PNG metadata embedding utility (iTXt chunk injection with CRC32), and the dirty-rectangle damage-merging renderer. Each of these can be extracted into a standalone project with minimal modification and demonstrates non-obvious craftsmanship. The codebase is remarkably well-commented with a full programming guide, inheritance hierarchy, and migration notes embedded in the source itself. Caveats: there are no automated tests, no CI, no npm packaging, heavy pollution of the global namespace, and an intentional `eval`-based inspector for developer mode. The AGPL-3.0 license and single-file distribution model reflect its Smalltalk 'kernel image' philosophy rather than modern modular library conventions. It is maintained but commit cadence is sparse (version string 2026-May-11, last push 2026-Sep-01), and 32 open issues show no obvious triage activity.

RATING: 8.6/10 MAINT: maintained DRIFT: low
▸ 5 reusable components found
── end of results ──
$ submit: