Live demo — this example is server-driven; run the showcase locally for the interactive version.

Click to load

HTMX-powered "Load more" pattern — click the button to fetch the next batch from the server. The manual counterpart to infinite scroll, and its keyboard-friendly fallback.

Examples

Manual pagination

Click the button to load more items from /api/htmx/load-more. Each response appends the next rows and replaces the button with one pointing at the following page.

Documentation

Click-to-load props

Parameters accepted by {#include components/htmx/click-to-load id="..." loadUrl="..." /}.

Name Type Default Description
id String — (required) Used for the hx-target self-reference and the {id}-indicator spinner id.
loadUrl String (URL) — (required) Endpoint fetched on click. The response must contain the new rows followed by a fresh click-to-load button pointing at the next page, or no button once the list is exhausted.
buttonText String Load more Label of the load button.

Usage

The server owns the paging. Exactly like infinite scroll, each response carries the next button with the incremented page baked into its loadUrl — the client keeps no page counter. End the chain by omitting the button from the final batch.