Murri
Murri Murri Murri

Muuri, a responsive, sortable, filterable and draggable grid layouts. Created and maintained by Niklas Rämö.

Muuri is an open source, MIT-licensed JavaScript library designed to create flexible and high-performance layouts.

Muuri is primarily a layout engine that handles complexity related to interactivity and performance. It is described as a combination of popular layout libraries like Packery, Masonry, Isotope, and Sortable.

Here are the main features and functionalities of Muuri:

Core Layout and Design

  • Infinite Layouts: Muuri provides a system that allows positioning grid items in "pretty much any way imaginable". A layout is essentially a function that takes dimensions and returns positions. Users can provide their own layout function to build any kind of layout they want.

  • Responsive Designs: The layouts created by Muuri are inherently responsive.

  • Flexibility: It can handle complex features like filtering, sorting, and drag & drop built right into its core, eliminating the need to search for additional libraries.

Interactivity and Data Manipulation

  • Drag & Drop: It features built-in support for sorting grid items by dragging and dropping.

    • Dragging works well on touch devices.

    • It supports dragging items between different grids.

    • It offers automatic scrolling during drag operations.

  • Filtering: Provides simple utility methods for performantly controlling the visibility of items. This is critical for avoiding performance issues (layout thrashing) when showing or hiding hundreds of DOM elements simultaneously.

  • Sorting: Items can be sorted directly via the API. Methods are available to sort all grid items, move an item within a grid, and send an item to another grid.

Performance and Technical Specifications

  • Speedy Performance: Muuri is designed to be fast in every aspect.

    • DOM operations are batched and queued to minimize layout thrashing.

    • All animations utilize the Web Animations API and run outside the main thread.

    • Web workers are utilized where needed.

  • API and Control: It features an extensive and straightforward API with enough options, methods, events, and "escape hatches" to gain full control over the library's behavior. Key design goals include providing smart defaults that are easily overridden.

  • Browser Support: Works in all modern browsers and IE9+. All necessary utilized Web APIs and language features (except Web Animations API) are automatically "ponyfilled" down to IE9.

  • Licensing: Muuri is free and open source under the MIT license, making it available for use in commercial projects.