THIS IS A WIP, BUT WE ARE VERY OPEN TO CONTRIBUTIONS
- PyHAT: Awesome Python htmx
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.
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.
Does any of this sound like you:
- I want to stick with just Python and HTML/CSS, but not sacrifice front-end functionality.
- I don't want to have to use a complicated front end framework.
- I don't enjoy agonizing over CSS class names.
- I want to maintain a consistent design without any bikeshedding.
If the above sounds like you then you are in the right place!
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)
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.
- 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
pipusing the pytailwindcss library)
- simple site
- Provides thorough documentation on building a site from the ground up with FastAPI, Jinja, htmx, and Tailwind.
- Rapid Prototyping with Flask, htmx, and Tailwind CSS
- In this tutorial, you'll learn how to set up Flask with htmx and Tailwind CSS. (testdriven.io)
- HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Course
- Bugbytes Django & HTMX
- A phenomenal tutorial series on using Django with htmx.
- Django + htmx patterns
A compilation of patterns for writing Django projects that use htmx, with complete example code. - htmx Essays
A collection of essays by Carson Gross, the creator of htmx. Some specific essays of note for those not familiar with his teachings:- Hypermedia-Driven Applications - This web stack could have been called PyHDA, this essay gives a great primer on how a PyHAT application should look, architecturally.
- Locality of Behaviour (LoB) - A concept you will see referred to a lot around here. "The behaviour of a unit of code should be as obvious as possible by looking only at that unit of code"
- Splitting Your Data & Application APIs: Going Further - A great essay (responding to a great article).
If you split your API into Data and Application APIs...you should consider changing your Application API from JSON to Hypermedia (HTML) & using a hypermedia-oriented library like htmx to reap the benefits of the hypermedia model (simplicity, reliability, flexibility, etc.)
- Music Binder
- Bulldoggy: The Reminders App
GET,POST,PATCHrequests in a fully-functioning to-do frontend.
- fuzzy-couscous
A cli tool based on django'sstartproject --templateto bootstrap your django projects with a PyHAT stack.
- Jinja2 fragments
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 - Django Render Block
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
A Flask extension to work with HTMX. - htmx-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
An opinionated extension for FastAPI to speed up development of lightly interactive web applications. - asgi-htmx
HTMX integration for ASGI applications. Works with Starlette, FastAPI, Quart -- or any other web framework supporting ASGI that exposes the ASGIscope. Inspired bydjango-htmx. - django-htmx
Extensions for using Django with htmx. - django-siteajax
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
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
Helps connect Django Class-Based-Views with htmx. - Starlette_htmx
A set of extensions for using htmx with Starlette, based ondjango-htmx.
- Forge Packages
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
- Use Tailwind CSS with Django without requiring JavaScript or npm.
- django_htmx_ui
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.
- Django Dashboards
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.
- django-tailwind-cli
An integration of Tailwind CSS for Django that is based on the precompiled versions of the Tailwind CSS CLI (No JS required!) - 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.
- Django Requests Tracker
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
A software collection implementing the Knowledge Base paradigm using the FO(.) language. Uses htmx for the front end. - JupySpace
A web server and client to manage conda-forge environments from the browser and access them through JupyterLab. Uses htmx on the front-end.