Abstract:

This video introduces FastHX, a Python utility library designed to streamline server-side rendering for HTMX applications built with the FastAPI web framework. The library's main feature is its use of declarative decorators to separate business logic within FastAPI route handlers from the presentation logic of rendering HTML templates. The tutorial demonstrates the two primary decorators: @jinja.page for unconditionally rendering a full HTML page, and @jinja.hx for conditionally rendering an HTML partial specifically for HTMX requests. A key takeaway is how the @jinja.hx decorator allows a single API endpoint to serve both raw JSON data for standard requests and rendered HTML fragments for HTMX requests, simplifying the development of hypermedia-driven applications. The video walks through a practical example involving a movie list application, using Jinja2 for templating and the uv package manager for environment setup.

Simplifying HTMX Backends with FastHX and FastAPI

• 0:00 Introduction to FastHX: FastHX is presented as a declarative server-side rendering utility for building HTMX applications with a FastAPI backend. Its key purpose is to separate the business logic of a route handler from the presentation logic (HTML rendering).
• 1:27 Project Setup: The video demonstrates how to set up a new Python project using the uv package manager, installing the necessary dependencies: fastapi, uvicorn, and fast-hx with its Jinja2 extras.
• 2:26 Initial FastAPI Application: A baseline FastAPI application is created. It defines a Pydantic model for a movie and establishes an endpoint that serves an in-memory list of movies as a standard JSON API response.
• 5:30 Core Concept of FastHX: The library's core philosophy is explained: use decorators to handle the rendering layer, allowing the FastAPI route handler to focus solely on returning the necessary data. FastHX automatically provides this data to the template context.
• 6:32 The @jinja.page Decorator: The video shows how to use the @jinja.page decorator to unconditionally render a full HTML page. This decorator is applied to a route, telling it to always return a specified HTML template instead of a JSON response.
• 10:42 The @jinja.hx Decorator for HTMX: The @jinja.hx decorator is introduced as the solution for handling HTMX partial updates. When applied to an endpoint, it renders and returns an HTML fragment only when the request is identified as coming from HTMX.
• 13:19 Dual-Purpose Endpoints: A key feature of FastHX is demonstrated. An endpoint decorated with @jinja.hx is shown to be dual-purpose: it serves a rendered HTML fragment to an HTMX request, but returns the raw JSON data to a standard, non-HTMX browser request.
• 14:42 Customizing Template Context: The video explains how to pass data to the template with more descriptive variable names. By returning a dictionary from the route handler (e.g., {"movies": movie_list}), the template can access the data using the dictionary's keys instead of the generic items variable.
• 15:52 Conclusion & Key Value: FastHX is summarized as a valuable, lightweight utility for developers using FastAPI and HTMX. Its main benefit is creating cleaner, more maintainable code by cleanly separating concerns and allowing for the creation of versatile, dual-purpose endpoints.