Javascript API

While it is not a focus of the library, htmx does provide a small API of helper methods, intended mainly for extension development or for working with events.

The hyperscript project is intended to provide more extensive scripting support for htmx-based applications.

Method - htmx.addClass()

This method adds a class to the given element.

Parameters
Example
  // add the class 'myClass' to the element with the id 'demo'
  htmx.addClass(htmx.find('#demo'), 'myClass');

Method - htmx.closest()

Finds the closest matching element in the given elements parentage, inclusive of the element

Parameters
Example
  // find the closest enclosing div of the element with the id 'demo'
  htmx.closest(htmx.find('#demo'), 'div');

Property - htmx.config

A property holding the configuration htmx uses at runtime.

Note that using a meta tag is the preferred mechanism for setting these properties.

Properties
Example
  // update the history cache size to 30
  htmx.config.historyCacheSize = 30;

Property - htmx.createEventSource

A property used to create new Server Sent Event sources. This can be updated to provide custom SSE setup.

Value
Example
  // override SSE event sources to not use credentials
  htmx.createEventSource = function(url) {
    return new EventSource(url, {withCredentials:false});
  });

Property - htmx.createWebSocket

A property used to create new WebSocket. This can be updated to provide custom WebSocket setup.

Value
Example
  // override WebSocket to use a specific protocol
  htmx.createWebSocket = function(url) {
    return new WebSocket(url, ['wss']);;
  };

Method - htmx.defineExtension()

Defines a new htmx extension.

Parameters
Example
  // defines a silly extension that just logs the name of all events triggered
  htmx.defineExtension("silly", {
    onEvent : function(name, evt) {
      console.log("Event " + name + " was triggered!")
    }
  });

Method - htmx.find()

Finds an element matching the selector

Parameters

or

Example
    // find div with id my-div
    var div = htmx.find("#my-div")

    // find div with id another-div within that div
    var anotherDiv = htmx.find(div, "#another-div")

Method - htmx.findAll()

Finds all elements matching the selector

Parameters

or

Example
    // find all divs
    var allDivs = htmx.find("div")

    // find all paragraphs within a given div
    var allParagraphsInMyDiv = htmx.find(htmx.find("#my-div"), "p")

Method - htmx.logAll()

Log all htmx events, useful for debugging.

Example
    htmx.logAll();

Property - htmx.logger

The logger htmx uses to log with

Value
Example
    htmx.logger = function(elt, event, data) {
        if(console) {
            console.log("INFO:", event, elt, data);
        }
    }

Method - htmx.off()

Removes an event listener from an element

Parameters

or

Example
    // remove this click listener from the body
    htmx.off("click", myEventListener);

    // remove this click listener from the given div
    var allParagraphsInMyDiv = htmx.find(htmx.find("#my-div"), "click", myEventListener)

Method - htmx.on()

Adds an event listener to an element

Parameters

or

Example
    // add a click listener to the body
    var myEventListener = htmx.on("click", function(evt){ console.log(evt); });

    // add a click listener to the given div
    var myEventListener = htmx.on(htmx.find("#my-div"), "click", function(evt){ console.log(evt); });

Method - htmx.onLoad()

Adds a callback for the htmx:load event. This can be used to process new content, for example initializing the content with a javascript library

Parameters
Example
    htmx.onLoad(function(elt){
        MyLibrary.init(elt);
    })

Method - htmx.parseInterval()

Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.

Parameters
Example
    // returns 3000
    var milliseconds = htmx.parseInterval("3s");

Method - htmx.process()

Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.

Parameters
Example
  document.body.innerHTML = "<div hx-get='/example'>Get it!</div>"
  // process the newly added content
  htmx.process(document.body);

Method - htmx.remove()

Removes an element from the DOM

Parameters
Example
  // removes my-div from the DOM
  htmx.remove(htmx.find("#my-div"));

Method - htmx.removeClass()

Removes a class from the given element

Parameters
Example
  // removes .myClass from my-div
  htmx.removeClass(htmx.find("#my-div"), "myClass");

Method - htmx.removeExtension()

Removes the given extension from htmx

Parameters
Example
  htmx.removeExtension("my-extension");

Method - htmx.takeClass()

Takes the given class from its siblings, so that among its siblings, only the given element will have the class.

Parameters
Example
  // takes the selected class from tab2's siblings
  htmx.takeClass(htmx.find("#tab2"), "selected");

Method - htmx.toggleClass()

Toggles the given class on an element

Parameters
Example
  // toggles the selected class on tab2
  htmx.toggle(htmx.find("#tab2"), "selected");

Method - htmx.trigger()

Triggers a given event on an element

Parameters
Example
  // triggers the myEvent event on #tab2 with the answer 42
  htmx.trigger(htmx.find("#tab2"), "myEvent", {answer:42});