/awesome-python-htmx

A curated list of things related to python-based web development using htmx

MIT LicenseMIT

PyHAT: Awesome Python htmx Awesome

Are you interested in the intersection of Python and Hypermedia-Driven Applications? Head on over to the discussions tab, introduce yourself, and lets get to work!

What is PyHAT 🧐

PyHAT is more than just a snake with a hat 🐍🤠. It stands for Python htmx ASGI Tailwind—a web stack that allows you to build powerful web applications using nothing more than... drumroll... Python, htmx, and Tailwind.

Our Goal

We want to promote hypermedia driven applications. That's it. That's the goal.

Okay, well, more specifically, we want to promote htmx within the Python ecosystem.

Why Should I Care

Does any of this sound like you:

If the above sounds like you then you are in the right place!

Maybe This Isn't For Me

One of the links above goes to When Should You Use Hypermedia over at htmx.org, and is a pretty great read if you want to asses if this is for you. It also expounds on the following points:

Hypermedia might not be a good fit:

  • …If your UI has many, dynamic interdependencies
    • i.e., Google Maps, Google Sheets
  • ...If you require offline functionality
  • …If your UI state is updated extremely frequently
    • i.e., Online game
  • …If your team is not on board

But Will it Work in Production

Yes! Here is a very good example of a project a company underwent using HTMX with Django in production. Some highlights from the article:

  • The effort took about 2 months (with a 21K LOC code base, mostly JavaScript)
  • No reduction in the application’s user experience (UX)
  • They reduced the code base size by 67% (21,500 LOC to 7200 LOC)
  • They increased python code by 140% (500 LOC to 1200 LOC), a good thing if you prefer python to JS
  • They reduced their total JS dependencies by 96% (255 to 9)
  • They reduced their web build time by 88% (40 seconds to 5)
  • First load time-to-interactive was reduced by 50-60% (from 2 to 6 seconds to 1 to 2 seconds)
  • Much larger data sets were possible when using htmx, because react simply couldn’t handle the data
  • Web application memory usage was reduced by 46% (75MB to 45MB)

Glossary 📜

  • Asynchronous Server Gateway Interface (ASGI) - A standard that allows an application to talk to a server, allowing for multiple, asynchronous events per application.
  • component - A reusable custom element. Within JavaScript, it is a self-contained element with its own properties/methods that are reusable. In this context, the term is more broadly applied to any reusable elements (which may include hypermedia or other design elements).
  • dependency - Any application (librariy or package) that are required to run your application.
  • fragments - Refers to partial content of a an HTML template. See also: template fragments
  • hypermedia - Medium of information including graphics, audio, video, text, and hyperlinks, typically represented on the web as HTML
  • Hypermedia Driven Application (HDA) - Uses declarative, HTML embedded syntax to achieve front-end interactivity, while interacting with the server in terms of hypermedia (HTML) instead of a non-hypermedia format (JSON).
  • partials - A loose term, sometimes referring to "partial" content that can be displayed in a template, or partial content to be generated from within a template block.
  • Server Side Rendering (SSR) - Generating static HTML markup on the server before it is rendered in the browser on the front-end.
  • Single Page Application (SPA) - A web app implementation that loads a single web document, and subsequently updates content through JavaScript APIs.
  • template fragments - a relatively rare SSR template library feature that allow you to render a fragment or partial bit of the content within a template, rather than the entire template.

Usage ✏️

Htmx can be used with any backend framework. Currently, there is a lot of experimentation in the Python space, which is exciting! But that also means that there are a lot of disparate approaches.

The best advice here is to get familiar with some of the core packages (htmx, tailwind). Then feel free to check out any of the packages below.

Official Resources 📚

  • htmx - htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. Htmx has no outside dependencies outside of a vanilla JavaScript file referenced in your HTML <head> section.
  • tailwindcss - Rapidly build modern websites without ever leaving your HTML. Tailwind provides a standalone CLI tool that does not require npm or any other JavaScript dependencies. (You can install it through pip using the pytailwindcss library)

Introductory Resources 🔰

Introductory Courses 🏫

  • HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Course Flask - htmx is one of the hottest properties 🔥 in web development today, and for good reason. This framework, along with the libraries and techniques introduced in this course, will have you writing the best Python web apps you've ever written: clean, fast, and interactive without all that frontend overhead. (TalkPython Training)
  • Bugbytes Django & HTMX Django - A phenomenal tutorial series on using Django with htmx.

Design, Theory, and Patterns 🧠

Third Party Packages 📦

