HTMX hx-get Attribute

The hx-get attribute is the most commonly used attribute in HTMX. It tells an element to send a GET request to a specific URL when triggered. The server responds with an HTML fragment, and HTMX places that fragment into the page. Understanding hx-get deeply gives you a strong foundation for every other HTMX attribute.

What GET Means

A GET request means "give me some data." It does not change anything on the server. You use GET to read, fetch, or load content. Clicking a link in a browser sends a GET request. HTMX's hx-get does the same thing — but instead of reloading the whole page, it places only the server's response into a target element.

Basic Syntax

<button hx-get="/url-to-fetch">Load Content</button>

The value of hx-get is the URL HTMX sends the request to. It can be a relative path like /articles, an absolute path like https://api.example.com/data, or a dynamic path like /user/42/posts.

Any Element Can Use hx-get

HTML links and forms are the only native elements that make HTTP requests. HTMX breaks that limit. You can put hx-get on any HTML element:

<!-- On a button -->
<button hx-get="/news">Load News</button>

<!-- On a div -->
<div hx-get="/sidebar" hx-trigger="click">Click to load sidebar</div>

<!-- On a select dropdown -->
<select hx-get="/filter" hx-trigger="change">
  <option value="all">All</option>
  <option value="new">New</option>
</select>

<!-- On an image -->
<img src="/placeholder.png" hx-get="/real-image-info" hx-trigger="load">

How hx-get Works With hx-target

By default, HTMX puts the response HTML inside the element that has hx-get. To place the response elsewhere, use hx-target:

<button hx-get="/weather" hx-target="#weather-box">
  Show Weather
</button>

<div id="weather-box">
  Weather will appear here.
</div>

  Diagram:

  [ Show Weather button ]
          |
          | hx-get sends GET /weather
          v
      SERVER
          |
          | Returns: <p>Sunny, 28°C</p>
          v
  HTMX finds #weather-box
          |
          v
  [ #weather-box now shows: Sunny, 28°C ]

Passing Query Parameters

You can include query parameters directly in the URL value:

<button hx-get="/search?category=books&page=1">
  Search Books
</button>

You can also let HTMX build the query string from nearby form inputs. When a button sits inside a form, HTMX automatically includes the form's input values as query parameters in a GET request.

<form>
  <input type="text" name="q" placeholder="Search...">
  <button hx-get="/search" hx-target="#results">Search</button>
</form>

<div id="results"></div>

If the user types "laptops" in the input and clicks Search, HTMX sends GET /search?q=laptops automatically.

Default Trigger for Different Elements

HTMX picks a sensible default trigger for each element type, so you often do not need to add hx-trigger explicitly:

Real Example: Tab Navigation

A tab bar is a great use case for hx-get. Each tab button fetches its own content from the server:

<nav>
  <button hx-get="/tab/overview"   hx-target="#tab-content">Overview</button>
  <button hx-get="/tab/reviews"    hx-target="#tab-content">Reviews</button>
  <button hx-get="/tab/specs"      hx-target="#tab-content">Specs</button>
</nav>

<div id="tab-content">
  <p>Click a tab to load content.</p>
</div>

  Diagram:

  [ Overview ] [ Reviews ] [ Specs ]
       |
       | Click "Reviews"
       v
  GET /tab/reviews  ----->  Server returns reviews HTML
       |
       v
  #tab-content shows the reviews

The server returns a different HTML fragment for each tab route. The rest of the page stays untouched.

hx-get on Page Load

You can trigger a GET request automatically when the page loads using hx-trigger="load":

<div hx-get="/dashboard-stats" hx-trigger="load" hx-target="this">
  Loading stats...
</div>

When the browser renders this div, HTMX immediately fires the GET request and replaces the "Loading stats..." text with whatever the server sends back. This pattern is called lazy loading and is covered in depth in a later topic.

What the Server Must Return

The server must return valid HTML. It does not need to return a full page — just a fragment. Returning JSON will not work with hx-get unless you process the JSON through a custom event handler. For standard HTMX use, always return HTML from your server routes.

Key Takeaway

The hx-get attribute turns any HTML element into a trigger for a GET request. Point it at a URL, pair it with hx-target to pick the destination, and your server does the rest. No JavaScript needed. It works on buttons, divs, selects, and links — and it fires automatically on page load when combined with hx-trigger="load".