Using HTMX to Build “Load More” Pagination in Drupal 11

A tutorial by Philip Norton, published on Hashbangcode, demonstrates how HTMX can be used in Drupal 11 to implement a “load more” pagination pattern using a single controller. 

The approach relies on a controller that handles both standard page requests and HTMX-triggered requests, using Drupal’s HtmxRequestInfoTrait to detect request type. Pagination is managed through a PagerSelectExtender query, which retrieves content in batches while tracking total items and offsets. Nodes are rendered in teaser view mode, and cache tags and contexts are applied to ensure efficient updates as content changes.

On the frontend, an HTMX-enabled link acts as a “load more” trigger. Each interaction sends a request back to the same controller with an incremented page parameter, returning additional content along with a refreshed trigger element. Using attributes such as hx-get, swap, and trigger, the response replaces the link via outerHTML, allowing new items to be appended without a full page reload. 

The tutorial presents this pattern as a lightweight, server-driven alternative to traditional pagination or heavier JavaScript implementations. By combining Drupal’s rendering and caching systems with HTMX request handling, it enables incremental content loading while preserving backend control over data and presentation.