Earlier this year, I started a side project called Papernote. It is a simple note-taking application that runs in the browser. Like most of my side projects, the actual product was more of a side quest—I just wanted an excuse to learn something new. Since this was a web app, I had to decide on a front-end framework. I had used React and Vue in past projects, so those were out. I had been hearing a lot about a JavaScript library called HTMX, so, having no idea what I was getting myself into, I decided to give it a shot.

The source code for this demo is available here. Instructions for setting up the project are in the README.

Context

I am working on a project at my day job where we are building a documentation site for a very large and complex software system. We have over 20,000 technical documents outlining how the software works. Our customer needs a way to search, browse, and update these documents efficiently. Our current proposed solution uses a Python/FastAPI web server, MongoDB to store the document data, and HTMX to handle frontend updates. (I am not able to make my work repo publicly available, so I have pulled out only the essential logic portions for this demo.) The purpose of this article is to show how we have implemented the “infinite scroll” functionality for the document search results page with our chosen tooling. The ideas, however, should be easily adaptable to other languages (as long you’re using HTMX.) Familiarity with HTMX is recommended before reading this article.

Humble Beginnings

My homelab journey started around 3 years ago while I was an undergrad studying computer science. I had gotten fed up with paying Google every month just to store my photos and files. I wanted a solution to store all my photos and files locally. As a student, I had no money at the time, so I purchased a Raspberry Pi. Following an excellent guide by Jay LaCroix from on Learn Linux TV, I soon had my very own personal cloud. I used Google’s takeout feature to exfiltrate all my digial assets. After importing all my data to Nextcloud, I had accomplished the original goal: get my data under my own roof.