HTMX

FSharp.ViewEngine provides all non-deprecated HTMX 2.0.9 attributes through the Htmx type. See the official HTMX 2 reference for the complete value grammar and inheritance rules.

On this page

Overview

FSharp.ViewEngine provides all non-deprecated HTMX 2.0.9 attributes through the Htmx type. See the official HTMX 2 reference for the complete value grammar and inheritance rules.

Setup

Open the Htmx type to access HTMX attributes:

open FSharp.ViewEngine
open type Html
open type Htmx

Request Methods

hx-get

Issue a GET request to a URL with _hxGet.

button {
    _hxGet "/api/items"
    "Load items"
}

hx-post

Issue a POST request to a URL with _hxPost.

form {
    _hxPost "/api/items"
    input { _name "title" }
    button { "Create item" }
}

hx-put

Issue a PUT request to a URL with _hxPut.

button {
    _hxPut "/api/items/1"
    "Replace item"
}

hx-patch

Issue a PATCH request to a URL with _hxPatch.

button {
    _hxPatch "/api/items/1"
    "Update item"
}

hx-delete

Issue a DELETE request to a URL with _hxDelete.

button {
    _hxDelete "/api/items/1"
    "Delete item"
}

Request Data and Configuration

hx-encoding

Change the request encoding with _hxEncoding, typically for file uploads.

form {
    _hxPost "/api/upload"
    _hxEncoding "multipart/form-data"
}

hx-headers

Add request headers as JSON with _hxHeaders.

button {
    _hxPost "/api/items"
    _hxHeaders """{"X-CSRF-Token": "token"}"""
    "Create item"
}

hx-include

Include values from additional elements with _hxInclude.

button {
    _hxPost "/api/search"
    _hxInclude "[name='query']"
    "Search"
}

hx-params

Filter submitted parameters with _hxParams. Values include *, none, a comma-separated list, or not followed by a list.

form {
    _hxPost "/api/profile"
    _hxParams "name,email"
}

hx-request

Configure request timeout, credentials, or headers with _hxRequest.

button {
    _hxGet "/api/report"
    _hxRequest """{"timeout": 5000}"""
    "Load report"
}

hx-vals

Add values to the request as JSON with _hxVals.

button {
    _hxPost "/api/action"
    _hxVals """{"source": "toolbar"}"""
    "Run action"
}

Targeting and Swapping

hx-target

Choose the element that receives the response with _hxTarget.

button {
    _hxGet "/api/items"
    _hxTarget "#results"
    "Load items"
}
div { _id "results" }

hx-select

Select a fragment from the response with _hxSelect.

button {
    _hxGet "/items/1"
    _hxSelect "#item-details"
    "Load details"
}

hx-select-oob

Select one or more response fragments for out-of-band swaps with _hxSelectOOB.

button {
    _hxGet "/dashboard"
    _hxSelectOOB "#alerts,#navigation:outerHTML"
    "Refresh dashboard"
}

hx-swap

Control how the response is swapped with _hxSwap. Swap modifiers can be included in the same value.

button {
    _hxGet "/api/items"
    _hxSwap "beforeend settle:200ms"
    "Append items"
}

hx-swap-oob

Mark response content for an out-of-band swap with _hxSwapOOB.

div {
    _id "notifications"
    _hxSwapOOB "true"
    "Updated notifications"
}

hx-preserve

Preserve an element by id across ancestor updates with the presence-only _hxPreserve attribute.

video {
    _id "tutorial"
    _hxPreserve
}

Requests in Flight

hx-indicator

Choose the element that receives the htmx-request class with _hxIndicator.

button {
    _hxGet "/api/report"
    _hxIndicator "#spinner"
    "Load report"
}
span { _id "spinner"; _class "htmx-indicator"; "Loading..." }

hx-disabled-elt

Disable selected elements while a request is in flight with _hxDisabledElt.

button {
    _hxPost "/api/items"
    _hxDisabledElt "this"
    "Create item"
}

