# haltu/muuri

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/haltu-muuri).**

10,954 stars · 650 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/haltu/muuri
- Homepage: https://muuri.dev
- awesome-repositories: https://awesome-repositories.com/repository/haltu-muuri.md

## Topics

`bin-packing` `dnd` `drag-and-drop` `draggable` `filter` `grid` `layout` `muuri` `sort`

## Description

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures.

The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements. 

The system provides interactive capabilities for moving items between multiple containers, filtering visibility based on specific criteria, and reordering elements via custom comparator functions. Layouts are managed using a bin-packing algorithm to minimize gaps and utilize CSS transforms for high-performance animations during transitions.

## Tags

### User Interface & Experience

- [Draggable Layout Elements](https://awesome-repositories.com/f/user-interface-experience/interactive-widgets/draggable-layout-elements.md) — Provides a framework for creating UI components that can be manually repositioned within a grid via drag-and-drop.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Provides a responsive grid layout system that automatically adapts item positions to varying screen sizes and container dimensions. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Cascading Grid Libraries](https://awesome-repositories.com/f/user-interface-experience/cascading-grid-libraries.md) — A JavaScript library specifically designed to create responsive, gapless grids with varying item heights.
- [CSS Transform Animations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations.md) — Uses CSS translate transforms to achieve high-performance animations during grid layout shifts.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a library for implementing drag-and-drop interactions to detect gestures and trigger grid reordering.
- [Drag and Drop Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions.md) — Implements logic and constraints for manually reordering elements or moving them between containers via drag-and-drop.
- [Nested Grid Structures](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/nested-grid-structures.md) — Supports embedding full grid instances within other grid cells to create hierarchical layout structures.
- [Layout Animation Engines](https://awesome-repositories.com/f/user-interface-experience/layout-animation-engines.md) — Implements a layout-aware animation engine that smoothly transitions elements between different positions and visibility states. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Pointer Event Handlers](https://awesome-repositories.com/f/user-interface-experience/pointer-event-handlers.md) — Manages raw pointer, touch, and mouse events to track movement and trigger grid reordering.
- [Multi-Container Drag and Drop](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/multi-container-drag-and-drop.md) — Allows moving items between separate grids with reordering capabilities across multiple containers.
- [Dynamic Layout Filtering](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-filtering.md) — Provides layouts that can show or hide items based on specific criteria with smooth animated transitions.
- [Cross-Container Transfers](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/grid-item-swapping/cross-container-transfers.md) — Enables moving elements across different grids with integrated auto-scrolling during the transfer process. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Interactive Element Sorting](https://awesome-repositories.com/f/user-interface-experience/interactive-element-sorting.md) — Allows user-driven reordering of grid elements via direct manipulation to define a specific sequence. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Custom Sort Comparators](https://awesome-repositories.com/f/user-interface-experience/interactive-element-sorting/custom-sort-comparators.md) — Provides the ability to define custom comparison functions for sorting grid items.
- [Filtered Grid Reordering](https://awesome-repositories.com/f/user-interface-experience/multi-item-drag-operations/swap-based-reordering/grid-based-reordering/filtered-grid-reordering.md) — Hides or reorders items based on specific criteria and animates the transition to the new layout. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles.md) — Implements mechanisms for toggling the visibility of grid components while preserving their layout state.

### DevOps & Infrastructure

- [Grid Packing Algorithms](https://awesome-repositories.com/f/devops-infrastructure/scheduling/bin-packing-schedulers/grid-packing-algorithms.md) — Implements algorithms for automatically arranging and compacting grid items to fill empty space and minimize gaps.

### Mobile Development

- [Asynchronous Layout Calculation](https://awesome-repositories.com/f/mobile-development/asynchronous-layout-calculation.md) — Performs complex layout calculations on background threads to ensure smooth animations and no main-thread freezing. ([source](https://cdn.jsdelivr.net/gh/haltu/muuri@master/README.md))
- [Web Worker Layout Computation](https://awesome-repositories.com/f/mobile-development/asynchronous-layout-calculation/web-worker-layout-computation.md) — Offloads heavy coordinate calculations to background web workers to maintain a responsive user interface.

### Web Development

- [Background Layout Engines](https://awesome-repositories.com/f/web-development/background-layout-engines.md) — Uses a background-threaded engine to calculate grid coordinates, ensuring the main interface remains responsive.
- [Main Thread Offloading](https://awesome-repositories.com/f/web-development/main-thread-offloading.md) — Offloads heavy grid coordinate calculations to background web workers to maintain interface responsiveness.
- [Off-Main-Thread Layouts](https://awesome-repositories.com/f/web-development/high-performance/off-main-thread-layouts.md) — Maintains interface responsiveness during large rearrangements by managing complex grid calculations off the main thread.

### Programming Languages & Runtimes

- [UI Element Sorting](https://awesome-repositories.com/f/programming-languages-runtimes/custom-sorting-logic/ui-element-sorting.md) — Implements ordering logic for visual DOM elements using custom comparison functions.

### Software Engineering & Architecture

- [CSS Class-Based Visibility Toggling](https://awesome-repositories.com/f/software-engineering-architecture/syntax-query-definitions/selector-based-visibility-filtering/css-class-based-visibility-toggling.md) — Provides a system to toggle item visibility using CSS classes combined with smooth animated transitions.