Skip to content

Commit 46badfe

Browse files
williamjacksnwilliamjacksn
authored
Add descriptions for attribute pages (#3158)
Descriptions for attribute pages
1 parent 6dbf554 commit 46badfe

35 files changed

+112
-8
lines changed

‎www/content/attributes/hx-boost.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-boost"
3+
description = """\
4+
The hx-boost attribute in htmx enables progressive enhancement by converting standard HTML anchors and forms into \
5+
AJAX requests, maintaining graceful fallback for users without JavaScript while providing modern dynamic page \
6+
updates for those with JavaScript enabled."""
37
+++
48

59
The `hx-boost` attribute allows you to "boost" normal anchors and form tags to use AJAX instead. This

‎www/content/attributes/hx-confirm.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-confirm"
3+
description = """\
4+
The hx-confirm attribute in htmx provides a way to add confirmation dialogs before executing requests, allowing \
5+
you to protect users from accidental destructive actions. This documentation explains how to implement confirmation \
6+
prompts and customize their behavior through event handling."""
37
+++
48

59
The `hx-confirm` attribute allows you to confirm an action before issuing a request. This can be useful

‎www/content/attributes/hx-delete.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-delete"
3+
description = """\
4+
The hx-delete attribute in htmx will cause an element to issue a DELETE request to the specified URL and swap the \
5+
returned HTML into the DOM using a swap strategy."""
36
+++
47

58
The `hx-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap

‎www/content/attributes/hx-disable.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "hx-disable"
3+
description = "The hx-disable attribute in htmx will disable htmx processing for a given element and all its children."
34
+++
45

56
The `hx-disable` attribute will disable htmx processing for a given element and all its children. This can be

‎www/content/attributes/hx-disabled-elt.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-disabled-elt"
3+
description = """\
4+
The hx-disabled-elt attribute in htmx allows you to specify elements that will have the `disabled` attribute added \
5+
to them for the duration of the request."""
36
+++
47

58
The `hx-disabled-elt` attribute allows you to specify elements that will have the `disabled` attribute
@@ -16,7 +19,7 @@ added to them for the duration of the request. The value of this attribute can b
1619
(e.g. `next button` will disable the closest following sibling `button` element)
1720
* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
1821
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
19-
(e.g `previous input` will disable the closest previous sibling `input` element)
22+
(e.g. `previous input` will disable the closest previous sibling `input` element)
2023

2124
Here is an example with a button that will disable itself during a request:
2225

‎www/content/attributes/hx-disinherit.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-disinherit"
3+
description = """\
4+
The hx-disinherit attribute in htmx lets you control how child elements inherit attributes from their parents. This \
5+
documentation explains how to selectively disable inheritance of specific htmx attributes or all attributes, \
6+
allowing for more granular control over your web application's behavior."""
37
+++
48

59
The default behavior for htmx is to "inherit" many attributes automatically: that is, an attribute such as

‎www/content/attributes/hx-encoding.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-encoding"
3+
description = """\
4+
The hx-encoding attribute in htmx allows you to switch the request encoding from the usual \
5+
`application/x-www-form-urlencoded` encoding to `multipart/form-data`, usually to support file uploads in an AJAX \
6+
request."""
37
+++
48

59
The `hx-encoding` attribute allows you to switch the request encoding from the usual `application/x-www-form-urlencoded`

‎www/content/attributes/hx-ext.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-ext"
3+
description = """\
4+
The hx-ext attribute in htmx enables one or more htmx extensions for an element and all its children. You can also \
5+
use this attribute to ignore an extension that is enabled by a parent element."""
36
+++
47

58
The `hx-ext` attribute enables an htmx [extension](https://htmx.org/extensions) for an element and all its children.

‎www/content/attributes/hx-get.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-get"
3+
description = """\
4+
The hx-get attribute in htmx will cause an element to issue a GET request to the specified URL and swap the returned \
5+
HTML into the DOM using a swap strategy."""
36
+++
47

58
The `hx-get` attribute will cause an element to issue a `GET` to the specified URL and swap

‎www/content/attributes/hx-headers.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
+++
22
title = "hx-headers"
3+
description = """\
4+
The hx-headers attribute in htmx allows you to add to the headers that will be submitted with an AJAX request."""
35
+++
46

57
The `hx-headers` attribute allows you to add to the headers that will be submitted with an AJAX request.

‎www/content/attributes/hx-history-elt.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-history-elt"
3+
description = """\
4+
The hx-history-elt attribute in htmx allows you to specify the element that will be used to snapshot and restore \
5+
page state during navigation. In most cases we do not recommend using this element."""
36
+++
47

58
The `hx-history-elt` attribute allows you to specify the element that will be used to snapshot and

‎www/content/attributes/hx-history.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-history"
3+
description = """\
4+
The hx-history attribute in htmx allows you to prevent sensitive page data from being stored in the browser's \
5+
localStorage cache during history navigation, ensuring that the page state is retrieved from the server instead when \
6+
navigating through history."""
37
+++
48

59
Set the `hx-history` attribute to `false` on any element in the current document, or any html fragment loaded into the current document by htmx, to prevent sensitive data being saved to the localStorage cache when htmx takes a snapshot of the page state.

‎www/content/attributes/hx-include.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "hx-include"
3+
description = "The hx-include attribute in htmx allows you to include additional element values in an AJAX request."
34
+++
45

56
The `hx-include` attribute allows you to include additional element values in an AJAX request. The value of this
@@ -14,7 +15,7 @@ attribute can be:
1415
* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector.
1516
(e.g. `next .error` will target the closest following sibling element with `error` class)
1617
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
17-
(e.g `previous .error` will target the closest previous sibling with `error` class)
18+
(e.g. `previous .error` will target the closest previous sibling with `error` class)
1819

1920
Here is an example that includes a separate input value:
2021

‎www/content/attributes/hx-indicator.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-indicator"
3+
description = """\
4+
The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added \
5+
to it for the duration of the request. This can be used to show spinners or progress indicators while the request is \
6+
in flight."""
37
+++
48

59
The `hx-indicator` attribute allows you to specify the element that will have the `htmx-request` class

‎www/content/attributes/hx-inherit.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-inherit"
3+
description = """\
4+
The hx-inherit attribute in htmx allows you to explicitly control attribute inheritance behavior between parent and \
5+
child elements, providing fine-grained control over which htmx attributes are inherited when the default inheritance \
6+
system is disabled through configuration."""
37
+++
48

59
The default behavior for htmx is to "inherit" many attributes automatically: that is, an attribute such as

‎www/content/attributes/hx-on.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-on"
3+
description = """\
4+
The hx-on attributes in htmx allow you to write inline JavaScript event handlers directly on HTML elements, \
5+
supporting both standard DOM events and htmx-specific events with improved locality of behavior."""
36
+++
47

58
The `hx-on*` attributes allow you to embed scripts inline to respond to events directly on an element; similar to the

‎www/content/attributes/hx-params.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
+++
22
title = "hx-params"
3+
description = """\
4+
The hx-params attribute in htmx allows you to filter the parameters that will be submitted with an AJAX request."""
35
+++
46

57
The `hx-params` attribute allows you to filter the parameters that will be submitted with an AJAX request.

‎www/content/attributes/hx-patch.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-patch"
3+
description = """\
4+
The hx-patch attribute in htmx will cause an element to issue a PATCH request to the specified URL and swap the \
5+
returned HTML into the DOM using a swap strategy."""
36
+++
47

58
The `hx-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap

‎www/content/attributes/hx-post.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-post"
3+
description = """\
4+
The hx-post attribute in htmx will cause an element to issue a POST request to the specified URL and swap the \
5+
returned HTML into the DOM using a swap strategy."""
36
+++
47

58
The `hx-post` attribute will cause an element to issue a `POST` to the specified URL and swap

‎www/content/attributes/hx-preserve.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-preserve"
3+
description = """\
4+
The hx-preserve attribute in htmx allows you to keep an element unchanged during HTML replacement. Elements with \
5+
hx-preserve set are preserved by `id` when htmx updates any ancestor element."""
36
+++
47

58
The `hx-preserve` attribute allows you to keep an element unchanged during HTML replacement.

‎www/content/attributes/hx-prompt.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-prompt"
3+
description = """\
4+
The hx-prompt attribute in htmx allows you to show a prompt before issuing a request. The value of the prompt will \
5+
be included in the request in the `HX-Prompt` header."""
36
+++
47

58
The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of

‎www/content/attributes/hx-push-url.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-push-url"
3+
description = """\
4+
The hx-push-url attribute in htmx allows you to push a URL into the browser location history. This creates a new \
5+
history entry, allowing navigation with the browser's back and forward buttons."""
36
+++
47

58
The `hx-push-url` attribute allows you to push a URL into the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).

