I have nothing against JS!
I have long-sought to reduce our reliance on JS. Not because I hate JS or anything, in fact I love it! Probably the most flexible computer programming language ever created, and with each passing year it becomes more and more powerful!
But as I like to say, JS has better things to do than manage your accordions and nav menus…
If we can reduce the amount of JS that we use in our sites by allowing HTML and CSS to flex their new muscles, then we as developers have less to build and maintain, our build processes have less to process (if anything at all!), our users have less to download, and their browsers have less to process and maintain in memory. It is a win for everyone involved!
And the only challenge is us learning new ways of doing things… But we’re web developers, it’s kind of what we live for!
The Beginning
Back in May 2023, I wrote a post called Replace JS with no-JS (or lo-JS) Options.
The idea then was to find web patterns that had always required JS, usually by necessity, but could now be handled with just HTML and CSS, often with no JS at all. The examples were sort of half-baked, but so was my clarity, as this idea was still sort of forming in my head…
So, the above idea percolated for a bit, and started to develop more fully in my head towards the end of 2025. The initial result was three opportunities for me to rant about this thing I was now referring to as NoLoJS:
- First, I had the pleasure of appearing on the PerformanceObserver meetup,
- then I had the honor of being included on both the Web Performance Calendar,
- and the HTMHell Advent Calendar!
Whew!
A Design Library, of sorts
And during that time, I had the spark of an idea to create a more robust collection of NoLoJS patterns than just those that I was hammering about in the above presentations and articles.
I had a vision of a place where developers that wanted to use a reduced-JS version of some well-know pattern could find a starter component to plunk into their project and build upon. It would not be a framework, just individual, unrelated components.
This vision slowly evolved into a design library of sorts, and is now publicly available as an open-source GitHub repo:
https://github.com/aarontgrogg/NoLoJS
The Future
This is not a “completed collection” by any means, nor will it likely ever be! The intent (hope) is that this will be an ever-growing body, including contributions from our community, via Issues and Pull Requests. I would love to see new patterns added, variants on existing patterns added, and so one.
One very clear area of need is JS polyfills, so that patterns that are not yet 100% supported in all browsers can be used right now, by filling gaps until those gaps no longer exist, with only the JS they need to do so (so, LoJS).
For example, we can create many variations of a carousel using only HTML and CSS, with no JS at all, including smooth swiping, arrow navigation, and synchronized dot indicators/navigation, by using scroll-behavior, scroll-snap, scroll-buttons, and scroll-target-group. But only for some browsers…
To use this component in the wild, a sprinkle of JS is required to provide any missing functionality in some browsers. Using feature detection, polyfills can be added, only as needed, keeping things nice and light for supported browsers, and downloading only the JS that is necessary to add features and functionalities that are missing in some browsers.
Another idea, suggested by a reviewer, was a more visual documentation, beyond just the GitHub repo and the CodePens peppered throughout. Still looking for a good option for that, recommendations welcome!
Thoughts?
And so dear web community, I welcome input, insight, comments, clarity, whatever you got. Time is always valuable, but whatever you can share, could really help our community, and the web in general, move forward and make the web a better place for our users.
Happy reducing,
Atg