patrickkunka/mixitup

★ 4,547JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((MixItUp))
    What it does
      Animated filtering
      Animated sorting
      Add and remove items
    How it works
      HTML data attributes
      No dependencies
      Works with any CSS layout
    Features
      Category filtering
      Multi-sort criteria
      Pagination extension
    Best for
      Portfolio grids
      Product catalogs
      Image galleries

mindmap root((MixItUp)) What it does Animated filtering Animated sorting Add and remove items How it works HTML data attributes No dependencies Works with any CSS layout Features Category filtering Multi-sort criteria Pagination extension Best for Portfolio grids Product catalogs Image galleries

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add animated category filtering to a portfolio or product grid so visitors can click to show only matching items

USE CASE 2

Let visitors sort a card grid by date, name, or custom criteria with smooth transitions using HTML data attributes

USE CASE 3

Build a filterable image gallery or project showcase without needing React, jQuery, or any other framework

USE CASE 4

Add pagination to a long filtered list using the free MixItUp pagination extension

Tech stack

JavaScriptCSSHTML

Getting it running

Difficulty · easy Time to first run · 5min

Project is archived, stable and runs on thousands of sites but no new features are being added, works with a single script tag and no dependencies.

Free for any use, personal or commercial, under the Apache 2.0 license, no purchase or registration required.

In plain English

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.

Copy-paste prompts

Prompt 1

I have an HTML grid of project cards and want to add animated filtering by category. Show me how to set up MixItUp with a single script tag, the HTML data attributes I need on each card, and the filter button markup.

Prompt 2

How do I make MixItUp sort my product cards by price using a data attribute? Show me the HTML attribute setup and the JavaScript sort call.

Prompt 3

I want to combine two filter groups in MixItUp so visitors can filter by both category and color at the same time. How do I set that up?

Prompt 4

I need to trigger a MixItUp filter from my own JavaScript code rather than a button click. What API method do I call and what does the syntax look like?

Prompt 5

My MixItUp grid uses CSS flexbox. Are there any layout settings I need to change so the animations work correctly with a flexbox container?

Open on GitHub → Explain another repo

← patrickkunka on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.