hx-sync

Coordinate requests with _hxSync using a selector and synchronization strategy.

input {
    _name "query"
    _hxGet "/api/search"
    _hxTrigger "input changed delay:300ms"
    _hxSync "this:replace"
}

hx-validate

Force an element to run HTML validation before a request with _hxValidate.

input {
    _type "email"
    _hxPost "/api/validate-email"
    _hxValidate "true"
}

Triggering and Interaction

hx-trigger

Specify the events and modifiers that trigger a request with _hxTrigger.

input {
    _name "query"
    _hxGet "/api/search"
    _hxTrigger "keyup changed delay:500ms"
}

hx-confirm

Ask for confirmation before issuing a request with _hxConfirm.

button {
    _hxDelete "/account"
    _hxConfirm "Delete your account?"
    "Delete account"
}

hx-prompt

Prompt for a value before issuing a request with _hxPrompt. HTMX sends the result in the HX-Prompt header.

button {
    _hxDelete "/account"
    _hxPrompt "Enter your account name to confirm"
    "Delete account"
}

hx-on

Handle DOM or HTMX events with _hxOn. Attribute names are case-insensitive, so use kebab-case HTMX event names rather than camelCase.

form {
    _hxPost "/api/items"
    _hxOn ("htmx:before-request", "showSpinner()")
    _hxOn ("htmx:after-request", "hideSpinner()")
}

Security: _hxOn executes inline JavaScript. Only use trusted script content and follow your application's Content Security Policy.

hx-boost

Progressively enhance links and forms with _hxBoost.

main {
    _hxBoost "true"
    a { _href "/account"; "Account" }
}

hx-push-url

Push the fetched URL, a custom URL, or no URL into browser history with _hxPushUrl.

button {
    _hxGet "/account"
    _hxPushUrl "true"
    "Open account"
}

hx-replace-url

Replace the current browser-history URL with _hxReplaceUrl.

button {
    _hxGet "/account"
    _hxReplaceUrl "/account/home"
    "Open account"
}

hx-history

Prevent sensitive page state from entering the HTMX history cache with _hxHistory "false".

section {
    _hxHistory "false"
    "Sensitive account details"
}

hx-history-elt

Choose a narrower history snapshot element with the presence-only _hxHistoryElt attribute.

main {
    _id "content"
    _hxHistoryElt
}

Inheritance and Processing

hx-disable

Disable HTMX processing for an element and its descendants with the presence-only _hxDisable attribute.

section {
    _hxDisable
    "HTMX ignores this subtree"
}

hx-disinherit

Disable inheritance for selected attributes, or all attributes with *, using _hxDisinherit.

section {
    _hxDisinherit "hx-target hx-swap"
}

hx-inherit

Explicitly enable inheritance when HTMX's disableInheritance configuration is active with _hxInherit.

section {
    _hxTarget "#content"
    _hxInherit "hx-target"
}

hx-ext

Enable one or more HTMX extensions for an element and its descendants with _hxExt.

body {
    _hxExt "preload,morph"
}

Generic and Deprecated Attributes

Use _hx for extension attributes or newer HTMX attributes that do not yet have a dedicated helper:

div {
    _hx ("custom-extension-option", "value")
}

hx-vars is deprecated in HTMX 2; use _hxVals. The former hx-sse and hx-ws core attributes moved to extensions and therefore do not have dedicated core helpers.

Complete Example

A search form combining request, synchronization, targeting, indicator, and history attributes:

form {
    _hxGet "/api/search"
    _hxTrigger "input changed delay:300ms, search"
    _hxTarget "#search-results"
    _hxIndicator "#search-spinner"
    _hxDisabledElt "find button"
    _hxSync "this:replace"
    _hxPushUrl "true"

    input { _type "search"; _name "query"; _hxValidate "true" }
    button { _type "submit"; "Search" }
    span { _id "search-spinner"; _class "htmx-indicator"; "Searching..." }
    div { _id "search-results" }
}