HN Showcase
Back to browse
GitHub Repository

A Declarative Box-Split and Collision Engine for Vector Graphics. It provides a CSS-like layout grammar (padding, gap, cols, rows, auto-height), but outputs a clean JSON coordinate tree that any visual canvas (SVG, <canvas>, WebGL) can use to draw pixels, connectors, and particles.

0 starsTypeScript

I built a declarative layout engine for SVG, Canvas, WebGL

by bonzai2carn·Jul 3, 2026·3 points·0 comments
Visit ProjectView on HN

Post Description

Hey HN,

I built a tiny zero DOM layout engine for vector graphics and custom renderers to resolves nested rows/cols/grids into exact `{x, y, w, h}` boxes, with text measurement, overflow signals, and collision separation.

This is to help make SVG, PDF, Canvas responsive.

Feedback welcome from anyone building canvas/SVG diagrams, dashboards, node editors, or diagram tools.

Similar Projects

Developer Tools●●Solid

Auto-Layouting ASCII Diagrams

Mermaid-to-ASCII converter, but Mermaid already exports SVG natively.

CozyShip It
switz
24144mo ago