htmx hx-get Guide: Load Fragments Without Reload

Learn how to add a button that fetches a server‑rendered snippet and swaps it into the page without a full reload, using htmx’s hx-get attribute.

Problem: Full‑page reload on simple UI actions

When a button or link triggers a small update, the browser often reloads the whole page, wasting bandwidth and causing a noticeable flash.

Desired outcome

Clicking the button loads an HTML fragment from the server and replaces a target element’s content, all without a full page reload, while keeping the ability to fall back to a normal navigation if JavaScript is disabled.

Prerequisites

A web page where you can edit the HTML.
Access to an endpoint that returns only the HTML fragment you want to insert (no surrounding <html> or <body> tags).
Ability to add a script tag to the page (typically requires edit access to the template or static file).

Procedure

Add the htmx library. Place this snippet in the <head> or just before the closing </body> tag:

<script src='https://unpkg.com/htmx.org@1.9.12' integrity='sha384-...' crossorigin='anonymous'></script>

Choose a button or link that will initiate the request. Add the following attributes:
- hx-get='/path/to/fragment' – URL returning the HTML snippet.
- hx-target='#target-id' – CSS selector of the element whose content will be replaced.
- hx-swap='innerHTML' – how the response is inserted (default, but explicit).
- Optional: hx-push-url='true' to update the browser URL for back‑button support.
Example markup:
```
<button hx-get='/comments'
        hx-target='#comments-list'
        hx-swap='innerHTML'
        hx-push-url='true'>
  Load more comments
</button>
<div id='comments-list'></div>
```
Verify the server endpoint returns a fragment, for instance:
```
<li>User A: Nice post!</li>
<li>User B: Thanks!</li>
```

Expected checks

Open the page in a browser, open Developer Tools → Network tab.
Click the button. Confirm a GET request to the endpoint with status 200 and a response containing only HTML.
After the request, inspect the DOM: the element with id #comments-list should now contain the returned <li> elements, and no other part of the page should have changed.
If hx-push-url is set, the URL in the address bar should reflect the endpoint; pressing the browser back button should revert the content.
Disable JavaScript (or block the htmx request) and click the button again; the browser should navigate to /comments as a normal GET, rendering a full page – this demonstrates graceful degradation.

Limitations

The endpoint must return a pure HTML fragment; returning a full document will create nested <html> tags and break layout.
htmx is intended for progressive enhancement; complex client‑side state is better handled with a dedicated framework.
Only GET requests are shown here; other verbs (hx-post, hx-put) follow the same pattern.

Rollback

To revert the change:

Remove the script tag that loads htmx.
Delete the hx-get, hx-target, hx-swap, and (if used) hx-push-url attributes from the button/link.
Optionally restore the original navigation behavior (e.g., turn the button into a regular link).

Load HTML Fragments with htmx hx-get