Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
awesome-python-htmx
A curated list of things related to python-based web development using htmx
https://github.com/PyHAT-stack/awesome-python-htmx
Last synced: 4 days ago
JSON representation
-
Introductory Courses 🏫
-
But Will it Work in Production?
- Bugbytes Django & HTMX - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> - A phenomenal tutorial series on using Django with htmx.
- Code With Stein Django Ecommerce Website Htmx and tailwind - A great tutorial on building a Django ecommerce website with htmx and tailwind.
- HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Course - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a> - 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)
- HTMX + Django: Modern Python Web Apps, Hold the JavaScript Course - Similar to the course above, except with Django. (TalkPython Training)
- Bugbytes Django & HTMX - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> - A phenomenal tutorial series on using Django with htmx.
- Code With Stein Django Ecommerce Website Htmx and tailwind - A great tutorial on building a Django ecommerce website with htmx and tailwind.
-
-
Design, Theory, and Patterns 🧠
-
But Will it Work in Production?
- htmx Essays
- 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](https://max.engineer/server-informed-ui)).
- Why We Should Stop Using JavaScript According to Douglas Crockford (Inventor of JSON)
- 3 IRL use cases for Python and HTMX - _From the author:_ There is nothing HTMX does that you couldn't do in another way. But HTMX pairs wonderfully with traditional server side frameworks and gives you clean, correct, results quite fast. You won't get candy crush bling level with it, but you will get something practical, which is regularly all what I need.
- HTML First - HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by... 1) Leveraging the default capabilities of modern web browsers, 2) Leveraging the extreme simplicity of HTML's attribute syntax, 3) Leveraging the web's ViewSource affordance.
- You don't need JavaScript for that - It's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose... On the web this means preferring HTML over CSS, and then CSS over JS.
- Django + htmx patterns - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a><br/>
- Django HTMX Components - Live demos and code repository of common Django + HTMX patterns. They are designed to be copy-pasted into your project and customized to your needs.
- Why We Should Stop Using JavaScript According to Douglas Crockford (Inventor of JSON)
-
-
Third Party Packages 📦 <a name = "tools"></a>
-
Frameworks
- Litestar - Litestar-a9bbcc?style=flat&logoColor=black" alt="Litestar"></a> <br/> Litestar is a full-on ASGI web framework (think FastAPI, Sanic, Starlette, etc...) So why is it included here? With their most recent 2.0 release, the creators have included htmx support out of the box. A special `HTMXRequest` provides easier access to HX-request header objects, and an `HTMXTemplate` object that includes attributes for common htmx actions (pushing url, re_swap, re_targets, etc...)
- Forge Packages - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- 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.
- django_htmx_ui - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://palletsprojects.com/p/jinja/" target="_blank"><img src="https://img.shields.io/badge/-Jinja2-a9bbcc?style=flat&logo=jinja&logoColor=black" alt="Jinja2"></a><br/>
- forge-tailwind - Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a> - Use Tailwind CSS with Django without requiring JavaScript or npm.
- Ludic - Starlette-a9bbcc?style=flat&logo=starlette&logoColor=black" alt="Starlette"></a><br/>
-
Tools <a name = "tools"></a>
- django-tailwind-cli - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
- django-tailwind-cli - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
- pytailwindcss - Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
- HTML Form to Dict
- django-tailwind-cli - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
- django-tailwind-cli - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
-
Demos
- Bulldoggy: The Reminders App - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a> 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.
- Owela Club - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> - Play the Namibian game of Owela against a terrible AI. Built using Django and htmx.
- Music Binder - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a> - More advanced version of [Simple Site repo](https://github.com/tataraba/simplesite) showcasing features like active search and infinite scroll. You can open with a Codespace in GitHub without having to install anything locally.
-
Templates
- django-cotton - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
- falco - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <a href="https://tailwindcss.com/" target="_blank"><img src="https://img.shields.io/badge/-Tailwind_CSS-a9bbcc?style=flat&logo=tailwindcss&logoColor=black" alt="Tailwind CSS"></a><br/>
-
Helper Libraries
- Jinja Partials - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a> <a href="https://palletsprojects.com/p/jinja/" target="_blank"><img src="https://img.shields.io/badge/-Jinja2-a9bbcc?style=flat&logo=jinja&logoColor=black" alt="Jinja2"></a><br/>
- Django Render Block - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- Flask-HTMX - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a><br/>
- htmx-Flask - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a> <br/>
- FastAPI-HTMX - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a><br>
- FastHX - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a><br>
- asgi-htmx - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a><br>
- django-htmx - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- django-siteajax - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- hx-requests - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- django-cbv-htmx - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- Starlette_htmx - Starlette-a9bbcc?style=flat&logo=starlette&logoColor=black" alt="Starlette"></a><br/>
- django-template-partials - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- Jinja2 fragments - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a> <a href="https://flask.palletsprojects.com/en" target="_blank"><img src="https://img.shields.io/badge/-Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a> <a href="https://litestar.dev/" target="_blank"><img src="https://img.shields.io/badge/-Litestar-a9bbcc?style=flat&logoColor=black" alt="Litestar"></a> <a href="https://palletsprojects.com/p/jinja/" target="_blank"><img src="https://img.shields.io/badge/-Jinja2-a9bbcc?style=flat&logo=jinja&logoColor=black" alt="Jinja2"></a><br/>
- template fragments - of-behaviour/)
- Has a great intro talk from DjangoCon
-
Components
- Django Dashboards - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
- django-htmx-autocomplete - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> <br/>
-
-
Projects Using PyHAT (or similar) 🏗️
-
Tools <a name = "tools"></a>
- Django Requests Tracker - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a><br/>
- IDP-Z3 - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a><br/>
- JupySpace - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a><br/>
- Harfang - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a><br/>
-
-
Further Reading 📖
-
Tools <a name = "tools"></a>
-
-
What is PyHAT? 🧐 <a name = "about"></a>
-
Maybe This Isn't For Me
-
Why Should I Care?
-
But Will it Work in Production?
- Here is a very good example - world SaaS product: we did it, and it's awesome!](https://www.youtube.com/watch?v=3GObi93tjZI)
-
-
Official Resources 📚
-
But Will it Work in Production?
- 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](https://pypi.org/project/pytailwindcss/) library)
- 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.
-
-
Introductory Resources 🔰
-
But Will it Work in Production?
- simple site - FastAPI-a9bbcc?style=flat&logo=fastapi&logoColor=black" alt="FastAPI"></a> - Provides thorough documentation on building a site from the ground up with FastAPI, Jinja, htmx, and Tailwind.
- How to create a Django form (using HTMX) in 90 seconds 🐎 - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a>- A simple, short guide to start using HTMX with Django very quickly 🐎
- Add instant database search with Django and HTMX 🕵️ - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> - Build an instant database search using Django and HTMX in 6 steps 🕵️
- Add infinite scroll with Django and HTMX in 60 seconds ∞ - Django-a9bbcc?style=flat&logo=django&logoColor=black" alt="Django"></a> - Shows how to add infinite scroll to your Django app using HTMX in a simple guide ∞
- Rapid Prototyping with Flask, htmx, and Tailwind CSS - Flask-a9bbcc?style=flat&logo=flask&logoColor=black" alt="Flask"></a> - In this tutorial, you'll learn how to set up Flask with htmx and Tailwind CSS. (testdriven.io)
-
Programming Languages
Categories
Sub Categories
Keywords
htmx
9
python
8
django
7
html
4
django-application
3
fastapi
3
jinja2
3
web
2
flask
2
server-side-rendering
1
django-templates
1
template-engine
1
ui
1
components
1
web-testing
1
tinydb
1
the-way-to-test-software
1
test-automation
1
software-testing
1
requests
1
pytest
1
pydantic
1
playwright
1
jinja
1
css
1
bulldoggy
1
api-testing
1
hypermedia
1
tailwindcss
1
tailwind-css
1
tailwind
1
starter-project
1
hatch
1
cookiecutter-template
1
cookiecutter
1
build-in-public
1
awesome-list
1
awesome
1
sql
1
rest
1
middleware
1
django-rest-framework
1
django-ninja
1
debug
1
bulma
1
api
1
testing
1
html-forms
1
xhr
1
htmx-django
1