SVGLayout

Flex and Grid layout engine for SVG — TypeScript-first, zero dependencies.

CSS layout primitives (flexbox, grid, spring animation, constraint solving) for SVG coordinate space. Drop it into any D3 chart, diagram tool, SVG UI renderer, or canvas-based app.

Install

npm install svglayout

Quick start

import { computeFlex, computeGrid, SVGLayout } from 'svglayout';
import type { FlexItem, GridItem } from 'svglayout';

// ── Flex ──────────────────────────────────────────────────────
const items: FlexItem[] = [
  { w: 80, h: 60 },
  { w: 120, h: 60, grow: 1 },  // absorbs remaining space
  { w: 80, h: 60 },
];

const positions = computeFlex(items, 600, 120, {
  direction:      'row',
  justifyContent: 'flex-start',
  alignItems:     'center',
  gap:            16,
  padding:        20,
});
// → [{ x, y, w, h, line }, ...]

// ── Grid ──────────────────────────────────────────────────────
const gridItems: GridItem[] = [
  { colSpan: 2 }, {}, {},
  {}, { colSpan: 2 },
];

const grid = computeGrid(gridItems, 900, {
  columns:   3,
  rowHeight: 100,
  colGap:    16,
  rowGap:    16,
  padding:   24,
});
// → [{ x, y, w, h, col, row }, ...]

API

| Export | Description | |---|---| | computeFlex(items, w, h, opts) | Flex layout with wrap, grow, shrink, align-content | | computeGrid(items, w, opts) | Grid with fr units, spans, explicit placement | | resolveTree(root) | Nested flex+grid layout tree → absolute coords | | LayoutAnimator | Spring physics tweening between layout states | | generateDevTools(tree, opts) | SVG overlay for layout debugging | | solveConstraints(items, constraints) | Cassowary-style constraint solver | | Constraints | Fluent constraint builder (rightOf, below, alignTop…) | | SVGLayout | Namespace wrapping all of the above |

Features

• ✅ flex-wrap + align-content (multi-line flex)
• ✅ flex-grow / flex-shrink / flex-basis
• ✅ Grid fr units + colSpan / rowSpan
• ✅ Explicit grid placement (colStart / rowStart)
• ✅ Nested layout trees (flex inside grid inside flex…)
• ✅ Spring animation engine (stiffness / damping / mass)
• ✅ DevTools overlay (boxes, axes, gaps, labels)
• ✅ Constraint solver (drag propagation, required/strong/weak)
• ✅ Zero runtime dependencies
• ✅ Full TypeScript types

License

MIT