metafizzy/isotope

★ 11,094HTMLAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Isotope))
    What it does
      Filter grid items
      Sort with animation
      No page reload
    Setup options
      Download script
      CDN link
      npm or Bower
    Usage styles
      Plain JavaScript
      jQuery plugin
      HTML data attribute
    Licensing
      Free for open source
      Paid for commercial use
    Audience
      Web developers
      Designers

mindmap root((Isotope)) What it does Filter grid items Sort with animation No page reload Setup options Download script CDN link npm or Bower Usage styles Plain JavaScript jQuery plugin HTML data attribute Licensing Free for open source Paid for commercial use Audience Web developers Designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a filterable portfolio grid to a website so visitors can sort projects by category with smooth animations.

USE CASE 2

Build a searchable product catalog that rearranges results when filters are applied without reloading the page.

USE CASE 3

Create an image gallery with animated sorting by date, size, or tag.

Tech stack

JavaScriptjQueryHTMLCSS

Getting it running

Difficulty · easy Time to first run · 30min

Commercial projects require purchasing a separate commercial license from the project website.

Free to use in open-source GPL-compatible projects, a paid commercial license is required for commercial websites, themes, or applications.

In plain English

Isotope is a JavaScript library that lets you filter and sort items on a webpage with animated, rearranging layouts. If you have a grid of cards, images, or tiles, Isotope can reorganize them smoothly when a visitor clicks a filter button, without reloading the page. The project was built by Metafizzy and ran from 2010 to 2020. Adding it to a project is straightforward. You can download the script file directly, link to it from a content delivery network, or install it through npm or Bower. Once loaded, you point Isotope at the container holding your items and it takes over the layout. Configuration options let you set column widths and choose how items are arranged. It works with jQuery if you already use that library, with plain JavaScript, or by adding a data attribute directly to your HTML element. The README shows brief code samples for all three approaches. The license has two tracks. If you are building an open source project under a GPL-compatible license, you can use Isotope for free. If you are building a commercial website, theme, or application, you need to purchase a commercial license from the project website. The README links to the purchase page and a fuller license explanation. Isotope is primarily for web developers who want to add interactive filtering and sorting to a page. It does not require a JavaScript framework beyond optional jQuery, and the README keeps its documentation brief, pointing to the project website for full demos and details.

Copy-paste prompts

Prompt 1

Using Isotope.js, help me build a filterable portfolio grid where clicking category buttons smoothly rearranges the cards. Show me the HTML structure and JavaScript setup.

Prompt 2

I have a grid of product cards and want to add filter buttons using Isotope. Walk me through the setup using plain JavaScript with no jQuery.

Prompt 3

Show me how to configure Isotope layout options so items in my grid align to a fixed column width and fill gaps automatically.

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.