ElementaryHTMX: Hypertext web apps with Swift

Ergonomic HTMX extensions for Elementary

Important

ElementaryHTMX currently targets the HTMX v2 API. Use the numbered modules (e.g. ElementaryHTMX2) to pin a specific HTMX version.

See this issue for details about supporting the recently released HTMX v4.

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

// server-sent swap commands with <hx-partial> (requires htmx 2.0.11+)
hxPartial(.hx.target("#notifications")) {
    "3 new messages"
}

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, as well as the hxPartial element for <hx-partial> (requires htmx 2.0.11 or later).

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.

HTMX versions

Each supported HTMX major version has its own numbered modules:

HTMX	Core	SSE	WebSockets
v2	ElementaryHTMX2	ElementaryHTMX2SSE	ElementaryHTMX2WS

The unnumbered ElementaryHTMX, ElementaryHTMXSSE and ElementaryHTMXWS modules re-export the current default version (v2), so existing imports keep working. Depend on a numbered module if you want to stay on a specific HTMX version when the default changes.

// Package.swift
.product(name: "ElementaryHTMX2", package: "elementary-htmx")

import Elementary
import ElementaryHTMX2

Hyperscript

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

Future directions

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

PRs welcome.