ElementaryHTMX: Hypertext web apps with Swift

Ergonomic HTMX extensions for Elementary

import Elementary
import ElementaryHTMX

// first-class support for all HTMX attributes
form(.hx.post("/items"), .hx.target("#list"), .hx.swap(.outerHTML)) {
    input(.type(.text), .name("item"), .value("New Item"))
    input(.type(.submit), .value("Add Item"))
}

div {
    button(.hx.delete("items/\(item.id)")) { "❌" }
    item.text
}

MyFragment(items: items)
    .attributes(.hx.swapOOB(.outerHTML, "#list"))

import Elementary
import ElementaryHTMXSSE

// HTMX Server Send Events extension
div(.hx.ext(.sse), .sse.connect("/time"), .sse.swap("message")) {
    Date()
}

import Elementary
import ElementaryHTMXWS

// HTMX WebSockets extension
div(.hx.ext(.ws), .ws.connect("/echo")) {
    form(.ws.send) {
        input(.type(.text), .name("message"))
        button { "Send" }
    }
    div(.id("echo")) {}
}

import Elementary
import ElementaryHyperscript

// Hyperscript extension
button(.hyperscript("on click send hello to <form />")) {
    "Send"
}

Play with it

Check out the Hummingbird example app.

Check out the Vapor example app.

Documentation

The package brings the .hx syntaxt to all HTMLElements - providing a rich API for most HTMX attributes.

There is also an ElementaryHTMXSSE module that adds the .sse syntax for the Server Sent Events extensions, as well as ElementaryHTMXWS to add the .ws syntax for the WebSockets extensions.

The package also supports the Hyperscript _ attribute as .hyperscript.

Future directions

• Add module (or separate package?) for HTMX Request and Response headers

PRs welcome.