‎www/content/attributes/hx-put.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-put"
3+
description = """\
4+
The hx-put attribute in htmx will cause an element to issue a PUT request to the specified URL and swap the returned \
5+
HTML into the DOM using a swap strategy."""
36
+++
47

58
The `hx-put` attribute will cause an element to issue a `PUT` to the specified URL and swap

‎www/content/attributes/hx-replace-url.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
+++
22
title = "hx-replace-url"
3+
description = """\
4+
The hx-replace-url attribute in htmx allows you to replace the current URL of the browser location history."""
35
+++
46

57
The `hx-replace-url` attribute allows you to replace the current url of the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).

‎www/content/attributes/hx-request.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-request"
3+
description = """\
4+
The hx-request attribute in htmx allows you to configure the request timeout, whether the request will send \
5+
credentials, and whether the request will include headers."""
36
+++
47

58
The `hx-request` attribute allows you to configure various aspects of the request via the following attributes:

‎www/content/attributes/hx-select-oob.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-select-oob"
3+
description = """\
4+
The hx-select-oob attribute in htmx allows you to select content from a response to be swapped in via an out-of-band \
5+
swap. The value of this attribute is comma separated list of elements to be swapped out of band."""
36
+++
47

58
The `hx-select-oob` attribute allows you to select content from a response to be swapped in via an out-of-band swap.

