HTMX

#HTMX

HTMX is a lightweight JavaScript library that enables dynamic client-side behavior using HTML attributes. It supports features such as AJAX, CSS transitions, WebSockets, and Server-Sent Events — without writing JavaScript.

htmx is a library that allows you to access modern browser features directly from HTML, rather than using

To understand htmx, first let’s take a look at an anchor tag:

<a href="/blog">Blog</a>

This anchor tag tells a browser:

> "When a user clicks on this link, issue an HTTP GET request to ‘/blog’ and load the response content into the browser window".

With that in mind, consider the following bit of HTML:

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>

This tells htmx:

> “When a user clicks on this button, issue an HTTP POST request to ‘/clicked’ and use the content from the response to replace the element with the id parent-div in the DOM”

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, using Hypertext As The Engine Of Application State without even needing to really understand that concept.

#Ktor

Ktor provides experimental, first-class support for HTMX through a set of shared modules that simplify integration in both server and client contexts. These modules offer tools for working with HTMX headers, defining HTML attributes using Kotlin DSLs, and handling HTMX-specific routing logic on the server.

Ktor’s HTMX integration provides:

• HTMX-aware routing for handling HTMX requests based on headers.
• HTML DSL extensions to generate HTMX attributes in Kotlin.
• HTMX header constants and values to eliminate string literals.

Ktor’s HTMX support is available across three experimental modules:

All APIs are marked with @ExperimentalKtorApi and require opt-in via @OptIn(ExperimentalKtorApi::class).

For more information, see HTMX integration

#AJAX

The core of htmx is a set of attributes that allow you to issue AJAX requests directly from HTML:

Each of these attributes takes a URL to issue an AJAX request to.

The ktor-htmx-html module adds extension functions to Kotlin’s HTML DSL, allowing you to add HTMX attributes directly to HTML elements.

The ktor-server-htmx module provides HTMX-aware routing through the hx DSL block

Here’s an example Ktor route with and hx-get request:

route("hello") {

    // Regular route (both HTMX and non-HTMX requests)
    get {

        call.respondHtml {
            head {
                script {
                    src = "https://unpkg.com/htmx.org@2.0.7"
                }
            }
            body {
                button {
                    attributes.hx {
                        get = "/hello"
                    }
                    +"Hello HTMX"
                }
            }
        }
    }

    // Only matches HTMX requests (HX-Request header is present)
    hx.get {
        call.respondText("HTMX response!")
    }
}

HTMX-aware routing allow your application to respond differently depending on the HTMX headers sent by the client:

routing {
    route("api") {
        // Regular route (both HTMX and non-HTMX requests)
        get {
            call.respondText("Regular response")
        }

        // Only matches HTMX requests (HX-Request header is present)
        hx.get {
            call.respondText("HTMX response")
        }

        // Matches HTMX requests with specific target
        hx {
            target("#result-div") {
                get {
                    call.respondText("Response for #result-div")
                }
            }

            // Matches HTMX requests with specific trigger
            trigger("#load-button") {
                get {
                    call.respondText("Response for #load-button clicks")
                }
            }
        }
    }
}