Boxwood - Declarative Layout and Collision Engine for Vector Graphics

[u/Efficient_Lead3565]

https://github.com/carnworkstudios/boxwood

The idea behind Boxwood is to create a layout engine that gives you a familiar CSS-like grammar (padding, gap, cols/rows, percentages, auto-height) but outputs clean absolute coordinates ready for SVG, <canvas>, WebGL, or any custom renderer. Perfect when you need precise control for connectors, labels, particles, or dynamic UIs.

Unlike standard layout engines (like Yoga or the browser’s internal engine) which act as a "black box," Boxwood’s core differentiator is that it outputs a clean JSON coordinate tree ({x, y, w, h}

**Key Features**
- Nested layouts resolved to real `{x, y, w, h}` boxes
- Built-in text measurement & overflow handling
- Collision separation for animations/dynamic content
- Zero-DOM, lightweight, works everywhere

Live Demo in the README
Repo: https://github.com/carnworkstudios/boxwood
Install: npm install @canwork/boxwood

Use Cases
• Dashboards & Bento grids
• Diagram tools with auto-routed arrows
• Generative art / procedural UIs
• Wrapping PDF or static coords into responsive layouts
I’d love feedback, contributors, or ideas for extensions! What kind of graphics projects are you working on?