mixitup

MixItUp is a JavaScript library that adds animated filtering and sorting to lists of items on a web page. If you have a grid of products, a portfolio of projects, or any collection of cards, MixItUp lets visitors click buttons to show only certain categories, reorder items by different criteria, or add and remove items, all with smooth animations rather than an abrupt page reload or a jarring jump.

The library works without any other dependencies, meaning you do not need to install React, jQuery, or any other framework to use it. You add it to your page with a single script tag, attach it to an existing HTML container, and define filter and sort buttons using plain HTML data attributes. MixItUp reads those attributes and handles the animation automatically, working with whatever CSS layout you already have, including flexbox and percentage-based responsive grids.

Filtering works by showing or hiding items that match a category you specify. Sorting works by reading custom data attributes you place on each item, such as a date, a name, or a numeric order. You can combine filters, apply multiple sort criteria, and trigger these changes either through button clicks or through a JavaScript API if you need to control things programmatically from your own code.

Extensions for pagination (splitting long lists into pages) and multi-dimensional filtering (combining several independent filter groups at once) were previously sold commercially but are now free and open source as well. The project as a whole is archived, meaning the author is not adding new features, but the code is stable and has been running on tens of thousands of websites for several years.

As of November 2024, MixItUp is fully open source under the Apache 2.0 license, free for both personal and commercial use with no purchase or registration required.