KHTMX DSL

KHTMX DSL is a multi-platform Kotlin DSL which extends the kotlinx HTML DSL to support HTMX. It currently supports Kotlin/JVM and Kotlin/JS, but more targets are planned.

Getting Started

The DSL library provides extensions which can be used seamlessly within the HTML DSL. For example, in Kotlin/JVM:

createHTMLDocument().html {
    head {
    }
    body {
        span {
            hxGet("/path")
        }
    }
}

A pure-kotlin (common) usage can look like:

buildString {
    appendHTML(false).apply {
        span {
            hxGet("/path")
        }
    }
}

Templates

Templates can be declared to facilitate reuse. The htmxTemplate function of type T when is a higher-order function that produces a function which takes a single parameter T and allows you to use it in an html/htmx snippet. For example:

val template = htmxTemplate<String> {
    span {
        +it
    }
}
val output = buildString {
    appendHTML(false).apply {
        template.render(this, "Hello")
    }
}

Templates can be composed.

val itemTemplate = htmxTemplate<String> {
    li { +it }
}
val listTemplate = htmxTemplate<List<String>> {
    ul {
        it.forEach {
            template(itemTemplate, it)
        }
    }
}

API Support

Core Attributes	Supported	Example
hx-get	✅	Example
hx-post	✅	Example
hx-on*	✅	Example
hx-push-url	✅	Example
hx-select	✅	Example
hx-select-oob	✅	Example
hx-swap	✅	Example
hx-swap-oob	✅	Example
hx-target	✅	Example
hx-trigger	✅	Example
hx-vals	✅	Example

Additional Attributes	Supported	Example
hx-boost	✅	Example
hx-confirm	❌
hx-delete	✅	Example
hx-disable	❌
hx-disabled-elt	❌
hx-disinherit	❌
hx-encoding	❌
hx-ext	❌
hx-headers	❌
hx-history	❌
hx-history-elt	❌
hx-include	❌
hx-indicator	❌
hx-inherit	❌
hx-params	✅
hx-patch	✅
hx-preserve	❌
hx-prompt	❌
hx-put	✅
hx-replace-url	❌
hx-request	❌
hx-sync	❌
hx-validate	❌
hx-vars	❌

Constants	Supported
CSS Classes	✅
HTTP Headers	✅
Events	✅

HTMX Features	Supported
Configuration	❌