Trellis

Building a canvas library taught me where the hard parts of React Flow actually are. Coordinates are the core of it: converting between screen and flow space under any zoom, finding a node's handle points, and fitting the view to a set of bounds all live in one tested geometry module. I kept the canvas controlled in the same way React inputs are: it never mutates nodes or edges, it emits typed changes (moved, selected, removed) that the app applies or refuses, which makes persistence and undo the app's choice. An external store read through useSyncExternalStore lets the viewport and an in-flight connection update at drag speed without re-rendering every node. Writing the layered layout meant learning how layer assignment and crossing reduction work, and keeping it a pure function made it easy to test. Touch support pushed me to let a dropped connection join the nearest handle on whatever node it lands on.

Trellis shows I can design and ship a reusable library with a small, deliberate public API, not just apps that consume one. It already runs in production: company-surface renders its canvas windows as Trellis node types. The work covers interaction design (drag, zoom, selection, keyboard delete), graph layout algorithms, rendering performance, theming through CSS custom properties that follow light and dark mode, and 49 Vitest tests across geometry, layout, changes, and the Flow component. The four demos make the claim visible: one canvas, four products that look and behave nothing alike.