Hypermedia
Composable HTML rendering in pure python with FastAPI and HTMX in mind
Install / Use
/learn @thomasborgen/HypermediaREADME
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.
Documentation Stable | Source Code | Task Tracker
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()
output
<div>Hello <b>world!</b></div>
Composability with slots
from hypermedia import Html, Body, Div, Menu, H1, Div, Ul, Li
base = Html(
Body(
Menu(slot="menu"),
Div(slot="content"),
),
)
menu = Ul(Li("home"))
content = Div("Some content")
base.extend("menu", menu)
base.extend("content", content)
base.dump()
output
<html>
<body>
<menu>
<ul><li>home</li></ul>
</menu>
<div>
<div>Some content</div>
</div>
</body>
</html>
Documentation
Head over to our documentation
If you are using this for HTMX, then please read the HTMX section of the documentation
Related Skills
node-connect
349.9kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
claude-opus-4-5-migration
109.8kMigrate prompts and code from Claude Sonnet 4.0, Sonnet 4.5, or Opus 4.1 to Opus 4.5
frontend-design
109.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
model-usage
349.9kUse CodexBar CLI local cost usage to summarize per-model usage for Codex or Claude, including the current (most recent) model or a full model breakdown. Trigger when asked for model-level usage/cost data from codexbar, or when you need a scriptable per-model summary from codexbar cost JSON.
