October 23, 2025

Isotope in just 60 lines

I saw the original Isotope Javascript fancyness and I just had to write a rebuild using modern web standards. Check out my rebuild!

My version of Isotope uses a grid layout and animates using view transition. It is silky smooth, blazing fast and has graceful degredation. The code consists of only 63 lines of vanilla JS, while the old version required an astonishing 3500+ lines. If you choose to leave the sorting out, you can even reduce the code to 37 lines. Yup… the web has come a long way.

How to use it?

Just set id=“isotope” on any container and give its children classes that represent categories, like class=“metal”. Then create some buttons with data attributes, like data-filter=".metal" or data-sortby=“symbol”. Load the JS from the demo in the footer and it works. You don’t need ANY of the CSS. That is all just fancy stuff.

Caveats

Note that this version only supports basic filtering and sorting (which are the only things I ever used from the original code). Also note that the animation might not show in older browsers. Finally, be aware that you can not use this Isotope filter twice on the same page, as it lacks abstraction for that.

License

The original Isotope code was licensed GPLv3 and was not free for commercial use. However, this new code is so basic, you can’t license it. You would license modern web standards, which is crazy. So, if anything, this should be WTFPL.

Enjoy the code!

()  Joost van der Schee