Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,28 @@ jobs:
test_suite:
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v4
- uses: actions/checkout@v6
- name: Use Node.js
uses: actions/setup-node@v4
uses: actions/setup-node@v6
with:
node-version: '20.x'
- run: npm ci
- run: npm test
codeql-scan:
name: CodeQL Security Scan
runs-on: ubuntu-22.04
permissions:
security-events: write
actions: read
contents: read
steps:
- name: Checkout repository
uses: actions/checkout@v6

- name: Initialize CodeQL
uses: github/codeql-action/init@v4
with:
languages: javascript

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v4
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
# Changelog

## [2.0.7] - 2025-10-24
## [2.0.8] - 2025-10-24

* [Updated](https://github.com/bigskysoftware/htmx/commit/b9336a96fbdcf28550699971dc2218a90c7a4e01) `parseHTML` to use to use the (unfortunately named) [`Document.parseHTMLUnsafe()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/parseHTMLUnsafe_static)
method for better Web Components support
* [Added](https://github.com/bigskysoftware/htmx/commit/83a1449a89b1fcd1c1655039ede02d74d61e4800) `pushURL` option to the `htmx.ajax()` API
* [Fixed](https://github.com/bigskysoftware/htmx/commit/cd045c3e0eb31776a80e3a4b4c74e37d0631c1f1) `hx-sync` and `htmx:abort` within the Shadow Dom [Issue 3419](https://github.com/bigskysoftware/htmx/issues/3419)
* [Fixed](https://github.com/bigskysoftware/htmx/commit/04d6c7249b7fd7b8518ddca92e7a70fdcc651b34) a long-standing bug in history support with respect to relative paths [Issue 3449](https://github.com/bigskysoftware/htmx/issues/3449)
* Once again, this is a release mainly done by @MichaelWest22's heroic work, thank you!

## [2.0.7] - 2025-09-08

Expand Down
5 changes: 5 additions & 0 deletions www/content/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,11 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
<img class="dark-visible" src="/img/exchange-rate-api-dark.png" style="width:100%;max-width:250px">
</a>
</div>
<div>
<a data-github-account="mersano" href="https://instant-famous.com/">
<img src="/img/rsz_instant_famous.png" style="width:100%;max-width:250px">
</a>
</div>
</div>

<div style="text-align: center;font-style: italic;margin-top: 26px;">ʕ •ᴥ•ʔ made in montana</div>
12 changes: 6 additions & 6 deletions www/content/docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ within the language:
* Now any element, not just the entire window, can be the target for update by the request

Note that when you are using htmx, on the server side you typically respond with *HTML*, not *JSON*. This keeps you firmly
within the [original web programming model](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm),
within the [original web programming model](https://roy.gbiv.com/pubs/dissertation/rest_arch_style.htm),
using [Hypertext As The Engine Of Application State](https://en.wikipedia.org/wiki/HATEOAS)
without even needing to really understand that concept.

Expand All @@ -101,7 +101,7 @@ It's worth mentioning that, if you prefer, you can use the [`data-`](https://htm
<a data-hx-post="/click">Click Me!</a>
```

If you understand the concepts around htmx and want to see the quirks of the library, please see our
If you understand the concepts around htmx and want to see the quirks of the library, please see our
[QUIRKS](@/QUIRKS.md) page.

## 1.x to 2.x Migration Guide
Expand Down Expand Up @@ -1163,7 +1163,7 @@ If you are using a bundler to manage your javascript (e.g. Webpack, Rollup):
- 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
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://cdn.jsdelivr.net/npm/idiomorph` or `npm install idiomorph`.
Expand Down Expand Up @@ -1379,7 +1379,7 @@ Here is an example of the code in action:

## Scripting {#scripting}

While htmx encourages a hypermedia approach to building web applications, it offers many options for client scripting. Scripting is included in the REST-ful description of web architecture, see: [Code-On-Demand](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7). As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach to scripting in your web application:
While htmx encourages a hypermedia approach to building web applications, it offers many options for client scripting. Scripting is included in the REST-ful description of web architecture, see: [Code-On-Demand](https://roy.gbiv.com/pubs/dissertation/rest_arch_style.htm#sec_5_1_7). As much as is feasible, we recommend a [hypermedia-friendly](/essays/hypermedia-friendly-scripting) approach to scripting in your web application:

* [Respect HATEOAS](/essays/hypermedia-friendly-scripting#prime_directive)
* [Use events to communicate between components](/essays/hypermedia-friendly-scripting#events)
Expand Down Expand Up @@ -1697,7 +1697,7 @@ 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.
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.

Note: `hx-boost` does not update the `<html>` or `<body>` tags; if using this feature with `hx-boost`, make sure to include the CSRF token on an element that _will_ get replaced. Many web frameworks support automatically inserting the CSRF token as a hidden input in HTML forms. This is encouraged whenever possible.

Expand All @@ -1713,7 +1713,7 @@ Note: `hx-boost` does not update the `<html>` or `<body>` tags; if using this fe
</body>
```

The above elements are usually unique in an HTML document and should be easy to locate within templates.
The above elements are usually unique in an HTML document and should be easy to locate within templates.


## Configuring htmx {#config}
Expand Down
6 changes: 6 additions & 0 deletions www/content/essays/alternatives.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,12 @@ a single, tidy package that is smaller than htmx.

You can see many examples of Datastar in action [here](https://data-star.dev/examples).

## Nomini

[Nomini](https://github.com/nonnorm/nomini) is a hypermedia implementation that embraces writing JavaScript in the original and intended way, as a simple enhancement to mostly-static pages. Its goal is to add a minimal layer of LoB on top of HTML to allow for powerful server-driven web apps with easily implemented client-side features. Additionally, it is currently the smallest library existing that gives both reactive variables and partial page swaps (~2.8k minified, ~1.4k minzipped).

In essence, Nomini is a tiny reimplementation of Datastar or a combination of Fixi and Alpine.js, intended to be a minimal, pragmatic building block for reactive server-driven UIs.

## Alpine-ajax

Speaking of Alpine (which is a common library to use in conjunction with htmx) you should look at
Expand Down
1 change: 1 addition & 0 deletions www/content/essays/template-fragments.md
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ Here are some known implementations of the fragment concept:
* [Giraffe.ViewEngine.Htmx](https://github.com/bit-badger/Giraffe.Htmx/tree/main/src/ViewEngine.Htmx)
* Rust
* [MiniJinja](https://docs.rs/minijinja/latest/minijinja/struct.State.html#method.render_block)
* [Askama](https://askama.readthedocs.io/en/stable/template_syntax.html#block-fragments)
* Raku
* [Cro Templates](https://github.com/croservices/cro-website/blob/main/docs/reference/cro-webapp-template-syntax.md#fragments)

Expand Down
Loading