Reference

Architecture

Four packages sharing one engine: @macrulez/masonry-kit-core does the actual work with zero framework dependency — a single createMasonryEngine(container, options) factory that measures items via getBoundingClientRect() behind a ResizeObserver-driven, requestAnimationFrame-batched watcher, packs them with a skyline-packing algorithm generalized to bento spans, and positions each one with transform: translate(). @macrulez/masonry-kit-vue and @macrulez/masonry-kit-react are both thin adapters: a <MasonryGrid> component/function pair rendering one wrapper per item, plus a useMasonry composable/hook for owning the elements yourself. Both re-export the full core surface, so installing either alone is enough — no separate core install needed. @macrulez/masonry-kit-nuxt adds nothing beyond auto-imports and a universal (server + client) plugin that seeds the Vue package's shared option defaults from nuxt.config.ts.

SSR compatibility

The engine itself is only ever created client-side (onMounted/useLayoutEffect, guarded against a missing window) — every adapter renders a CSS columns approximation before that, both during SSR and for the one client frame before the first real measurement, then swaps to the exact transform-based layout in the same frame it measures. See SSR Rendering for the full mechanics. No <ClientOnly> wrapper is needed anywhere, including with the Nuxt module.

Accessibility

The packed layout itself is purely visual — item content (rendered through the #item slot/children render prop) keeps whatever accessibility semantics you already gave it, unaffected by the engine's positioning. sortable is the one part of the package with its own accessibility surface: every reorderable item exposes role="button", aria-roledescription, and aria-pressed, and every pickup/move/drop/cancel is announced through a visually-hidden live region — see MasonryGrid Component.

Bundle size & peer dependencies

@macrulez/masonry-kit-core has no peer dependencies at all — usable standalone in any environment. @macrulez/masonry-kit-vue depends on @macrulez/masonry-kit-core (workspace:*) and peers on vue: ^3.3.0. @macrulez/masonry-kit-react depends on @macrulez/masonry-kit-core and peers on react: ^18.0.0 || ^19.0.0. @macrulez/masonry-kit-nuxt depends on @macrulez/masonry-kit-vue and @nuxt/kit, and peers on nuxt: ^3.9.0 || ^4.0.0. All four ship sideEffects: false.

Development

A pnpm workspace (packages/core, packages/vue, packages/react, packages/nuxt, plus a Vue playground).

pnpm install
pnpm build       # builds every package
pnpm test        # runs every package's tests
pnpm typecheck   # build + typecheck across every package
pnpm dev         # runs the Vue playground
pnpm lint        # eslint across the whole monorepo
pnpm format      # prettier --write across the whole monorepo

License

MIT.