whatisgithub

What is isotope?

metafizzy/isotope — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

A JavaScript library that lets you filter and sort a grid of cards or images on a webpage with smooth animated rearrangements, no page reload needed.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

JavaScriptjQueryHTMLCSS

How does it compare?

metafizzy/isotopejordanschuetz/learncs8-resumekeen/dashboards
Stars11,09411,13011,034
LanguageHTMLHTMLHTML
Setup difficultyeasyeasyeasy
Complexity2/51/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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.

Frequently asked questions

What is isotope?

A JavaScript library that lets you filter and sort a grid of cards or images on a webpage with smooth animated rearrangements, no page reload needed.

What language is isotope written in?

Mainly HTML. The stack also includes JavaScript, jQuery, HTML.

What license does isotope use?

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

How hard is isotope to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is isotope for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.