htmx-tags

"/home/yossef/notes/full-stack/htmx/htmx-tags.md"

path: full-stack/htmx/htmx-tags.md

- **fileName**: htmx-tags
- **Created on**: 2025-02-23 23:14:11

HTMX Attributes Table

HTMX provides various attributes to enhance HTML with AJAX, WebSockets, and Server-Sent Events (SSE). Below is a structured table explaining these attributes and their functionalities.

Attribute	Description
`hx-get`	Performs an AJAX `GET` request to the specified URL and replaces the targeted element with the response.
`hx-post`	Sends an AJAX `POST` request to the specified URL. Often used for form submissions.
`hx-put`	Sends an AJAX `PUT` request to update resources.
`hx-delete`	Sends an AJAX `DELETE` request to remove resources.
`hx-patch`	Sends an AJAX `PATCH` request to apply partial updates to resources.
`hx-target`	Specifies which element should be updated with the server's response. Can use CSS selectors or keywords like `this`, `closest`, etc.
`hx-trigger`	Defines the event that should trigger the request, such as `click`, `load`, `mouseenter`, etc.
`hx-select`	Filters the server response, applying changes only to the selected elements. Uses CSS selectors.
`hx-select-oob`	Similar to `hx-select` but applies out-of-band updates, replacing elements outside of the target.
`hx-headers`	Specifies custom headers to be sent with the request. Useful for authentication and content negotiation.
`hx-indicator`	Defines an element (like a spinner) that should be displayed while a request is in progress.
`hx-swap`	Controls how the response is swapped into the target element. Options include `innerHTML`, `outerHTML`, `beforebegin`, `afterend`, etc.
`hx-push-url`	Updates the browser's URL and history state when a request is made. Enables navigation without a full page reload.
`hx-replace-url`	Replaces the browser's URL without adding a new history entry.
`hx-boost`	Enhances standard links and forms to use AJAX instead of full-page reloads. Applied to `a` and `form` elements.
`hx-confirm`	Prompts the user with a confirmation dialog before sending a request.
`hx-disable`	Disables HTMX processing for the element. Useful for conditional activation.
`hx-ext`	Loads HTMX extensions, allowing additional functionalities.
`hx-params`	Controls which parameters are sent in a request. Can exclude certain inputs from form submissions.
`hx-preserve`	Prevents an element from being replaced by an AJAX response. Useful for maintaining form state.
`hx-sync`	Defines synchronization behavior for multiple requests. Prevents duplicate submissions and enforces ordering.
`hx-on`	Attaches event listeners to handle custom client-side interactions with HTMX responses.
`hx-ws`	Enables WebSockets for bidirectional communication. Supports `connect`, `send`, and `receive` actions.

Notes

Most HTMX attributes map directly to common HTTP operations.
HTMX provides fine-grained control over how AJAX requests interact with the DOM.
You can combine multiple attributes on an element to create dynamic behaviors.

For more details, visit the official HTMX documentation: https://htmx.org/

continue:[[]]
before:[[]]