Skip to main content

A Flask extension to work with HTMX.

Project description

https://badge.fury.io/py/flask-htmx.svg Documentation Status https://codecov.io/gh/edmondchuc/flask-htmx/branch/main/graph/badge.svg?token=K6YB3PB33T https://img.shields.io/badge/code%20style-black-000000.svg https://img.shields.io/badge/License-MIT-red.svg https://static.pepy.tech/personalized-badge/flask-htmx?period=week&units=international_system&left_color=grey&right_color=blue&left_text=downloads/week https://static.pepy.tech/personalized-badge/flask-htmx?period=month&units=international_system&left_color=grey&right_color=blue&left_text=downloads/month https://static.pepy.tech/personalized-badge/flask-htmx?period=total&units=international_system&left_color=grey&right_color=blue&left_text=downloads

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

flask_htmx-0.4.0.tar.gz (5.8 kB view hashes)

Uploaded Source

Built Distribution

flask_htmx-0.4.0-py3-none-any.whl (6.8 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page