Flask-HTMX

A Flask extension to work with HTMX.

Documentation: https://flask-htmx.readthedocs.io

Quickstart

Install the extension with pip.

pip install flask-htmx

Or perhaps you use Poetry.

poetry add flask-htmx

HTMX Request

You can register the HTMX object by passing the Flask app object via the constructor.

htmx = HTMX(app)

Or you can register the HTMX object using HTMX.init_app().

htmx = HTMX()
htmx.init_app(app)

A minimal working example.

from flask import Flask, render_template
from flask_htmx import HTMX

app = Flask(__name__)
htmx = HTMX(app)

@app.route("/")
def home():
    if htmx:
        return render_template("partials/thing.html")
    return render_template("index.html")

The above example checks whether the request came from HTMX or not. If htmx evaluates to True, then it was a HTMX request, else False.

This allows you to return a partial HTML when it's a HTMX request or the full page HTML when it is a normal browser request.

Flask-HTMX also supports checking for HTMX headers during a request in the view. For example, check the current URL of the browser of a HTMX request.

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

Other HTMX request headers are also available. See https://htmx.org/reference/#request_headers.

HTMX Response

You might be interested on adding htmx response headers to your response. Use flask_htmx.make_response for that. For example, instead of:

import json
from flask import make_response
from my_app import app

@app.route("/hola-mundo")
def hola_mundo():
    body = "Hola Mundo!"
    response = make_response(body)
    response.headers["HX-Push-URL"] = "false"
    trigger_string = json.dumps({"event1":"A message", "event2":"Another message"})
    response.headers["HX-Trigger"] = trigger_string
    return response

You can do:

from flask_htmx import make_response
from my_app import app

@app.route("/hola-mundo")
def hola_mundo():
    body = "Hola Mundo!"
    return make_response(
        body,
        push_url=False,
        trigger={"event1": "A message", "event2": "Another message"},
    )

Documentation

Visit the full documentation.

Development

Installation

poetry install

Running tests

poetry run pytest

Coverage

poetry run pytest --cov=flask_htmx tests/

Docs

sphinx-autobuild docs docs/_build/html