"All you need is list, set and dict"
Write HTML with Python
Python Hiccup is a library for representing HTML using plain Python
data structures. It's a Python implementation of the
Hiccup syntax.
You create HTML with Python, using list or tuple to
represent HTML elements, and dict to represent the element
attributes. The work on this library started out as a fun coding challenge, and now
evolving into something useful for Python Dev teams.
Basic syntax
The first item in the list is the element. The rest is attributes, inner text or children. You can define nested structures or siblings by adding lists (or tuples if you prefer).
["div", "Hello world!"]Using the html.render function of the library, the output will be HTML as a string:
<div>Hello world!</div>
Adding id and classes:["div#foo.bar", "Hello world!"]
The HTML equivalent is:
<div id="foo" class="bar">Hello
world!</div>
If you prefer, you can define the attributes using a Python dict as an alternative to the compact syntax above: {"id": "foo", "class": "bar"}
Writing a nested HTML structure, using Python Hiccup:
["div", ["span", ["strong", "Hello world!"]]]
The HTML equivalent is:
<div><span><strong>Hello world!</strong></span></div>
Example usage
Server side rendering with FastAPI
Using the example from
the FastAPI docs
, but without the inline HTML. Instead, using the more compact and
programmatic approach with the Python-friendly hiccup syntax.
from python_hiccup.html import render
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
app = FastAPI()
def generate_html_response():
data = ["html",
["head", ["title", "Some HTML in here"]],
["body", ["h1", "Look ma! HTML!"]]]
return HTMLResponse(content=render(data), status_code=200)
@app.get("/items/", response_class=HTMLResponse)
async def read_items():
return generate_html_response()
PyScript
Add python-hiccup as any other third-party dependency in the
package.toml file:
packages = ["python-hiccup"]
Write the HTML rendering in your PyScript files:
from pyweb import pydom from python_hiccup.html import render pydom["div#main"].html = render(["h1", "Look ma! HTML!"])
That's it!
python-hiccup aims to make HTML rendering programmatic, simple and readable. I hope you will find it useful. The HTML in this blog post was written using python-hiccup.
Resources
Top photo by Susan Holt Simpson on Unsplash