HTMX & Alpine.JS

A tour of the basics

What is HTMX?

A lightweight JavaScript library

Leverages HTML attributes

Performs dynamic HTTP requests

Enables partial updates to web pages

Let's build!

          app.py
          
            items = [
                {"id": 1, "name": "Item 1"},
                {"id": 2, "name": "Item 2"},
                {"id": 3, "name": "Item 3"},
            ]

            @app.route("/")
            def index():
                return render_template("index.html", items=items)

          index.html (the good bits)
          
            
              {% for item in items %}
                
                  {{ item.name }}
                  
                
              {% endfor %}

Inline editing

Load the form

          app.py

          edit.html

          index.html

inline editing

Save the form

          edit_item.html

          app.py

Extract 'item.html' template

          
            {% for item in items %}
              {% include 'item.html' %}
            {% endfor %}

inline editing

Cancel the edit

          edit_item.html

New TODOs

          app.py

          index.html

Mark Done

          index.html

          app.py

          item.html

          item_done.html

More HTMX

hx-indicator

hx-disabled-elt

hx-encoding

hx-push-url

hx-trigger

Alpine.Js

A minimal tool for composing behavior in HTML markup

A collection of 15 attributes, 6 properties, and 2 methods.

Let's add some client side interactivity

Dynamic Form Elements

          edit_form.html

          edit_form.html

          edit_form.html

Client side search

          index.html

          item.html

What else?

x-data (extracted)


            
              
              Content...

x-bind

x-on

x-for

Magics

$el

$refs


          
          Hello 👋

$watch

$store

...

Thank you!

Questions?