Home

Awesome

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")) {}
}

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.

Future directions

PRs welcome.