What HTTP Headers Does htmx Send on Requests? A Complete Technical Reference

htmx attaches a standardized set of HX-* HTTP headers to every AJAX request, including HX-Request, HX-Trigger, HX-Target, and HX-Current-URL, enabling servers to identify the request origin, triggering element, and current page state.

When building dynamic web applications with the bigskysoftware/htmx library, understanding what HTTP headers htmx sends on requests is essential for server-side processing. These custom headers provide critical context about the element that triggered the request, the target element for the response, and the current page URL, allowing backends to return partial HTML updates rather than full page renders.

Core Headers Sent with Every Request

In src/htmx.js, the getHeaders function (approximately lines 3699–3712) constructs the default header set attached to every AJAX request. These headers allow your server to distinguish between standard page loads and htmx-driven partial updates.

Header	Source Value	Purpose
HX-Request	true	Identifies the request as originating from htmx, signaling the server to return partial content instead of a full HTML document.
HX-Trigger	Trigger element's id attribute (or empty string)	Identifies the specific DOM element that initiated the request by its ID.
HX-Trigger-Name	Trigger element's name attribute (or empty string)	Provides the name attribute of the triggering element, particularly useful for form handling.
HX-Target	Target element's id attribute (or empty string)	Specifies the ID of the element that will receive the response content (the swap target).
HX-Current-URL	location.href	Contains the full URL of the page making the request, allowing the server to understand the current view state.

HX-Request: The Identification Flag

The HX-Request header is the primary identifier for htmx AJAX calls. When your server detects this header set to true, it knows to return only the HTML fragment needed for the update rather than a complete page with <html> and <body> tags.

HX-Trigger and HX-Trigger-Name: Element Context

The HX-Trigger header contains the id of the element that caused the request, while HX-Trigger-Name captures the name attribute. This distinction matters when handling forms where multiple buttons might submit to the same endpoint but require different logic based on which button was clicked.

HX-Target: Response Destination

The HX-Target header reveals where htmx expects to insert the returned HTML. Your server can use this information to optimize responses for specific container elements or to return different content based on which part of the page is being updated.

HX-Current-URL: State Reference

The HX-Current-URL header provides the current browser location, essential when your application uses URL parameters or routes that affect the content being requested. This enables the server to maintain context even during partial page updates.

Conditional Headers for Special Interactions

Beyond the core set, htmx includes additional headers only when specific attributes or behaviors are active.

HX-Prompt: User Confirmation

When an element includes the hx-prompt attribute, htmx displays a confirmation dialog before issuing the request. If the user confirms, the HX-Prompt header transmits the prompt text to the server.

<button hx-get="/delete" hx-prompt="Are you sure?" hx-target="#status">
  Delete Item
</button>

When confirmed, the request includes:

HX-Prompt: Are you sure?

HX-Boosted: Progressive Enhancement Links

The HX-Boosted header appears when a request originates from an element with hx-boost="true". This attribute converts standard anchor tags into AJAX requests while maintaining progressive enhancement, and the header allows the server to differentiate boosted navigation from standard htmx requests.

<a href="/next-page" hx-boost="true">Next Page</a>

This generates:

HX-Boosted: true

History Restore Request Headers

When htmx restores a page state via a server request (in the loadHistoryFromServer function, lines 3315–3318), it sends specific headers to indicate this is a history restoration rather than a user-initiated action.

Header	Value	Purpose
HX-History-Restore-Request	true	Explicitly marks the request as a history restoration fetch, allowing the server to return cached or historical state data.
HX-Request	true (if historyRestoreAsHxRequest enabled)	Conditionally sent based on configuration to maintain consistency with standard htmx requests.
HX-Current-URL	location.href	Indicates the URL being restored from history.

These headers enable servers to handle history restoration differently from fresh requests, potentially serving cached content or skipping analytics logging.

Adding Custom Headers with hx-headers

Developers can extend htmx's header set using the hx-headers attribute. In src/htmx.js at line 3405, custom headers defined via this attribute are merged into the request headers object constructed by getHeaders.

<button hx-get="/api/data" 
        hx-headers='{"X-Custom-Auth": "token123", "X-Request-Type": "ajax"}'>
  Load Data
</button>

This merges the custom headers with the standard HX-* set, allowing seamless integration with existing API authentication or versioning schemes.

Complete Request Header Examples

Standard Button Click

Consider this markup:

<button id="save-btn" name="save-action" hx-post="/save" hx-target="#result">
  Save Changes
</button>

When clicked, htmx generates a POST request with these headers:

HX-Request: true
HX-Trigger: save-btn
HX-Trigger-Name: save-action
HX-Target: result
HX-Current-URL: https://example.com/dashboard

Boosted Navigation

For a progressively enhanced link:

<a href="/profile" hx-boost="true" id="profile-link">View Profile</a>

The resulting request includes:

HX-Request: true
HX-Trigger: profile-link
HX-Trigger-Name: 
HX-Target: 
HX-Current-URL: https://example.com/dashboard
HX-Boosted: true

History Restoration

When the browser back button triggers a server fetch to restore state:

HX-History-Restore-Request: true
HX-Current-URL: https://example.com/previous-page

Summary

• Standard Identification: Every htmx request sends HX-Request: true, along with HX-Trigger, HX-Trigger-Name, HX-Target, and HX-Current-URL to provide complete context about the request origin and destination.
• Conditional Flags: Special behaviors add HX-Prompt for confirmation dialogs and HX-Boosted for progressively enhanced links.
• History Handling: Server-side history restoration requests include HX-History-Restore-Request to distinguish them from user actions.
• Source Location: Header construction occurs in src/htmx.js within the getHeaders function (lines ~3699–3712), with history-specific additions in loadHistoryFromServer (lines 3315–3318).
• Extensibility: Custom headers integrate via hx-headers and merge at line 3405 in the source.

Frequently Asked Questions

How can I check if a request came from htmx on the server side?

Look for the HX-Request header set to true. According to the htmx source code in src/htmx.js, this header is unconditionally added to every AJAX request initiated by the library, making it the reliable signal for partial content generation versus full page renders.

What is the difference between HX-Trigger and HX-Trigger-Name?

HX-Trigger contains the id attribute of the element that initiated the request, while HX-Trigger-Name contains the name attribute. The id uniquely identifies the specific element in the DOM, whereas the name is useful for form elements where you need to know which named control triggered a submission, especially when multiple buttons share the same form.

Does htmx send different headers for history restoration?

Yes. When htmx fetches content to restore browser history (handled in the loadHistoryFromServer function), it includes HX-History-Restore-Request: true. It may also include HX-Request: true depending on the historyRestoreAsHxRequest configuration setting, allowing servers to serve cached or historical responses rather than fresh data.

Can I add custom headers to htmx requests?

Absolutely. Use the hx-headers attribute to specify JSON-formatted custom headers. These are merged with the standard headers at line 3405 in src/htmx.js, ensuring your custom authentication tokens, API versioning, or tracking identifiers accompany every request alongside the built-in HX-* headers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}