Views HTMX Load More

Views HTMX Load More adds a Views pager that shows a "Load more" link below the rows of a view. Clicking the link, or scrolling it into view, loads the next page and appends its rows below the current ones, without reloading the page.

It works like Views Infinite Scroll, but uses the HTMX integration in Drupal core instead of the Views Ajax API. That means no jQuery, no "Use AJAX" setting on the view, and a link that keeps working without JavaScript.

Features

• Load more or infinite scroll: load the next page on click, or automatically when the link scrolls into view.
• Built on core HTMX: no jQuery and no Views Ajax. The view is fetched at its own URL, and core HTMX loads new assets and attaches Drupal behaviors to the new rows.
• Progressive enhancement: the link is a normal rel="next" link to the next page, so visitors without JavaScript and search engines can still reach every item.
• Exposed filters keep working: the next-page URL keeps the exposed input and other query arguments, and filter forms submit normally.
• Button text tokens: @next_page_count, @remaining_items_count and @total, for example "Load @next_page_count more".
• Load all pages up to the requested one: optionally, opening ?page=3 directly shows pages 0 to 3, so shared and bookmarked links show the same list.
• Accessible: after a click, focus moves to the first new row. After an automatic load, Drupal.announce() announces the new items. The automatic link stays keyboard-focusable.
• Developer event: a views_htmx_load_more:new_content DOM event fires after new rows are inserted, with the rows in event.detail.rows.
• Page and block displays, the standard pager options (items per page, offset, pager ID, exposed options), and EVA displays.
• Themable: a Twig template with the usual Views suggestions. The module ships no CSS.

Post-Installation

1. Edit a view display and open the pager settings.
2. Choose Load more (HTMX).
3. Set the button text, and choose whether to load automatically on scroll and whether to load all pages up to the requested page.

"Use AJAX" is not needed. Turn it off if it was only on for a pager.

Additional Requirements

• Drupal 11.3 or later (core HTMX).
• Views (core).

No libraries or other contributed modules are needed.

Similar projects

• Views Infinite Scroll: the same features, built on the Views Ajax API and jQuery. The README explains how to migrate a view: change the pager type and rename one options key.
• Pager Load More: a "Load more" pager in plain JavaScript, without Ajax or HTMX.
• HTMX: its HTMX pager replaces the current page instead of appending to it.

Differences from Views Infinite Scroll

• The new-content event is a DOM CustomEvent fired after the rows are inserted, instead of a jQuery event fired before.
• Automatic loading starts when the link enters the viewport, not 200 pixels before.
• The same view display with the same pager ID cannot appear twice on one page.