summaryrefslogtreecommitdiffstatshomepage
path: root/www
diff options
context:
space:
mode:
authorCarson Gross <carson@bigsky.software>2025-02-19 09:26:08 -0700
committerCarson Gross <carson@bigsky.software>2025-02-19 09:26:08 -0700
commit70736c4c8fd3b4544b4aa873f327e28d947fbffb (patch)
tree3b51d942b387a4d848cf63a1b5ee4c6ae4083c58 /www
parent163d226988ee8dab5c1a301cd64a5d59072f5181 (diff)
parent0a135f95ce281073670142dfa1f89047ffd854c9 (diff)
downloadhtmx-70736c4c8fd3b4544b4aa873f327e28d947fbffb.tar.gz
htmx-70736c4c8fd3b4544b4aa873f327e28d947fbffb.zip
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'www')
-rw-r--r--www/content/QUIRKS.md31
-rw-r--r--www/content/attributes/hx-boost.md4
-rw-r--r--www/content/attributes/hx-confirm.md4
-rw-r--r--www/content/attributes/hx-delete.md3
-rw-r--r--www/content/attributes/hx-disable.md1
-rw-r--r--www/content/attributes/hx-disabled-elt.md5
-rw-r--r--www/content/attributes/hx-disinherit.md4
-rw-r--r--www/content/attributes/hx-encoding.md4
-rw-r--r--www/content/attributes/hx-ext.md3
-rw-r--r--www/content/attributes/hx-get.md3
-rw-r--r--www/content/attributes/hx-headers.md4
-rw-r--r--www/content/attributes/hx-history-elt.md3
-rw-r--r--www/content/attributes/hx-history.md4
-rw-r--r--www/content/attributes/hx-include.md3
-rw-r--r--www/content/attributes/hx-indicator.md4
-rw-r--r--www/content/attributes/hx-inherit.md4
-rw-r--r--www/content/attributes/hx-on.md3
-rw-r--r--www/content/attributes/hx-params.md2
-rw-r--r--www/content/attributes/hx-patch.md3
-rw-r--r--www/content/attributes/hx-post.md3
-rw-r--r--www/content/attributes/hx-preserve.md3
-rw-r--r--www/content/attributes/hx-prompt.md3
-rw-r--r--www/content/attributes/hx-push-url.md3
-rw-r--r--www/content/attributes/hx-put.md3
-rw-r--r--www/content/attributes/hx-replace-url.md2
-rw-r--r--www/content/attributes/hx-request.md3
-rw-r--r--www/content/attributes/hx-select-oob.md3
-rw-r--r--www/content/attributes/hx-select.md1
-rw-r--r--www/content/attributes/hx-swap-oob.md12
-rw-r--r--www/content/attributes/hx-swap.md3
-rw-r--r--www/content/attributes/hx-sync.md1
-rw-r--r--www/content/attributes/hx-target.md5
-rw-r--r--www/content/attributes/hx-trigger.md7
-rw-r--r--www/content/attributes/hx-validate.md3
-rw-r--r--www/content/attributes/hx-vals.md2
-rw-r--r--www/content/attributes/hx-vars.md4
-rw-r--r--www/content/docs.md90
-rw-r--r--www/content/extensions/head-support.md29
-rw-r--r--www/content/extensions/htmx-1-compat.md28
-rw-r--r--www/content/extensions/idiomorph.md28
-rw-r--r--www/content/extensions/preload.md30
-rw-r--r--www/content/extensions/response-targets.md29
-rw-r--r--www/content/extensions/sse.md27
-rw-r--r--www/content/extensions/ws.md27
-rw-r--r--www/content/server-examples.md9
45 files changed, 383 insertions, 67 deletions
diff --git a/www/content/QUIRKS.md b/www/content/QUIRKS.md
index faff3b50..89ecc33a 100644
--- a/www/content/QUIRKS.md
+++ b/www/content/QUIRKS.md
@@ -11,10 +11,10 @@ This is a "quirks" page, based on [SQLite's "Quirks, Caveats, and Gotchas In SQL
## Attribute Inheritance
-Many attributes in htmx are [inherited](@/docs.md#inheritance): child elements can receive behavior from attributes located
+Many attributes in htmx are [inherited](@/docs.md#inheritance): child elements can receive behavior from attributes located
on parent elements.
-As an example, here are two htmx-powered buttons that inherit their [target](@/attributes/hx-target.md) from a parent
+As an example, here are two htmx-powered buttons that inherit their [target](@/attributes/hx-target.md) from a parent
div:
```html
@@ -32,8 +32,8 @@ and it becomes more difficult to understand what an element is doing.
It is also possible to inadvertently change the behavior of elements by adding attributes to parents.
-Some people prefer to disable inheritance in htmx entirely, using the `htmx.config.disableInheritance`
-[configuration variable](@/docs.md#config).
+Some people prefer to disable inheritance in htmx entirely, using the `htmx.config.disableInheritance`
+[configuration variable](@/docs.md#config).
Here is a `meta` tag configuration that does so:
@@ -48,7 +48,7 @@ The [`hx-swap`](@/attributes/hx-swap.md) attribute allows you to control how a s
Many people prefer to use the `outerHTML` strategy as the default instead.
-You can change this behavior using the `htmx.config.defaultSwapStyle`
+You can change this behavior using the `htmx.config.defaultSwapStyle`
[configuration variable](@/docs.md#config).
Here is a `meta` tag configuration that does so:
@@ -68,12 +68,12 @@ This means you cannot change attributes on the `body` tag via an htmx request.
htmx has never swapped "error" status response codes (`400`s & `500`s) by default.
-This behavior annoys some people, and some server frameworks, in particular, will return a `422 - Unprocessable Entity`
-response code to indicate that a form was not filled out properly.
+This behavior annoys some people, and some server frameworks, in particular, will return a `422 - Unprocessable Entity`
+response code to indicate that a form was not filled out properly.
This can be very confusing when it is first encountered.
-You can configure the response behavior of htmx via the [`htmx:beforeSwap`](@/docs.md#modifying_swapping_behavior_with_events)
+You can configure the response behavior of htmx via the [`htmx:beforeSwap`](@/docs.md#modifying_swapping_behavior_with_events)
event or [via the `htmx.config.responseHandling` config array](https://htmx.org/docs/#response-handling).
Here is the default configuration:
@@ -143,7 +143,7 @@ can also be tricky, particularly if you are using 3rd party JavaScript libraries
There can also be [security concerns](@/docs.md#hx-history) when using htmx's history support.
-Most of these issues can be solved by disabling any local history cache and simply issuing a server request when a
+Most of these issues can be solved by disabling any local history cache and simply issuing a server request when a
user navigates backwards in history, with the tradeoff that history navigation will be slower.
Here is a meta tag that disables history caching:
@@ -157,8 +157,8 @@ Here is a meta tag that disables history caching:
[`hx-boost`](@/attributes/hx-boost.md) is an odd feature compared with most other aspects of htmx: it "magically" turns
all anchor tags and forms into AJAX requests.
-This can speed the feel of these interactions up, and also allows the forms and anchors to continue working when
-[JavaScript is disabled](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement), however it comes
+This can speed the feel of these interactions up, and also allows the forms and anchors to continue working when
+[JavaScript is disabled](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement), however it comes
with some tradeoffs:
* The history issues mentioned above can show up
@@ -166,18 +166,19 @@ with some tradeoffs:
* The global javascript scope is not refreshed, so it is possible to have strange interactions between pages. For example
a global `let` may start failing because a symbol is already defined.
-Some members on the core htmx team feel that, due to these issues, as well as the fact that browsers have improved
-quite a bit in page navigation, it is best to avoid `hx-boost` and just use unboosted links and forms.
+Some members on the core htmx team feel that, due to these issues, as well as the fact that browsers have improved
+quite a bit in page navigation, it is best to avoid `hx-boost` and
+[just use unboosted links and forms](https://unplannedobsolescence.com/blog/less-htmx-is-more/).
There is no doubt that `hx-boost` is an odd-man out when compared to other htmx attributes and suffers from the dictum
that "If something magically works, then it can also magically break."
-Despite this fact, I (Carson) still feel it is useful in many situations, and it is used on the <https://htmx.org>
+Despite this fact, I (Carson) still feel it is useful in many situations, and it is used on the <https://htmx.org>
website.
## The JavaScript API Is Not A Focus
-htmx is a hypermedia-oriented front end library. This means that htmx enhances HTML via
+htmx is a hypermedia-oriented front end library. This means that htmx enhances HTML via
[attributes](@/reference.md#attributes) in the HTML , rather than providing an elaborate
JavaScript API.
diff --git a/www/content/attributes/hx-boost.md b/www/content/attributes/hx-boost.md
index 38dfde3b..db280fd4 100644
--- a/www/content/attributes/hx-boost.md
+++ b/www/content/attributes/hx-boost.md
@@ -1,5 +1,9 @@
+++
title = "hx-boost"
+description = """\
+ The hx-boost attribute in htmx enables progressive enhancement by converting standard HTML anchors and forms into \
+ AJAX requests, maintaining graceful fallback for users without JavaScript while providing modern dynamic page \
+ updates for those with JavaScript enabled."""
+++
The `hx-boost` attribute allows you to "boost" normal anchors and form tags to use AJAX instead. This
diff --git a/www/content/attributes/hx-confirm.md b/www/content/attributes/hx-confirm.md
index 9cb3ced4..b03c0246 100644
--- a/www/content/attributes/hx-confirm.md
+++ b/www/content/attributes/hx-confirm.md
@@ -1,5 +1,9 @@
+++
title = "hx-confirm"
+description = """\
+ The hx-confirm attribute in htmx provides a way to add confirmation dialogs before executing requests, allowing \
+ you to protect users from accidental destructive actions. This documentation explains how to implement confirmation \
+ prompts and customize their behavior through event handling."""
+++
The `hx-confirm` attribute allows you to confirm an action before issuing a request. This can be useful
diff --git a/www/content/attributes/hx-delete.md b/www/content/attributes/hx-delete.md
index d33ca2de..6770e8d1 100644
--- a/www/content/attributes/hx-delete.md
+++ b/www/content/attributes/hx-delete.md
@@ -1,5 +1,8 @@
+++
title = "hx-delete"
+description = """\
+ The hx-delete attribute in htmx will cause an element to issue a DELETE request to the specified URL and swap the \
+ returned HTML into the DOM using a swap strategy."""
+++
The `hx-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap
diff --git a/www/content/attributes/hx-disable.md b/www/content/attributes/hx-disable.md
index 6e353593..cccc4afa 100644
--- a/www/content/attributes/hx-disable.md
+++ b/www/content/attributes/hx-disable.md
@@ -1,5 +1,6 @@
+++
title = "hx-disable"
+description = "The hx-disable attribute in htmx will disable htmx processing for a given element and all its children."
+++
The `hx-disable` attribute will disable htmx processing for a given element and all its children. This can be
diff --git a/www/content/attributes/hx-disabled-elt.md b/www/content/attributes/hx-disabled-elt.md
index fae9860d..bdae9394 100644
--- a/www/content/attributes/hx-disabled-elt.md
+++ b/www/content/attributes/hx-disabled-elt.md
@@ -1,5 +1,8 @@
+++
title = "hx-disabled-elt"
+description = """\
+ The hx-disabled-elt attribute in htmx allows you to specify elements that will have the `disabled` attribute added \
+ to them for the duration of the request."""
+++
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
(e.g. `next button` will disable the closest following sibling `button` element)
* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
- (e.g `previous input` will disable the closest previous sibling `input` element)
+ (e.g. `previous input` will disable the closest previous sibling `input` element)
Here is an example with a button that will disable itself during a request:
diff --git a/www/content/attributes/hx-disinherit.md b/www/content/attributes/hx-disinherit.md
index c771d5eb..091c7d7f 100644
--- a/www/content/attributes/hx-disinherit.md
+++ b/www/content/attributes/hx-disinherit.md
@@ -1,5 +1,9 @@
+++
title = "hx-disinherit"
+description = """\
+ The hx-disinherit attribute in htmx lets you control how child elements inherit attributes from their parents. This \
+ documentation explains how to selectively disable inheritance of specific htmx attributes or all attributes, \
+ allowing for more granular control over your web application's behavior."""
+++
The default behavior for htmx is to "inherit" many attributes automatically: that is, an attribute such as
diff --git a/www/content/attributes/hx-encoding.md b/www/content/attributes/hx-encoding.md
index 9e8d5449..beaee6d1 100644
--- a/www/content/attributes/hx-encoding.md
+++ b/www/content/attributes/hx-encoding.md
@@ -1,5 +1,9 @@
+++
title = "hx-encoding"
+description = """\
+ The hx-encoding attribute in htmx allows you to switch the request encoding from the usual \
+ `application/x-www-form-urlencoded` encoding to `multipart/form-data`, usually to support file uploads in an AJAX \
+ request."""
+++
The `hx-encoding` attribute allows you to switch the request encoding from the usual `application/x-www-form-urlencoded`
diff --git a/www/content/attributes/hx-ext.md b/www/content/attributes/hx-ext.md
index 86e031d9..3084c76c 100644
--- a/www/content/attributes/hx-ext.md
+++ b/www/content/attributes/hx-ext.md
@@ -1,5 +1,8 @@
+++
title = "hx-ext"
+description = """\
+ The hx-ext attribute in htmx enables one or more htmx extensions for an element and all its children. You can also \
+ use this attribute to ignore an extension that is enabled by a parent element."""
+++
The `hx-ext` attribute enables an htmx [extension](https://htmx.org/extensions) for an element and all its children.
diff --git a/www/content/attributes/hx-get.md b/www/content/attributes/hx-get.md
index 27d5fc65..58014fe3 100644
--- a/www/content/attributes/hx-get.md
+++ b/www/content/attributes/hx-get.md
@@ -1,5 +1,8 @@
+++
title = "hx-get"
+description = """\
+ The hx-get attribute in htmx will cause an element to issue a GET request to the specified URL and swap the returned \
+ HTML into the DOM using a swap strategy."""
+++
The `hx-get` attribute will cause an element to issue a `GET` to the specified URL and swap
diff --git a/www/content/attributes/hx-headers.md b/www/content/attributes/hx-headers.md
index f622f7ba..8665ca6e 100644
--- a/www/content/attributes/hx-headers.md
+++ b/www/content/attributes/hx-headers.md
@@ -1,5 +1,7 @@
+++
title = "hx-headers"
+description = """\
+ The hx-headers attribute in htmx allows you to add to the headers that will be submitted with an AJAX request."""
+++
The `hx-headers` attribute allows you to add to the headers that will be submitted with an AJAX request.
@@ -22,6 +24,8 @@ If you wish for `hx-headers` to *evaluate* the values given, you can prefix the
security considerations, especially when dealing with user input such as query strings or user-generated content,
which could introduce a [Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/) vulnerability.
+* Whilst far from being a foolproof solution to [Cross-Site Request Forgery](https://owasp.org/www-community/attacks/csrf), the `hx-headers` attribute can support backend services to provide [CSRF prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html). For more information see the [CSRF Prevention](https://htmx.org/docs/#csrf-prevention) section.
+
## Notes
* `hx-headers` is inherited and can be placed on a parent element.
diff --git a/www/content/attributes/hx-history-elt.md b/www/content/attributes/hx-history-elt.md
index 0df474c3..6cc10186 100644
--- a/www/content/attributes/hx-history-elt.md
+++ b/www/content/attributes/hx-history-elt.md
@@ -1,5 +1,8 @@
+++
title = "hx-history-elt"
+description = """\
+ The hx-history-elt attribute in htmx allows you to specify the element that will be used to snapshot and restore \
+ page state during navigation. In most cases we do not recommend using this element."""
+++
The `hx-history-elt` attribute allows you to specify the element that will be used to snapshot and
diff --git a/www/content/attributes/hx-history.md b/www/content/attributes/hx-history.md
index 4b2e6951..049689d2 100644
--- a/www/content/attributes/hx-history.md
+++ b/www/content/attributes/hx-history.md
@@ -1,5 +1,9 @@
+++
title = "hx-history"
+description = """\
+ The hx-history attribute in htmx allows you to prevent sensitive page data from being stored in the browser's \
+ localStorage cache during history navigation, ensuring that the page state is retrieved from the server instead when \
+ navigating through history."""
+++
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.
diff --git a/www/content/attributes/hx-include.md b/www/content/attributes/hx-include.md
index 5001b8ea..360a740e 100644
--- a/www/content/attributes/hx-include.md
+++ b/www/content/attributes/hx-include.md
@@ -1,5 +1,6 @@
+++
title = "hx-include"
+description = "The hx-include attribute in htmx allows you to include additional element values in an AJAX request."
+++
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:
* `next <CSS selector>` which will scan the DOM forward for the first element that matches the given CSS selector.
(e.g. `next .error` will target the closest following sibling element with `error` class)
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
- (e.g `previous .error` will target the closest previous sibling with `error` class)
+ (e.g. `previous .error` will target the closest previous sibling with `error` class)
Here is an example that includes a separate input value:
diff --git a/www/content/attributes/hx-indicator.md b/www/content/attributes/hx-indicator.md
index 0e273e48..1c2358b1 100644
--- a/www/content/attributes/hx-indicator.md
+++ b/www/content/attributes/hx-indicator.md
@@ -1,5 +1,9 @@
+++
title = "hx-indicator"
+description = """\
+ The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added \
+ to it for the duration of the request. This can be used to show spinners or progress indicators while the request is \
+ in flight."""
+++
The `hx-indicator` attribute allows you to specify the element that will have the `htmx-request` class
diff --git a/www/content/attributes/hx-inherit.md b/www/content/attributes/hx-inherit.md
index d8db6e36..1a722fc4 100644
--- a/www/content/attributes/hx-inherit.md
+++ b/www/content/attributes/hx-inherit.md
@@ -1,5 +1,9 @@
+++
title = "hx-inherit"
+description = """\
+ The hx-inherit attribute in htmx allows you to explicitly control attribute inheritance behavior between parent and \
+ child elements, providing fine-grained control over which htmx attributes are inherited when the default inheritance \
+ system is disabled through configuration."""
+++
The default behavior for htmx is to "inherit" many attributes automatically: that is, an attribute such as
diff --git a/www/content/attributes/hx-on.md b/www/content/attributes/hx-on.md
index 2934fd4d..1c882b7e 100644
--- a/www/content/attributes/hx-on.md
+++ b/www/content/attributes/hx-on.md
@@ -1,5 +1,8 @@
+++
title = "hx-on"
+description = """\
+ The hx-on attributes in htmx allow you to write inline JavaScript event handlers directly on HTML elements, \
+ supporting both standard DOM events and htmx-specific events with improved locality of behavior."""
+++
The `hx-on*` attributes allow you to embed scripts inline to respond to events directly on an element; similar to the
diff --git a/www/content/attributes/hx-params.md b/www/content/attributes/hx-params.md
index e6274bb3..df3a2a7d 100644
--- a/www/content/attributes/hx-params.md
+++ b/www/content/attributes/hx-params.md
@@ -1,5 +1,7 @@
+++
title = "hx-params"
+description = """\
+ The hx-params attribute in htmx allows you to filter the parameters that will be submitted with an AJAX request."""
+++
The `hx-params` attribute allows you to filter the parameters that will be submitted with an AJAX request.
diff --git a/www/content/attributes/hx-patch.md b/www/content/attributes/hx-patch.md
index d0aaad18..578550e6 100644
--- a/www/content/attributes/hx-patch.md
+++ b/www/content/attributes/hx-patch.md
@@ -1,5 +1,8 @@
+++
title = "hx-patch"
+description = """\
+ The hx-patch attribute in htmx will cause an element to issue a PATCH request to the specified URL and swap the \
+ returned HTML into the DOM using a swap strategy."""
+++
The `hx-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap
diff --git a/www/content/attributes/hx-post.md b/www/content/attributes/hx-post.md
index ef534868..a85da345 100644
--- a/www/content/attributes/hx-post.md
+++ b/www/content/attributes/hx-post.md
@@ -1,5 +1,8 @@
+++
title = "hx-post"
+description = """\
+ The hx-post attribute in htmx will cause an element to issue a POST request to the specified URL and swap the \
+ returned HTML into the DOM using a swap strategy."""
+++
The `hx-post` attribute will cause an element to issue a `POST` to the specified URL and swap
diff --git a/www/content/attributes/hx-preserve.md b/www/content/attributes/hx-preserve.md
index fc71fdbf..a052e745 100644
--- a/www/content/attributes/hx-preserve.md
+++ b/www/content/attributes/hx-preserve.md
@@ -1,5 +1,8 @@
+++
title = "hx-preserve"
+description = """\
+ The hx-preserve attribute in htmx allows you to keep an element unchanged during HTML replacement. Elements with \
+ hx-preserve set are preserved by `id` when htmx updates any ancestor element."""
+++
The `hx-preserve` attribute allows you to keep an element unchanged during HTML replacement.
diff --git a/www/content/attributes/hx-prompt.md b/www/content/attributes/hx-prompt.md
index c3176d72..f9544e7b 100644
--- a/www/content/attributes/hx-prompt.md
+++ b/www/content/attributes/hx-prompt.md
@@ -1,5 +1,8 @@
+++
title = "hx-prompt"
+description = """\
+ The hx-prompt attribute in htmx allows you to show a prompt before issuing a request. The value of the prompt will \
+ be included in the request in the `HX-Prompt` header."""
+++
The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of
diff --git a/www/content/attributes/hx-push-url.md b/www/content/attributes/hx-push-url.md
index 191db8e1..eb1a0ea6 100644
--- a/www/content/attributes/hx-push-url.md
+++ b/www/content/attributes/hx-push-url.md
@@ -1,5 +1,8 @@
+++
title = "hx-push-url"
+description = """\
+ The hx-push-url attribute in htmx allows you to push a URL into the browser location history. This creates a new \
+ history entry, allowing navigation with the browser's back and forward buttons."""
+++
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).
diff --git a/www/content/attributes/hx-put.md b/www/content/attributes/hx-put.md
index 9da24ac0..5dbdee26 100644
--- a/www/content/attributes/hx-put.md
+++ b/www/content/attributes/hx-put.md
@@ -1,5 +1,8 @@
+++
title = "hx-put"
+description = """\
+ The hx-put attribute in htmx will cause an element to issue a PUT request to the specified URL and swap the returned \
+ HTML into the DOM using a swap strategy."""
+++
The `hx-put` attribute will cause an element to issue a `PUT` to the specified URL and swap
diff --git a/www/content/attributes/hx-replace-url.md b/www/content/attributes/hx-replace-url.md
index 1036ddc1..00a7fd0d 100644
--- a/www/content/attributes/hx-replace-url.md
+++ b/www/content/attributes/hx-replace-url.md
@@ -1,5 +1,7 @@
+++
title = "hx-replace-url"
+description = """\
+ The hx-replace-url attribute in htmx allows you to replace the current URL of the browser location history."""
+++
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).
diff --git a/www/content/attributes/hx-request.md b/www/content/attributes/hx-request.md
index 5d903e7d..fb8a42a9 100644
--- a/www/content/attributes/hx-request.md
+++ b/www/content/attributes/hx-request.md
@@ -1,5 +1,8 @@
+++
title = "hx-request"
+description = """\
+ The hx-request attribute in htmx allows you to configure the request timeout, whether the request will send \
+ credentials, and whether the request will include headers."""
+++
The `hx-request` attribute allows you to configure various aspects of the request via the following attributes:
diff --git a/www/content/attributes/hx-select-oob.md b/www/content/attributes/hx-select-oob.md
index 4c13ac21..5449b393 100644
--- a/www/content/attributes/hx-select-oob.md
+++ b/www/content/attributes/hx-select-oob.md
@@ -1,5 +1,8 @@
+++
title = "hx-select-oob"
+description = """\
+ The hx-select-oob attribute in htmx allows you to select content from a response to be swapped in via an out-of-band \
+ swap. The value of this attribute is comma separated list of elements to be swapped out of band."""
+++
The `hx-select-oob` attribute allows you to select content from a response to be swapped in via an out-of-band swap.
diff --git a/www/content/attributes/hx-select.md b/www/content/attributes/hx-select.md
index 99d81e72..b086d41b 100644
--- a/www/content/attributes/hx-select.md
+++ b/www/content/attributes/hx-select.md
@@ -1,5 +1,6 @@
+++
title = "hx-select"
+description = "The hx-select attribute in htmx allows you to select the content you want swapped from a response."
+++
The `hx-select` attribute allows you to select the content you want swapped from a response. The value of
diff --git a/www/content/attributes/hx-swap-oob.md b/www/content/attributes/hx-swap-oob.md
index be59f001..94393fb3 100644
--- a/www/content/attributes/hx-swap-oob.md
+++ b/www/content/attributes/hx-swap-oob.md
@@ -1,9 +1,13 @@
+++
title = "hx-swap-oob"
+description = """\
+ The hx-swap-oob attribute in htmx allows you to specify that some content in a response should be swapped into the \
+ DOM somewhere other than the target, that is 'out-of-band'. This allows you to piggyback updates to other elements \
+ on a response."""
+++
The `hx-swap-oob` attribute allows you to specify that some content in a response should be
-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.
+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.
Consider the following response HTML:
@@ -72,7 +76,7 @@ A `<p>` can be encapsulated in `<div>` or `<span>`:
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
DOM (`<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>`, `<tfoot>`, `<colgroup>`, `<caption>`, `<col>` & `<li>`).
-Here is an example with an out of band swap of a table row being encapsulated in this way:
+Here is an example with an out-of-band swap of a table row being encapsulated in this way:
```html
<div>
@@ -91,7 +95,7 @@ Note that these template tags will be removed from the final content of the page
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.
-Here is an example with an out of band swap of svg elements being encapsulated in this way:
+Here is an example with an out-of-band swap of svg elements being encapsulated in this way:
```html
<div>
@@ -111,7 +115,7 @@ Note that these `template` and `svg` wrapping tags will be removed from the fina
## Nested OOB Swaps
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.
-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.
+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.
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.
diff --git a/www/content/attributes/hx-swap.md b/www/content/attributes/hx-swap.md
index d7593985..0035bf10 100644
--- a/www/content/attributes/hx-swap.md
+++ b/www/content/attributes/hx-swap.md
@@ -1,5 +1,8 @@
+++
title = "hx-swap"
+description = """\
+ The hx-swap attribute in htmx allows you to specify the 'swap strategy', or how the response will be swapped in \
+ relative to the target of an AJAX request. The default swap strategy is `innerHTML`."""
+++
The `hx-swap` attribute allows you to specify how the response will be swapped in relative to the
diff --git a/www/content/attributes/hx-sync.md b/www/content/attributes/hx-sync.md
index dab781be..812917a6 100644
--- a/www/content/attributes/hx-sync.md
+++ b/www/content/attributes/hx-sync.md
@@ -1,5 +1,6 @@
+++
title = "hx-sync"
+description = "The hx-sync attribute in htmx allows you to synchronize AJAX requests between multiple elements."
+++
The `hx-sync` attribute allows you to synchronize AJAX requests between multiple elements.
diff --git a/www/content/attributes/hx-target.md b/www/content/attributes/hx-target.md
index 135fbe23..bca36b8a 100644
--- a/www/content/attributes/hx-target.md
+++ b/www/content/attributes/hx-target.md
@@ -1,5 +1,8 @@
+++
title = "hx-target"
+description = """\
+ The hx-target attribute in htmx allows you to target a different element for swapping than the one issuing the AJAX \
+ request."""
+++
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:
(e.g. `next .error` will target the closest following sibling element with `error` class)
* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
- (e.g `previous .error` will target the closest previous sibling with `error` class)
+ (e.g. `previous .error` will target the closest previous sibling with `error` class)
Here is an example that targets a div:
diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md
index 9e1aadf4..597e77af 100644
--- a/www/content/attributes/hx-trigger.md
+++ b/www/content/attributes/hx-trigger.md
@@ -1,5 +1,10 @@
+++
title = "hx-trigger"
+description = """\
+ The hx-trigger attribute in htmx allows you to specify what triggers an AJAX request. Supported triggers include \
+ standard DOM events, custom events, polling intervals, and event modifiers. The hx-trigger attribute also allows \
+ specifying event filtering, timing controls, event bubbling, and multiple trigger definitions for fine-grained \
+ control over when and how requests are initiated."""
+++
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
(e.g. `next .error` will target the closest following sibling element with `error` class)
* `previous` resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)
* `previous <CSS selector>` scans the DOM backwards for the first element that matches the given CSS selector.
- (e.g `previous .error` will target the closest previous sibling with `error` class)
+ (e.g. `previous .error` will target the closest previous sibling with `error` class)
* `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
triggers from elements that might not be in the DOM at the point of initialization, by, for example, listening on the body,
but with a target filter for a child element
diff --git a/www/content/attributes/hx-validate.md b/www/content/attributes/hx-validate.md
index 355f7d47..6b40ac1e 100644
--- a/www/content/attributes/hx-validate.md
+++ b/www/content/attributes/hx-validate.md
@@ -1,5 +1,8 @@
+++
title = "hx-validate"
+description = """\
+ The hx-validate attribute in htmx will cause an element to validate itself using the HTML5 Validation API before it \
+ submits a request."""
+++
The `hx-validate` attribute will cause an element to validate itself by way of the [HTML5 Validation API](@/docs.md#validation)
diff --git a/www/content/attributes/hx-vals.md b/www/content/attributes/hx-vals.md
index 20065b47..df3675a4 100644
--- a/www/content/attributes/hx-vals.md
+++ b/www/content/attributes/hx-vals.md
@@ -1,5 +1,7 @@
+++
title = "hx-vals"
+description = """\
+ The hx-vals attribute in htmx allows you to add to the parameters that will be submitted with an AJAX request."""
+++
The `hx-vals` attribute allows you to add to the parameters that will be submitted with an AJAX request.
diff --git a/www/content/attributes/hx-vars.md b/www/content/attributes/hx-vars.md
index a8412ff7..c0ecc109 100644
--- a/www/content/attributes/hx-vars.md
+++ b/www/content/attributes/hx-vars.md
@@ -1,5 +1,9 @@
+++
title = "hx-vars"
+description = """\
+ The hx-vars attribute in htmx allows you to dynamically add to the parameters that will be submitted with an AJAX \
+ request. This attribute has been deprecated. We recommend you use the hx-vals attribute that provides the same \
+ functionality with safer defaults."""
+++
**NOTE: `hx-vars` has been deprecated in favor of [`hx-vals`](@/attributes/hx-vals.md), which is safer by default.**
diff --git a/www/content/docs.md b/www/content/docs.md
index d891e82b..d28c3173 100644
--- a/www/content/docs.md
+++ b/www/content/docs.md
@@ -1120,30 +1120,11 @@ htmx provides an [extensions](/extensions) mechanism that allows you to customiz
Extensions [are defined in javascript](/extensions/building) and then enabled via
the [`hx-ext`](@/attributes/hx-ext.md) attribute.
-Here is how you would install the [idiomorph](/extensions/idiomorph) extension, which allows you to use the
-[Idiomorph](https://github.com/bigskysoftware/idiomorph) DOM morphing algorithms for htmx swaps:
-
-```html
-<head>
- <script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>
-</head>
-<body hx-ext="morph">
- ...
- <button hx-post="/example" hx-swap="morph" hx-target="#content">
- Update Content
- </button>
- ...
-</body>
-```
-
-First the extension is included (it should be included *after* `htmx.js` is included), then the extension is referenced
-by name via the `hx-ext` attribute. This enables you to then use the `morph` swap.
-
### Core Extensions
htmx supports a few "core" extensions, which are supported by the htmx development team:
-* [head-support](/extensions/head-support) - support for merging head tag information (styles, etc.) in htmx requests |
+* [head-support](/extensions/head-support) - support for merging head tag information (styles, etc.) in htmx requests
* [htmx-1-compat](/extensions/htmx-1-compat) - restores htmx 1 defaults & functionality
* [idiomorph](/extensions/idiomorph) - supports the `morph` swap strategy using idiomorph
* [preload](/extensions/preload) - allows you to preload content for better performance
@@ -1153,6 +1134,56 @@ htmx supports a few "core" extensions, which are supported by the htmx developme
You can see all available extensions on the [Extensions](/extensions) page.
+### Installing Extensions
+
+The fastest way to install htmx extensions created by others is to load them via a CDN. Remember to always include the core htmx library before the extensions and [enable the extension](#enabling-extensions). For example, if you would like to use the [response-targets](/extensions/response-targets) extension, you can add this to your head tag:
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="extension-name">
+ ...
+```
+An unminified version is also available at `https://unpkg.com/htmx-ext-extension-name/dist/extension-name.js` (replace `extension-name` with the name of the extension).
+
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install htmx extensions is to simply copy them into your project. Download the extension from `https://unpkg.com/htmx-ext-extension-name` (replace `extension-name` with the name of the extension) e.g., https://unpkg.com/htmx-ext-response-targets. Then add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install htmx extensions via [npm](https://www.npmjs.com/) (replace `extension-name` with the name of the extension):
+```shell
+npm install htmx-ext-extension-name
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-extension-name/dist/extension-name.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-extension-name` via npm (replace `extension-name` with the name of the extension)
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-extension-name`; // replace `extension-name` with the name of the extension
+```
+
+Note: [Idiomorph](/extensions/idiomorph) does not follow the naming convention of htmx extensions. Use `idiomorph` instead of `htmx-ext-idiomorph`. For example, `https://unpkg.com/idiomorph` or `npm install idiomorph`.
+
+Note: Community extensions hosted outside this repository might have different installation instructions. Please check the corresponding repository for set-up guidance.
+
+### Enabling Extensions
+
+To enable an extension, add a `hx-ext="extension-name"` attribute to `<body>` or another HTML element (replace `extension-name` with the name of the extension). The extension will be applied to all child elements.
+
+The following example shows how to enable [response-targets](/extensions/response-targets) extension, allowing you to specify different target elements to be swapped based on HTTP response code.
+```html
+<body hx-ext="response-targets">
+ ...
+ <button hx-post="/register" hx-target="#response-div" hx-target-404="#not-found">
+ Register!
+ </button>
+ <div id="response-div"></div>
+ <div id="not-found"></div>
+ ...
+</body>
+```
+
### Creating Extensions
If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions/building).
@@ -1660,6 +1691,25 @@ with application security.
A full discussion of CSPs is beyond the scope of this document, but the [MDN Article](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) provide a good jumping off point
for exploring this topic.
+### CSRF Prevention
+
+The assignment and checking of CSRF tokens are typically backend responsibilities, but `htmx` can support returning the CSRF token automatically with every request using the `hx-headers` attribute. The attribute needs to be added to the element issuing the request or one of its ancestor elements. This makes the `html` and `body` elements effective global vehicles for adding the CSRF token to the `HTTP` request header, as illustrated below.
+
+```html
+<html lang="en" hx-headers='{"X-CSRF-TOKEN": "CSRF_TOKEN_INSERTED_HERE"}'>
+ :
+</html>
+```
+
+```html
+ <body hx-headers='{"X-CSRF-TOKEN": "CSRF_TOKEN_INSERTED_HERE"}'>
+ :
+ </body>
+```
+
+The above elements are usually unique in an HTML document and should be easy to locate within templates.
+
+
## Configuring htmx {#config}
Htmx has some configuration options that can be accessed either programmatically or declaratively. They are
diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md
index dd034de7..67c1aaef 100644
--- a/www/content/extensions/head-support.md
+++ b/www/content/extensions/head-support.md
@@ -13,10 +13,33 @@ The [`hx-boost`](@/attributes/hx-boost.md) attribute moved htmx closer to this w
support for extracting the `title` tag out of head elements was eventually added, but full head tag support has never been
a feature of the library. This extension addresses that shortcoming.
-## Install
+## Installing
-```html
-<script src="https://unpkg.com/htmx-ext-head-support@2.0.1/head-support.js"></script>
+The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-head-support@2.0.2" integrity="sha384-cvMqHzjCJsOHgGuyB3sWXaUSv/Krm0BdzjuI1rtkjCbL1l1oHJx+cHyVRJhyuEz0" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="head-support">
+...
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js.
+
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `head-support` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-head-support`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install `head-support` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-head-support
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-head-support/dist/head-support.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-head-support` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-head-support`;
```
## Usage
diff --git a/www/content/extensions/htmx-1-compat.md b/www/content/extensions/htmx-1-compat.md
index 967377f7..2e157c02 100644
--- a/www/content/extensions/htmx-1-compat.md
+++ b/www/content/extensions/htmx-1-compat.md
@@ -4,11 +4,33 @@ title = "htmx 1.x Compatibility Extension"
The `htmx-1-compat` extension allows you to almost seamlessly upgrade from htmx 1.x to htmx 2.
-## Install
+## Installing
+
+The fastest way to install `htmx-1-compat` is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-htmx-1-compat@2.0.0" integrity="sha384-lcvVWaNjF5zPPUeeWmC0OkJ2MLqoWLlkAabuGm+EuMSTfGo5WRyHrNaAp0cJr9Pg" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="htmx-1-compat">
+...
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js.
-```html
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `htmx-1-compat` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-htmx-1-compat`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
-<script src="https://unpkg.com/htmx-ext-htmx-1-compat@2.0.0/htmx-1-compat.js"></script>
+For npm-style build systems, you can install `htmx-1-compat` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-htmx-1-compat
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-htmx-1-compat` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-htmx-1-compat`;
```
## What it covers
diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md
index ef7c84f1..bd75dad7 100644
--- a/www/content/extensions/idiomorph.md
+++ b/www/content/extensions/idiomorph.md
@@ -10,10 +10,32 @@ much smoother transition between the two states.
You can use the idiomorph morphing algorithm as a [swapping](@attributes/hx-swap) strategy by including the idiomorph
extension.
-## Install
+## Installing
-```html
-<script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph-ext.min.js"></script>
+The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/idiomorph@0.3.0" integrity="sha384-tg/2Ca9U/RohyxmGCb8qJVR3j9cswtKbdRSXOaPX/aDDOW1bfbeyV+7G9ifYF4bC" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="morph">
+```
+An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js.
+
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `idiomorph` is to simply copy it into your project. Download the extension from `https://unpkg.com/idiomorph`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install `idiomorph` via [npm](https://www.npmjs.com/):
+```shell
+npm install idiomorph
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/idiomorph/dist/idiomorph.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `idiomorph` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `idiomorph`;
```
## Usage
diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md
index fd0fda9f..9afa70e1 100644
--- a/www/content/extensions/preload.md
+++ b/www/content/extensions/preload.md
@@ -10,10 +10,33 @@ behavior to fit your applications needs and use cases.
too many resources can negatively impact your visitors' bandwidth and your server performance by initiating too many
unused requests. Use this extension carefully!
-## Install
+## Installing
+
+The fastest way to install `preload` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-preload@2.1.0" integrity="sha384-fkzubQiTB69M7XTToqW6tplvxAOJkqPl5JmLAbumV2EacmuJb8xEP9KnJafk/rg8" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="preload">
+...
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-preload/dist/preload.js.
-```html
-<script src="https://unpkg.com/htmx-ext-preload@2.1.0/preload.js"></script>
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `preload` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-preload`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install `preload` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-preload
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-preload/dist/preload.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-preload` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-preload`;
```
## Usage
@@ -23,7 +46,6 @@ and `hx-get` elements you want to preload. By default, resources will be loaded
giving your application a roughly 100-200ms head start on serving responses. See configuration below for other options.
```html
-
<body hx-ext="preload">
<h1>What Works</h2>
<a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
diff --git a/www/content/extensions/response-targets.md b/www/content/extensions/response-targets.md
index c0306d50..8b2ac954 100644
--- a/www/content/extensions/response-targets.md
+++ b/www/content/extensions/response-targets.md
@@ -22,10 +22,33 @@ The value of each attribute can be:
* `previous <CSS selector>` which will scan the DOM backwards for the first element that matches the given CSS selector.
(e.g `previous .error` will target the closest previous sibling with `error` class)
-## Install
+## Installing
+
+The fastest way to install `response-targets` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="response-targets">
+...
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js.
-```html
-<script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js"></script>
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `response-targets` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-response-targets`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
+
+For npm-style build systems, you can install `response-targets` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-response-targets
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-response-targets/dist/response-targets.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-response-targets` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-response-targets`;
```
## Configure (optional)
diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md
index c5939bcf..bf1ae2e9 100644
--- a/www/content/extensions/sse.md
+++ b/www/content/extensions/sse.md
@@ -24,11 +24,32 @@ Use the following attributes to configure how SSE connections behave:
* `sse-close=<message-name>` - To close the EventStream gracefully when that message is received. This might be helpful
if you want to send information to a client that will eventually stop.
-## Install
+## Installing
+
+The fastest way to install `sse` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-sse@2.2.2" integrity="sha384-Y4gc0CK6Kg+hmulDc6rZPJu0tqvk7EWlih0Oh+2OkAi1ZDlCbBDCQEE2uVk472Ky" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="sse">
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-sse/dist/sse.js.
-```html
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `sse` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-sse`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
-<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script>
+For npm-style build systems, you can install `sse` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-sse
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-sse/dist/sse.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-sse` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-sse`;
```
## Usage
diff --git a/www/content/extensions/ws.md b/www/content/extensions/ws.md
index d35ea7e8..3e247783 100644
--- a/www/content/extensions/ws.md
+++ b/www/content/extensions/ws.md
@@ -18,11 +18,32 @@ Use the following attributes to configure how WebSockets behave:
event
or the event specified by [`hx-trigger`])
-## Install
+## Installing
+
+The fastest way to install `ws` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
+```HTML
+<head>
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+ <script src="https://unpkg.com/htmx-ext-ws@2.0.2" integrity="sha384-vuKxTKv5TX/b3lLzDKP2U363sOAoRo5wSvzzc3LJsbaQRSBSS+3rKKHcOx5J8doU" crossorigin="anonymous"></script>
+</head>
+<body hx-ext="ws">
+```
+An unminified version is also available at https://unpkg.com/htmx-ext-ws/dist/ws.js.
-```html
+While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `ws` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-ws`, add it to the appropriate directory in your project and include it where necessary with a `<script>` tag.
-<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
+For npm-style build systems, you can install `ws` via [npm](https://www.npmjs.com/):
+```shell
+npm install htmx-ext-ws
+```
+After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-ws/dist/ws.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code.
+
+If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
+- Install `htmx.org` and `htmx-ext-ws` via npm
+- Import both packages to your `index.js`
+```JS
+import `htmx.org`;
+import `htmx-ext-ws`;
```
## Usage
diff --git a/www/content/server-examples.md b/www/content/server-examples.md
index 280dc711..2eea042e 100644
--- a/www/content/server-examples.md
+++ b/www/content/server-examples.md
@@ -131,12 +131,14 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/paultuckey/example-todo-app-rust-htmx>
## Scala
-
+
### http4s
+
- <https://github.com/martinprobson/http4s-htmx-demo>
- <https://github.com/eikek/htmx4s>
### zio-http
+
- <https://github.com/rockthejvm/scalatags-htmx-demo>
## Kotlin
@@ -165,7 +167,6 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/michalsn/codeigniter-htmx-demo>
-
### Laravel
- <https://spirofloropoulos.com/laravel-htmx-hard-mode-1.html>
@@ -226,3 +227,7 @@ These examples may make it a bit easier to get started using htmx with your plat
- <https://github.com/danieleteti/delphi-dmvcframework-htmx-todo>
- <https://github.com/danieleteti/delphimvcframework/tree/master/samples/htmx>
+
+## FreePascal with Pas2JS
+
+- <https://github.com/zendrael/create_htmx_pascal_app> \ No newline at end of file