Demos

  • Music Binder FastAPI - More advanced version of Simple Site repo showcasing features like active search and infinite scroll. You can open with a Codespace in GitHub without having to install anything locally.
  • Bulldoggy: The Reminders App FastAPI Bulldoggy is a small demo web app for tracking reminders. Uses htmx to handle GET, POST, PATCH requests in a fully-functioning to-do frontend.

Templates

  • fuzzy-couscous Django Tailwind CSS
    A cli tool based on django's startproject --template to bootstrap your django projects with a PyHAT stack.

Helper Libraries

  • Jinja2 fragments FastAPI Flask Jinja2
    Allows rendering individual blocks from Jinja2 templates. This library was created to enable the pattern of template fragments with Jinja2. Extremely helpful when using HTMX to enable Locality of Behavior
  • Jinja Partials Flask Jinja2
    When building real-world web apps with Flask + Jinja2, it's easy to end up with repeated HTML fragments. Just like organizing code for reuse, it would be ideal to reuse smaller sections of HTML template code. That's what this library is all about.
  • Django Render Block Django
    Allows rendering individual blocks from Django templates. This library was created to enable the pattern of template fragments with Django (using Django or Jinja2 templates). Extremely helpful when using HTMX to enable Locality of Behavior
  • Flask-HTMX Flask
    A Flask extension to work with HTMX.
  • htmx-Flask Flask
    An extension for Flask that adds support for htmx to your application. It simplifies using htmx with Flask by enhancing the global 'request' object and providing a new 'make_response' function.
  • FastAPI-HTMX FastAPI
    An opinionated extension for FastAPI to speed up development of lightly interactive web applications.
  • asgi-htmx FastAPI
    HTMX integration for ASGI applications. Works with Starlette, FastAPI, Quart -- or any other web framework supporting ASGI that exposes the ASGI scope. Inspired by django-htmx.
  • django-htmx Django
    Extensions for using Django with htmx.
  • django-siteajax Django
    Streamline your server and client interaction using declarative techniques in your HTML and helpful abstractions from siteajax in your Python code. Powered by htmx.
  • hx-requests Django
    A package to simplify the usage of HTMX with Django. Easily add HTMX requests witout needing additional urls, and reduce clutter in views by offloading all responsibility to an hx_request.
  • django-cbv-htmx Django
    Helps connect Django Class-Based-Views with htmx.
  • Starlette_htmx Starlette
    A set of extensions for using htmx with Starlette, based on django-htmx.

Frameworks

  • Forge Packages Django
    Forge is a set of Django packages that work well together, but can also be used independently. These include some htmx/tailwind specific packages highlighted below. Note that these are opinionated approaches, but they provide a robust set of features to enhance your developer experience.
    • forge-htmx - The forge-htmx Django package adds a couple of unique features for working with HTMX. One is template fragments and the other is view actions.
    • forge-tailwind Tailwind CSS - Use Tailwind CSS with Django without requiring JavaScript or npm.
  • django_htmx_ui Django Jinja2
    A django app that combines and helps leverage the full-stack django framework, the frontend htmx framework, the django-htmx library, and the jinja template engine. It provides extended django Views with htmx build-in functionality, CRUD Views for django models, extra Mixins to use with your Views to make life easier, a ready-to-use jinja environment, Middlewares for automations, and extra utils and decorators for common use cases.

Components

  • Django Dashboards Django
    Tools to help you build data dashboards in Django.
  • django-htmx-autocomplete
    A client-side autocomplete component powered by htmx featuring multiselect, search and is completely extensible.

Tools

  • django-tailwind-cli Django Tailwind CSS
    An integration of Tailwind CSS for Django that is based on the precompiled versions of the Tailwind CSS CLI (No JS required!)
  • pytailwindcss Tailwind CSS
    Tailwind CSS is notoriously dependent on Node.js. If you're a Python developer, this dependency may not be welcome in your team, your Docker container, or your inner circle. Giving up Node.js means you won't be able to install plugins or additional dependencies for your Tailwind CSS setup. At the same time, that might not be a dealbreaker. You can still customize Tailwind CSS via the tailwind.config.js file.
  • HTML Form to Dict
    Do simple end-to-end testing of form handling without a real browser (like selenium/puppeteer/playwright). Supports the "action" and "method" attributes of forms and additionaly the htmx attributes hx-get, hx-post.

Projects Using PyHAT (or similar) 🏗️

  • Django Requests Tracker Django
    A Django development tool which collects and displays information on requests, responses, SQL queries, headers, Django settings and more. The Front-end uses HTMX.
  • IDP-Z3 Flask
    A software collection implementing the Knowledge Base paradigm using the FO(.) language. Uses htmx for the front end.
  • JupySpace FastAPI
    A web server and client to manage conda-forge environments from the browser and access them through JupyterLab. Uses htmx on the front-end.

Further Reading 📖