muuri

Muuri is a JavaScript library that helps web developers build grid-based page layouts where items can be moved, sorted, filtered, and animated. Think of it as the engine behind a photo gallery or dashboard where you can drag tiles around, hide certain cards with a filter button, and have everything snap into place smoothly.

The core idea is that CSS alone is sometimes not enough for layouts that need to respond to user actions. Muuri sits on top of your existing HTML and handles the math for positioning, the animations for showing or hiding items, and the drag-and-drop mechanics. It can run its layout calculations in a background thread (called a web worker) so the page stays responsive even when there are many items to arrange.

Some of the things Muuri supports out of the box: dragging items between separate grids on the same page, auto-scrolling the page while a user drags near the edges, nesting one grid inside another, and filtering or sorting the visible items without reloading. The layout itself is fully configurable, so developers can create masonry-style columns, fixed-size tile grids, or more unusual arrangements.

To use Muuri you install it via npm or include a script tag, add some basic HTML markup with a container and item elements, apply a small amount of CSS to position them correctly, then initialize it with one line of JavaScript pointing at your container. From there you call methods on the grid object to add items, trigger a filter, sort by a value, or enable drag-and-drop.

Muuri is aimed at developers building interactive web pages or applications. It does not include a design system or visual styles, just the layout and interaction logic. The README is longer than what was shown.