hx
hx - Gleam HTMX Bindings
Type-safe Gleam bindings for HTMX attributes and events.
Links
Basic Usage
import hx
import lustre/element/html
html.button([
hx.get("/api/users"),
hx.target(hx.CssSelector("#results")),
hx.swap(hx.InnerHTML),
], [html.text("Load Users")])
Types
Event triggers with optional modifiers.
Events can be combined with modifiers like with_delay, with_throttle, etc.
pub opaque type Event
Modifiers that change event behavior.
pub opaque type EventModifier
Configuration options for the intersect event.
pub type IntersectConfig {
Root(selector: String)
Threshold(value: Float)
}
Constructors
-
Root(selector: String)Specify the root element for intersection observation
-
Threshold(value: Float)Intersection threshold (0.0 to 1.0)
Queue behavior for synchronized requests.
Used with hx.sync to control request queuing.
pub type Queue {
First
Last
All
}
Constructors
-
FirstProcess the first request, ignore subsequent
-
LastProcess the last request, ignore previous
-
AllProcess all requests
Scroll position specification for swap modifiers.
pub type ScrollPosition {
Top
Bottom
}
Constructors
-
TopScroll to the top
-
BottomScroll to the bottom
Scroll target specification for swap modifiers.
pub type ScrollTarget {
TargetScroll(ScrollPosition)
ElementScroll(selector: String, position: ScrollPosition)
WindowScroll(ScrollPosition)
}
Constructors
-
TargetScroll(ScrollPosition)Scroll the swap target element
-
ElementScroll(selector: String, position: ScrollPosition)Scroll a specific element by CSS selector
-
WindowScroll(ScrollPosition)Scroll the window
Extended CSS selectors for targeting elements.
HTMX extends standard CSS selectors with additional keywords for more flexible targeting.
pub type Selector {
Selector(selector: String)
Document
Window
Closest(selector: String)
Find(selector: String)
Next(selector: String)
Previous(selector: String)
This
}
Constructors
-
Selector(selector: String)Standard CSS selector (e.g., “#id”, “.class”, “div > p”)
-
DocumentTarget the document
-
WindowTarget the window
-
Closest(selector: String)Find the closest ancestor matching the selector
-
Find(selector: String)Find the first descendant matching the selector
-
Next(selector: String)Find the next sibling matching the selector
-
Previous(selector: String)Find the previous sibling matching the selector
-
ThisTarget the element itself
Show target specification for swap modifiers.
pub type ShowTarget {
TargetShow(ScrollPosition)
ElementShow(selector: String, position: ScrollPosition)
WindowShow(ScrollPosition)
}
Constructors
-
TargetShow(ScrollPosition)Show the swap target in viewport
-
ElementShow(selector: String, position: ScrollPosition)Show a specific element in viewport
-
WindowShow(ScrollPosition)Show in window viewport
Different ways content can be swapped in the DOM.
Controls how the response content replaces existing content.
pub type Swap {
InnerHTML
OuterHTML
TextContent
Afterbegin
Beforebegin
Beforeend
Afterend
Delete
SwapNone
}
Constructors
-
InnerHTMLReplace the inner HTML of the target element
-
OuterHTMLReplace the entire target element
-
TextContentReplace the text content of the target element
-
AfterbeginInsert inside the target, before its first child
-
BeforebeginInsert before the target element (as a sibling)
-
BeforeendInsert inside the target, after its last child
-
AfterendInsert after the target element (as a sibling)
-
DeleteDelete the target element
-
SwapNoneDo not swap content
Options for modifying swap behavior.
These modifiers can be used with swap_with and swap_oob_with.
pub type SwapConfig {
Transition(Bool)
SwapTiming(duration.Duration)
Settle(duration.Duration)
IgnoreTitle(Bool)
ScrollTo(ScrollTarget)
Show(ShowTarget)
FocusScroll(Bool)
}
Constructors
-
Transition(Bool)Enable/disable view transitions
-
SwapTiming(duration.Duration)Delay before swapping content
-
Settle(duration.Duration)Duration to wait after swap before settling
-
IgnoreTitle(Bool)Whether to ignore title updates from response
-
ScrollTo(ScrollTarget)Scroll configuration
-
Show(ShowTarget)Show configuration
-
FocusScroll(Bool)Whether to scroll to focused element
Synchronization options for coordinating AJAX requests.
Controls how multiple requests to the same element are handled.
pub type Sync {
Default(Selector)
Drop(Selector)
Abort(Selector)
Replace(Selector)
Queue(Selector, Queue)
}
Constructors
-
Default(Selector)Use default behavior (drop new requests if one is in flight)
-
Drop(Selector)Explicitly drop (ignore) new requests if one is in flight
-
Abort(Selector)Drop new requests OR abort current request if a new one comes in
-
Replace(Selector)Abort current request and replace it with the new one
-
Queue requests with specified strategy
Values
pub fn boost(set: Bool) -> attribute.Attribute(a)
Progressive enhancement for links and forms using AJAX.
pub fn change() -> Event
Creates a change event (fires when an input value changes).
pub fn confirm(confirm_text: String) -> attribute.Attribute(a)
Shows a confirmation dialog before making a request.
pub fn delete(url url: String) -> attribute.Attribute(a)
Issues a DELETE request to the given URL when the element is triggered.
pub fn disable() -> attribute.Attribute(a)
Disables HTMX processing for an element and its children.
pub fn disable_elt(
extended_css_selectors: List(Selector),
) -> attribute.Attribute(a)
Disables elements during AJAX requests.
Examples
// Disable specific buttons
hx.disable_elt([hx.Selector("button")])
// Disable multiple element types
hx.disable_elt([
hx.Selector("input[type='submit']"),
hx.Selector("button")
])
pub fn disinherit(
attributes: List(String),
) -> attribute.Attribute(a)
Controls which attributes are not inherited from parent elements.
pub fn disinherit_all() -> attribute.Attribute(a)
Prevents inheritance of all HTMX attributes from ancestors.
pub fn dom_content_loaded() -> Event
Creates a DOMContentLoaded event that fires when the initial HTML document is loaded.
pub fn encoding(encoding: String) -> attribute.Attribute(a)
Sets the encoding type for the request (e.g., “multipart/form-data”).
pub fn ext(ext: List(String)) -> attribute.Attribute(a)
Enables HTMX extensions for an element.
pub fn get(url url: String) -> attribute.Attribute(a)
Issues a GET request to the given URL when the element is triggered.
pub fn headers(
headers: json.Json,
compute_value: Bool,
) -> attribute.Attribute(a)
Adds custom headers to the AJAX request.
pub fn history(should_be_saved: Bool) -> attribute.Attribute(a)
Controls if requests from this element update browser history.
pub fn history_elt() -> attribute.Attribute(a)
Marks the element to snapshot for history restoration.
pub fn htmx_abort() -> Event
Listener event to cancel ongoing requests.
pub fn htmx_after_on_load() -> Event
Triggered after an AJAX onload has finished.
pub fn htmx_after_process_node() -> Event
Triggered after processing a DOM node.
pub fn htmx_after_request() -> Event
Triggered after an AJAX request completes.
pub fn htmx_after_settle() -> Event
Triggered after the settling phase completes.
pub fn htmx_after_swap() -> Event
Triggered after content is swapped into the DOM.
pub fn htmx_bad_response_url() -> Event
Triggered when a bad response URL is encountered.
pub fn htmx_before_cleanup_element() -> Event
Triggered before cleaning up an element.
pub fn htmx_before_history_save() -> Event
Triggered before a history save occurs.
pub fn htmx_before_history_update() -> Event
Triggered before a history update occurs.
pub fn htmx_before_on_load() -> Event
Triggered before any response processing.
pub fn htmx_before_process_node() -> Event
Triggered before processing a DOM node.
pub fn htmx_before_request() -> Event
Triggered before an AJAX request is made.
pub fn htmx_before_send() -> Event
Triggered right before sending the request.
pub fn htmx_before_settle() -> Event
Triggered before the settling phase begins.
pub fn htmx_before_swap() -> Event
Triggered before content is swapped into the DOM.
pub fn htmx_before_transition() -> Event
Triggered before View Transition API wraps a swap.
pub fn htmx_config_request() -> Event
Triggered before a request is configured.
pub fn htmx_confirm() -> Event
Triggered before every request trigger, allowing cancellation or async confirmation.
pub fn htmx_eval_disallowed_error() -> Event
Triggered when eval is disallowed.
pub fn htmx_event_filter_error() -> Event
Triggered when an event filter error occurs.
pub fn htmx_history_cache_error() -> Event
Triggered when a history cache error occurs.
pub fn htmx_history_cache_hit() -> Event
Triggered when a history cache hit occurs.
pub fn htmx_history_cache_miss() -> Event
Triggered when a history cache miss occurs.
pub fn htmx_history_cache_miss_load() -> Event
Triggered when loading after a history cache miss.
pub fn htmx_history_cache_miss_load_error() -> Event
Triggered when a history cache miss load error occurs.
pub fn htmx_history_item_created() -> Event
Triggered when a history item is created.
pub fn htmx_history_restore() -> Event
Triggered when history is restored.
pub fn htmx_invalid_path() -> Event
Triggered when an invalid path is encountered.
pub fn htmx_load() -> Event
Triggered when new content is loaded into the DOM.
pub fn htmx_on_load_error() -> Event
Triggered when an onload error occurs.
pub fn htmx_oob_after_swap() -> Event
Triggered after an out-of-band swap.
pub fn htmx_oob_before_swap() -> Event
Triggered before an out-of-band swap.
pub fn htmx_oob_error_no_target() -> Event
Triggered when an OOB swap target is not found.
pub fn htmx_prompt() -> Event
Triggered when a prompt is shown.
pub fn htmx_pushed_into_history() -> Event
Triggered when an element is pushed into history.
pub fn htmx_replaced_in_history() -> Event
Triggered when an element is replaced in history.
pub fn htmx_response_error() -> Event
Triggered when an HTTP error response is received.
pub fn htmx_restored() -> Event
Triggered when the page is restored from history.
pub fn htmx_send_abort() -> Event
Triggered when a request is aborted.
pub fn htmx_send_error() -> Event
Triggered when a network error occurs.
pub fn htmx_session_storage_test() -> Event
Triggered during session storage test.
pub fn htmx_swap_error() -> Event
Triggered when an error occurs during swap.
pub fn htmx_syntax_error() -> Event
Triggered when a syntax error occurs.
pub fn htmx_target_error() -> Event
Triggered when a target error occurs.
pub fn htmx_timeout() -> Event
Triggered when a request times out.
pub fn htmx_trigger() -> Event
Triggered when a trigger is activated.
pub fn htmx_validate_url() -> Event
Validates the URL before making the request.
pub fn htmx_validation_failed() -> Event
Triggered when validation fails.
pub fn htmx_validation_halted() -> Event
Triggered when validation is halted.
pub fn htmx_validation_validate() -> Event
Triggered before validation runs.
pub fn htmx_xhr_abort() -> Event
Triggered when an XHR request is aborted.
pub fn htmx_xhr_loadend() -> Event
Triggered when an XHR request ends.
pub fn htmx_xhr_loadstart() -> Event
Triggered when an XHR request starts.
pub fn htmx_xhr_progress() -> Event
Triggered during XHR request progress.
pub fn hyper_script(script: String) -> attribute.Attribute(a)
Adds hyperscript behavior to an element using the “_” attribute.
pub fn include(
extended_css_selector: Selector,
) -> attribute.Attribute(a)
Includes additional element values in the request.
pub fn indicator(selector: Selector) -> attribute.Attribute(a)
Shows loading indicators during AJAX requests.
Supports extended CSS selectors including closest, this, etc.
pub fn inherit(
attributes: List(String),
) -> attribute.Attribute(a)
Explicitly inherits specific attributes from parent elements.
pub fn inherit_all() -> attribute.Attribute(a)
Inherits all HTMX attributes from parent elements.
pub fn input() -> Event
Creates an input event (fires on every character typed).
pub fn intersect(config: List(IntersectConfig)) -> Event
Creates an intersect event that triggers when the element enters the viewport.
Supports configuration options for root element, threshold, and root margin.
Official Intersect Documentation
Examples
// Basic intersect
hx.intersect([])
// With threshold
hx.intersect([hx.Threshold(0.5)])
// With root element and threshold
hx.intersect([hx.Root("#container"), hx.Threshold(0.75)])
pub fn intersect_once(config: List(IntersectConfig)) -> Event
Creates an intersect event that fires only once when entering the viewport.
Official Intersect Documentation
Examples
// Basic intersect once
hx.intersect_once([])
// With threshold, fires once
hx.intersect_once([hx.Threshold(0.5)])
pub fn load() -> Event
Creates a load event that fires when the element loads.
pub fn no_replace_url() -> attribute.Attribute(a)
Prevents URL replacement in the browser history.
pub fn on(
event_name: String,
script: String,
) -> attribute.Attribute(a)
Handles events with inline scripts on elements using the hx-on attribute.
This is an HTMX 2.x feature that allows inline event handling.
Examples
hx.on("click", "alert('Clicked!')")
hx.on("htmx:afterSwap", "console.log('Swapped')")
pub fn params(params: String) -> attribute.Attribute(a)
Filters which parameters are included in the request.
pub fn patch(url url: String) -> attribute.Attribute(a)
Issues a PATCH request to the given URL when the element is triggered.
pub fn post(url url: String) -> attribute.Attribute(a)
Issues a POST request to the given URL when the element is triggered.
pub fn preserve() -> attribute.Attribute(a)
Preserves element state between requests (e.g., iframes, videos).
pub fn prompt(prompt_text: String) -> attribute.Attribute(a)
Shows an input prompt before submitting the request.
pub fn push_url(bool: Bool) -> attribute.Attribute(a)
Pushes a URL into the browser’s location bar and history.
pub fn put(url url: String) -> attribute.Attribute(a)
Issues a PUT request to the given URL when the element is triggered.
pub fn replace_url() -> attribute.Attribute(a)
Replaces the current URL in the browser history.
pub fn replace_url_with(url: String) -> attribute.Attribute(a)
Replaces the current URL with the specified URL.
pub fn request(request: String) -> attribute.Attribute(a)
Configures the AJAX request (timeout, credentials, etc.).
pub fn revealed() -> Event
Creates a revealed event that triggers when the element is scrolled into the viewport.
pub fn select(css_selector: String) -> attribute.Attribute(a)
Selects a subset of the server response to process.
pub fn select_oob(
css_selectors: List(String),
) -> attribute.Attribute(a)
Selects content from a response to be swapped in out-of-band.
Accepts a comma-separated list of CSS selectors for elements to swap out-of-band.
pub fn submit() -> Event
Creates a submit event (fires when a form is submitted).
pub fn swap(swap swap: Swap) -> attribute.Attribute(a)
Controls how content is swapped into the DOM.
Examples
// Basic swap strategies
hx.swap(hx.InnerHTML)
hx.swap(hx.OuterHTML)
hx.swap(hx.Afterend)
pub fn swap_oob(
swap swap: Swap,
css_selector css_selector: option.Option(String),
) -> attribute.Attribute(a)
Allows you to swap content “out of band” - updating other elements in the response.
pub fn swap_oob_with(
swap swap: Swap,
css_selector css_selector: option.Option(String),
config modifier: SwapConfig,
) -> attribute.Attribute(a)
Allows you to swap content “out of band” with configuration options.
pub fn swap_with(
swap swap: Swap,
config config: SwapConfig,
) -> attribute.Attribute(a)
Controls how content is swapped into the DOM with additional configuration options.
Examples
// Swap with transition
hx.swap_with(hx.InnerHTML, hx.Transition(True))
// Swap with timing
hx.swap_with(hx.OuterHTML, hx.SwapTiming(duration.milliseconds(500)))
pub fn sync(strategy: Sync) -> attribute.Attribute(a)
Synchronizes AJAX requests between elements.
Examples
// Use default drop behavior (strategy is optional)
hx.sync(hx.Default(hx.Closest("form")))
// Explicitly drop conflicting requests
hx.sync(hx.Drop(hx.Closest("form")))
// Abort current request if new one comes in
hx.sync(hx.Abort(hx.This))
// Queue requests, keeping only the last
hx.sync(hx.Queue(hx.Selector("#form"), hx.Last))
pub fn sync_option_to_string(sync_option: Sync) -> String
pub fn target(
extended_css_selector extended_css_selector: Selector,
) -> attribute.Attribute(a)
Specifies the target element to swap content into.
Examples
// Target specific element
hx.target(hx.Selector("#results"))
// Target parent element
hx.target(hx.Closest(".card"))
// Target the element itself
hx.target(hx.This)
pub fn trigger(events: List(Event)) -> attribute.Attribute(a)
Specifies which events will cause an HTMX request.
Examples
// Single event
hx.trigger([hx.click()])
// Multiple events
hx.trigger([hx.click(), hx.keyup()])
// Event with modifiers
hx.trigger([hx.with_delay(hx.click(), duration.seconds(2))])
pub fn trigger_polling(
timing timing: duration.Duration,
filters filters: option.Option(String),
on_load on_load: Bool,
) -> attribute.Attribute(a)
Creates a polling trigger that fires at regular intervals.
Examples
// Poll every 5 seconds
hx.trigger_polling(timing: duration.seconds(5), filters: None, on_load: False)
// Poll with filters
hx.trigger_polling(timing: duration.seconds(10), filters: Some("visible"), on_load: False)
// Start polling immediately and on load
hx.trigger_polling(timing: duration.seconds(2), filters: None, on_load: True)
pub fn validate(bool: Bool) -> attribute.Attribute(a)
Forces validation before making a request.
pub fn vals(
json: json.Json,
compute_value: Bool,
) -> attribute.Attribute(a)
Adds values to be submitted with the request.
pub fn with_delay(
event: Event,
timing: duration.Duration,
) -> Event
Adds a delay before the event triggers.
pub fn with_from(
event: Event,
extended_css_selector: Selector,
) -> Event
Listens for the event on a different element.
pub fn with_queue(
event: Event,
queue: option.Option(Queue),
) -> Event
Queues the event with a specific strategy.
pub fn with_target(event: Event, css_selector: String) -> Event
Filters the event to only trigger when it targets a specific element.
pub fn with_throttle(
event: Event,
timing: duration.Duration,
) -> Event
Throttles the event to fire at most once per duration.