DOCSEARCHbyAlgolia
Submit Docs

PyHAT - Awesome Python HTMX

repository·main·Indexed 23 days ago

https://github.com/pyhat-stack/awesome-python-htmx

A curated collection of resources for developers building Hypermedia-Driven Applications (HDA) using the PyHAT stack: Python, htmx, ASGI, and Tailwind CSS. This index includes integration libraries for Django, FastAPI, Flask, and Litestar, as well as tools for rendering template fragments, managing Tailwind CSS without Node.js, and implementing architectural patterns like Locality of Behaviour (LoB).

Tokens
2.4K
Snippets
0
Records
19
Agent score
30%

What's inside PyHAT

  1. What is the PyHAT stack?

    main

    PyHAT stands for Python, htmx, ASGI, and Tailwind. It is a web development stack designed to build powerful web applications using hypermedia-driven patterns.

    Instead of using complex JavaScript frameworks to manage state and data via JSON, the PyHAT stack focuses on:

    • Python: For backend logic.
    • htmx: To achieve front-end interactivity (AJAX, CSS Transitions, WebSockets, Server-Sent Events) directly in HTML using attributes.
    • ASGI: Using asynchronous server interfaces to handle multiple asynchronous events.
    • Tailwind CSS: For rapid, utility-first styling without leaving your HTML.

  2. Glossary of PyHAT terms

    main

    Key terminology used in the PyHAT ecosystem:

    • Asynchronous Server Gateway Interface (ASGI): A standard allowing applications to talk to a server, supporting multiple asynchronous events per application.
    • component: A reusable custom element (can be a JavaScript element or a broader term for reusable hypermedia/design elements).
    • dependency: Any required application, library, or package.
    • fragments / template fragments: Partial content of an HTML template; the ability to render a specific bit of content rather than the entire template.
    • hypermedia: Information medium including graphics, audio, video, text, and hyperlinks, typically represented as HTML on the web.
    • Hypermedia Driven Application (HDA): An application using declarative HTML syntax for interactivity, interacting with the server via hypermedia (HTML) instead of JSON.
    • partials: A term for partial content displayed in a template or generated within a template block.
    • Server Side Rendering (SSR): Generating static HTML markup on the server before rendering in the browser.
    • Single Page Application (SPA): A web app that loads a single document and updates content via JavaScript APIs.

  3. When to use Hypermedia-Driven Applications (HDA)

    main

    Hypermedia-Driven Applications use declarative, HTML-embedded syntax to achieve interactivity, interacting with the server via HTML rather than JSON.

    Use Hypermedia when:

    • You want to stick to Python and HTML/CSS without sacrificing front-end functionality.
    • You want to avoid complicated JavaScript frameworks.
    • You want to maintain consistent design without excessive CSS class name invention.

    Avoid Hypermedia if:

    • Your UI has many, dynamic interdependencies (e.g., Google Maps, Google Sheets).
    • You require offline functionality.
    • Your UI state is updated extremely frequently (e.g., online games).

  4. Explore Design, Theory, and Patterns for PyHAT

    main

    To build effective applications using the PyHAT (Python + htmx) stack, you should study the following architectural patterns and theoretical foundations:

    Django + htmx Patterns

    Use the Django + htmx patterns repository for a compilation of patterns specifically for writing Django projects with htmx, including complete example code.

    Core Concepts and Essays

    Understanding the underlying philosophy is key to using htmx correctly. Key resources include:

    • Hypermedia-Driven Applications: A primer on how a PyHAT application should look architecturally.
    • Locality of Behaviour (LoB): A principle stating that the behavior of a unit of code should be as obvious as possible by looking only at that unit of code.
    • Splitting Your Data & Application APIs: Guidance on splitting your API into Data and Application APIs, where the Application API uses Hypermedia (HTML) instead of JSON to leverage the benefits of the hypermedia model.
    • HTML First: A set of principles focused on leveraging modern browser capabilities, HTML attribute simplicity, and the web's ViewSource affordance.
    • You don't need JavaScript for that: A principle of choosing the least powerful language suitable for a purpose (preferring HTML over CSS, and CSS over JS).

    Practical Implementation

    • Django HTMX Components: Provides live demos and a code repository of common Django + HTMX patterns designed to be copy-pasted and customized for your projects.

  5. Introductory resources for PyHAT

    main

  6. Find further reading on HTMX and Python integration

    main

    For more information on HTMX and its integration with Python development environments, consult these resources:

    • Awesome Htmx: A curated list of HTMX resources.
    • Maximizing Productivity: PyCharm and htmx Integration: A guide on integrating HTMX with the PyCharm IDE.
    • unsuck.js: An external resource related to modern web development practices.

  8. Explore projects using PyHAT or similar patterns

    main

    The following projects demonstrate real-world implementations of the PyHAT pattern (Python backend + HTMX frontend) across different frameworks:

    • Django Requests Tracker: A development tool for collecting request/response info, SQL queries, and headers using HTMX.
    • IDP-Z3: A software collection implementing the Knowledge Base paradigm using Flask and HTMX.
    • JupySpace: A web server/client for managing conda-forge environments via FastAPI and HTMX.
    • Harfang: A social content site built with Django, HTMX, Alpine.js, and Tailwind CSS.