High power tools for HTML (htmx)

INFO

Htmx is currently experimentally used in the admin panel.

• What is htmx?
• Basic example
• More examples

What is htmx?

It is a library that allows to access XHR and some other features directly in HTML using attributes. This enables you to add page interactivity and dynamic content without the need to use a large-scale JavaScript framework.

Basic example

Below is a basic example of how to use the hx-get, hx-target and hx-disabled-elt attributes to replace the content of a div upon form submission. ✨

<form
    hx-get="{{ route('admin.api.courses.membersWithCertificates') }}"
    hx-target="#membersWithCertificates"
    hx-disabled-elt="find button"
>
    <input type="hidden" name="memberCount" value="2"/>
    <input type="hidden" name="courseId" value="70"/>
    <button type="submit" class="button button--primary">
        Load members with certificates
    </button>
</form>

<div id="membersWithCertificates"></div>

More examples

• See more examples on the official website: https://htmx.org/examples/
• Look by hx-* attributes in our codebase.