‎www/content/attributes/hx-select.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "hx-select"
3+
description = "The hx-select attribute in htmx allows you to select the content you want swapped from a response."
34
+++
45

56
The `hx-select` attribute allows you to select the content you want swapped from a response. The value of

‎www/content/attributes/hx-swap-oob.md

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
+++
22
title = "hx-swap-oob"
3+
description = """\
4+
The hx-swap-oob attribute in htmx allows you to specify that some content in a response should be swapped into the \
5+
DOM somewhere other than the target, that is 'out-of-band'. This allows you to piggyback updates to other elements \
6+
on a response."""
37
+++
48

59
The `hx-swap-oob` attribute allows you to specify that some content in a response should be
6-
swapped into the DOM somewhere other than the target, that is "Out of Band". This allows you to piggy back updates to other element updates on a response.
10+
swapped into the DOM somewhere other than the target, that is "Out of Band". This allows you to piggyback updates to other element updates on a response.
711

812
Consider the following response HTML:
913

@@ -72,7 +76,7 @@ A `<p>` can be encapsulated in `<div>` or `<span>`:
7276
Note that you can use a `template` tag to encapsulate types of elements that, by the HTML spec, can't stand on their own in the
7377
DOM (`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`, `<colgroup>`, `<caption>`, `<col>` & `<li>`).
7478

75-
Here is an example with an out of band swap of a table row being encapsulated in this way:
79+
Here is an example with an out-of-band swap of a table row being encapsulated in this way:
7680

7781
```html
7882
<div>
@@ -91,7 +95,7 @@ Note that these template tags will be removed from the final content of the page
9195

9296
Some element types, like SVG, use a specific XML namespace for their child elements. This prevents internal elements from working correctly when swapped in, unless they are encapsulated within a `svg` tag. To modify the internal contents of an existing SVG, you can use both `template` and `svg` tags to encapsulate the elements, allowing them to get the correct namespace applied.
9397

94-
Here is an example with an out of band swap of svg elements being encapsulated in this way:
98+
Here is an example with an out-of-band swap of svg elements being encapsulated in this way:
9599

96100
```html
97101
<div>
@@ -111,7 +115,7 @@ Note that these `template` and `svg` wrapping tags will be removed from the fina
111115
## Nested OOB Swaps
112116

