An opinionated way to work with html in pure python with htmx support.
Project description
Hypermedia
Hypermedia is a pure python library for working with HTML. Hypermedia's killer feature is that it is composable through a slot concept. Because of that, it works great with </> htmx where you need to respond with both partials and full page html.
Hypermedia is made to work with FastAPI and </> htmx, but can be used by anything to create HTML.
Features
- Build HTML with python classes
- Composable templates through a slot system
- Seamless integration with </> htmx
- Fully typed and Autocompletion for html/htmx attributes and styles
- Opinionated simple decorator for FastAPI
- Unlike other template engines like Jinja2 we have full typing since we never leave python land.
The Basics
All html tags can be imported directly like:
from hypermedia import Html, Body, Div, A
Tags are nested by adding children in the constructor:
from hypermedia import Html, Body, Div
Html(Body(Div(), Div()))
Add text to your tag:
from hypermedia import Div
Div("Hello world!")
use .dump() to dump your code to html.
from hypermedia import Bold, Div
Div("Hello ", Bold("world!")).dump()
# outputs
# '<div>Hello <b>world!</bold></div>'
Composability with slots
from hypermedia import Html, Body, Div, Menu, Header, Div, Ul, Li
base = Html(
Body(
Menu(slot="menu"),
Header("my header", slot="header"),
Div(slot="content"),
),
)
menu = Ul(Li(text="main"))
content = Div(text="Some content")
base.extend("menu", menu)
base.extend("content", content)
base.dump()
# outputs
# '<html><body><menu><ul><li>main</li></ul></menu><header>my header</header><div><div>Some content</div></div></body></html>'
Symbol attributes
Attributes with dashes, periods etc can be added by spreading a dictionary
# Alpine.js
Button(**{"@click": "open = ! open"}).dump()
# <button @click='open'></button>
# Datastar
Div(**{"x-transition.duration_500ms": "$show"}).dump()
# <div x-transition.duration_500ms='$show'></div>
Note: The </> HTMX attributes get special treatment. The documentation specifies that all hx attributes can be written with all dashes. Because of that Hypermedia lets users write hx attributes with underscores and Hypermedia changes them to dashes for you.
Div(hx_on_click='alert("Making a request!")')
# <div hx-on-click='alert("Making a request!")'></div>
# Which is equivalent to:
# <div hx-on:click='alert("Making a request!"'></div>
Div(hx_on_htmx_before_request='alert("Making a request!")')
# <div hx-on-htmx-before-request='alert("Making a request!")'></div>
# shorthand version of above statement
Div(hx_on__before_request='alert("Making a request!")')
# <div hx-on--before-request='alert("Making a request!")'></div>
HTMX
The Concept
The core concept of HTMX is that the server responds with HTML, and that we can choose with a CSS selector which part of the page will be updated with the HTML response from the server.
This means that we want to return snippets of HTML, or partials, as they are also called.
The Problem
The problem is that we need to differentiate if it's HTMX that called an endpoint for a partial, or if the user just navigated to it and needs the whole page back in the response.
The Solution
HTMX provides an HX-Request header that is always true. We can check for this header to know if it's an HTMX request or not.
We've chosen to implement that check in a @htmx decorator. The decorator expects partial and optionally full arguments in the endpoint definition. These must be resolved by FastAPI's dependency injection system.
from hypermedia.fastapi import htmx, full
The partial argument is a function that returns the partial HTML.
The full argument is a function that needs to return the whole HTML, for example on first navigation or a refresh.
Note: The
fullargument needs to be wrapped inDependsso that the full function's dependencies are resolved! Hypermedia ships afullwrapper, which is basically just making the function lazily loaded. Thefullwrapper must be used, and the@htmxdecorator will call the lazily wrapped function to get the full HTML page when needed.
Note: The following code is in FastAPI, but could have been anything. As long as you check for HX-Request and return partial/full depending on if it exists or not.
def render_base():
"""Return base HTML, used by all full renderers."""
return ElementList(Doctype(), Body(slot="body"))
def render_fruits_partial():
"""Return partial HTML."""
return Div(Ul(Li("Apple"), Li("Banana"), Button("reload", hx_get="/fruits")))
def render_fruits():
"""Return base HTML extended with `render_fruits_partial`."""
return render_base().extend("body", render_fruits_partial())
@router.get("/fruits", response_class=HTMLResponse)
@htmx
async def fruits(
request: Request,
partial: Element = Depends(render_fruits_partial),
full: Element = Depends(full(render_fruits)),
) -> None:
"""Return the fruits page, partial or full."""
pass
That's it. Now we have separated the rendering from the endpoint definition and handled returning partials and full pages when needed. Doing a full refresh will render the whole page. Clicking the button will make a htmx request and only return the partial.
What is so cool about this is that it works so well with FastAPI's dependency injection.
Really making use of dependency injection
fruits = {1: "apple", 2: "orange"}
def get_fruit(fruit_id: int = Path(...)) -> str:
"""Get fruit ID from path and return the fruit."""
return fruits[fruit_id]
def render_fruit_partial(
fruit: str = Depends(get_fruit),
) -> Element:
"""Return partial HTML."""
return Div(fruit)
def render_fruit(
partial: Element = Depends(render_fruit_partial),
):
return render_base().extend("content", partial)
@router.get("/fruits/{fruit_id}", response_class=HTMLResponse)
@htmx
async def fruit(
request: Request,
partial: Element = Depends(render_fruit_partial),
full: Element = Depends(full(render_fruit)),
) -> None:
"""Return the fruit page, partial or full."""
pass
Here we do basically the same as the previous example, except that we make use of FastAPI's great dependency injection system. Notice the path of our endpoint has fruit_id. This is not used in the definition. However, if we look at our partial renderer, it depends on get_fruit, which is a function that uses FastAPI's Path resolver. The DI then resolves (basically calls) the fruit function, passes the result into our partial function, and we can use it as a value!
This pattern with DI, Partials, and full renderers is what makes using FastAPI with HTMX worth it.
In addition to this, one thing many are concerned about with HTMX is that since we serve HTML, there will be no way for another app/consumer to get a fruit in JSON. But the solution is simple:
Because we already have a dependency that retrieves the fruit, we just need to add a new endpoint:
@router.get("/api/fruit/{fruit_id}")
async def fruit(
request: Request,
fruit: str = Depends(get_fruit),
) -> str:
"""Return the fruit data."""
return fruit
Notice we added /api/ and just used DI to resolve the fruit and just returned it. Nice!
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file hypermedia-4.1.0.tar.gz.
File metadata
- Download URL: hypermedia-4.1.0.tar.gz
- Upload date:
- Size: 26.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.7.1 CPython/3.10.6 Darwin/23.5.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | fade15b397fa069189e7bfda2b99d7217eda5ccf861af7b99140b0e75c989a6c |
|
| MD5 | 4238cf8c3771b1e246655f979f718fe7 |
|
| BLAKE2b-256 | f218c94e4b65e8944a9c3c0244086d9402cd2c683e0f07f6f27850b14eb61241 |
File details
Details for the file hypermedia-4.1.0-py3-none-any.whl.
File metadata
- Download URL: hypermedia-4.1.0-py3-none-any.whl
- Upload date:
- Size: 29.1 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.7.1 CPython/3.10.6 Darwin/23.5.0
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | f6ab4efa57d56472b28e159b1c23e604c015cdff6aa171f17a5fa8424121e1fa |
|
| MD5 | 26c7a2a08a0381e9e9ceea211c96d911 |
|
| BLAKE2b-256 | 323cb9e6a3aa90dffe33d79a3ef664ee94e4d20d1d8195a23b8c055f424a6148 |