113117
By default, any element with `hx-swap-oob=` attribute anywhere in the response is processed for oob swap behavior, including when an element is nested within the main response element.
114-
This can be problematic when using [template fragments](https://htmx.org/essays/template-fragments/) where a fragment may be reused as a oob-swap target and also as part of a bigger fragment. When the bigger fragment is the main response the inner fragment will still be processed as an oob swap, removing it from the dom.
118+
This can be problematic when using [template fragments](https://htmx.org/essays/template-fragments/) where a fragment may be reused as an oob-swap target and also as part of a bigger fragment. When the bigger fragment is the main response the inner fragment will still be processed as an oob swap, removing it from the dom.
115119

116120
This behavior can be changed by setting the config `htmx.config.allowNestedOobSwaps` to `false`. If this config option is `false`, OOB swaps are only processed when the element is *adjacent to* the main response element, OOB swaps elsewhere will be ignored and oob-swap-related attributes stripped.
117121

‎www/content/attributes/hx-swap.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-swap"
3+
description = """\
4+
The hx-swap attribute in htmx allows you to specify the 'swap strategy', or how the response will be swapped in \
5+
relative to the target of an AJAZ request. The default swap strategy is `innerHTML`."""
36
+++
47

58
The `hx-swap` attribute allows you to specify how the response will be swapped in relative to the

‎www/content/attributes/hx-sync.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
+++
22
title = "hx-sync"
3+
description = "The hx-sync attribute in htmx allows you to synchronize AJAX requests between multiple elements."
34
+++
45

56
The `hx-sync` attribute allows you to synchronize AJAX requests between multiple elements.

‎www/content/attributes/hx-target.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-target"
3+
description = """\
4+
The hx-target attribute in htmx allows you to target a different element for swapping than the one issuing the AJAX \
5+
request."""
36
+++
47

58
The `hx-target` attribute allows you to target a different element for swapping than the one issuing the AJAX
@@ -16,7 +19,7 @@ request. The value of this attribute can be:
1619
(e.g. `next .error` will target the closest following sibling element with `error` class)
1720
* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
1821
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
19-
(e.g `previous .error` will target the closest previous sibling with `error` class)
22+
(e.g. `previous .error` will target the closest previous sibling with `error` class)
2023

2124

2225
Here is an example that targets a div:

‎www/content/attributes/hx-trigger.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
+++
22
title = "hx-trigger"
3+
description = """\
4+
The hx-trigger attribute in htmx allows you to specify what triggers an AJAX request. Supported triggers include \
5+
standard DOM events, custom events, polling intervals, and event modifiers. The hx-trigger attribute also allows \
6+
specifying event filtering, timing controls, event bubbling, and multiple trigger definitions for fine-grained \
7+
control over when and how requests are initiated."""
38
+++
49

510
The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger
@@ -69,7 +74,7 @@ is seen again before the delay completes, it is ignored, the element will trigge
6974
(e.g. `next .error` will target the closest following sibling element with `error` class)
7075
* `previous` resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
7176
* `previous <CSS selector>` scans the DOM backwards for the first element that matches the given CSS selector.
72-
(e.g `previous .error` will target the closest previous sibling with `error` class)
77+
(e.g. `previous .error` will target the closest previous sibling with `error` class)
7378
* `target:<CSS selector>` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for
7479
triggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body,
7580
but with a target filter for a child element

‎www/content/attributes/hx-validate.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
+++
22
title = "hx-validate"
3+
description = """\
4+
The hx-validate attribute in htmx will cause an element to validate itself using the HTML5 Validation API before it \
5+
submits a request."""
36
+++
47

58
The `hx-validate` attribute will cause an element to validate itself by way of the [HTML5 Validation API](@/docs.md#validation)

‎www/content/attributes/hx-vals.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
+++
22
title = "hx-vals"
3+
description = """\
4+
The hx-vals attribute in htmx allows you to add to the parameters that will be submitted with an AJAX request."""
35
+++
46

57
The `hx-vals` attribute allows you to add to the parameters that will be submitted with an AJAX request.

‎www/content/attributes/hx-vars.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
+++
22
title = "hx-vars"
3+
description = """\
4+
The hx-vars attribute in htmx allows you to dynamically add to the parameters that will be submitted with an AJAX \
5+
request. This attribute has been deprecated. We recommend you use the hx-vals attribute that provides the same \
6+
functionality with safer defaults."""
37
+++
48

59
**NOTE: `hx-vars` has been deprecated in favor of [`hx-vals`](@/attributes/hx-vals.md), which is safer by default.**

0 commit comments

Comments
 (0)