pelme / htpy Goto Github PK

View Code? Open in Web Editor NEW

37.0 4.0 5.0 1.03 MB

Generate HTML from Python

Home Page: http://htpy.dev

License: MIT License

Python 100.00%

htpy's Introduction

htpy - HTML in Python

htpy is a library that makes writing HTML in plain Python fun and efficient, without a template language.

Define HTML in Python:

from htpy import body, h1, head, html, li, title, ul

menu = ["egg+bacon", "bacon+spam", "eggs+spam"]

print(
    html[
        head[title["Todays menu"]],
        body[
            h1["Menu"],
            ul(".menu")[(li[item] for item in menu)],
        ],
    ]
)

And get HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Todays menu</title>
  </head>
  <body>
    <h1>Menu</h1>
    <ul class="menu">
      <li>egg+bacon</li>
      <li>bacon+spam</li>
      <li>eggs+spam</li>
    </ul>
  </body>
</html>

Motivation for this project

At Personalkollen, where htpy was originally developed we often found ourselves hitting walls when using classic templates. htpy was created to improve the productiveness and experience of generating HTML from a Python backend.

Key features

Leverage static types: Use mypy or pyright to type check your code.
Great debugging: Avoid cryptic stack traces from templates. Use your favorite Python debugger.
Easy to extend: There is no special way to define template tags/filters. Just call regular functions.
Works with existing Python web framework: Works great with Django, Flask or any other Python web framework!
Works great with htmx: htpy makes for a great experience when writing server rendered partials/components.
Create reusable components: Define components, snippets, complex layouts/pages as regular Python variables or functions.
Familiar concepts from React: React helped make it popular writing HTML with a programming language. htpy uses a lot of similar constructs.

Philosophy

htpy generates HTML elements and attributes and provide a few helpers.

htpy does not enforce any particular pattern or style to organize your pages, components and layouts. That does not mean that htpy cannot be used to build sophisticated web pages or applications.

Rather the opposite: you are encouraged the leverage the power of Python to structure your project. Use modules, classes, functions, decorators, list comprehension, generators, conditionals, static typing and any other feature of Python to organize your components. This gives you a lot of power and makes htpy scale from a single small Flask project to bigger applications.

Common patterns can give you some ideas that you can build upon yourself.

Installation

htpy is available on PyPI. You may install the latest version using pip:

pip install htpy

Documentation

The full documentation is available at https://htpy.dev:

htpy's People

Contributors

Stargazers

Watchers

Forkers

majsvaffla saeldion bessey stabbarn olejoik

htpy's Issues

[question] Are elements for inline CSS?

Thanks for this well-designed library. Is there any other way to add inline css than providing the entire css code as a string within the htpy.style element? If not, are there any plans for adding a similar python-code-based mechanism to build up inline CSS?

Thank you,
Christoph

ImportError in Python 3.10

I'm getting an error in an Python 3.10 environment:

ImportError: cannot import name 'Self' from 'typing' (/Users/pietz/.pyenv/versions/3.10.13/lib/python3.10/typing.py)

This error doesn't appear in Python 3.11. I would really appreciate the Python 3.10 backwards compatibility because that's the latest version Azure Static Web Apps supports.

An exported "safe" element

Hello! I was using htpy with flask and noticed that strings included in an htpy element are auto-escaped by default. This is obviously fine and good, but when trying to insert something like a hardcoded query-string or a script tag that uses &, I noticed that they get escaped as well. I found a workaround by looking at how markupsafe works (wrapping the script or url in a class that provides an __html__ attr), but it required a bit of digging.

Would it be out of scope to provide an exported safe "pseudo-tag", which just escapes the auto-escaping?

Configure Github Actions for testing

Currently, I run tests/type checking manually via https://github.com/pelme/htpy/blob/d4677100b595b590426bf6dc12c07c2de7944eec/scripts/test before release.

It would be nice to add pre-commit checks for ruff format/ruff check and github actions workflows for pytest, mypy and pyright. It would also be a good idea to test on differentPython versions(3.10, 3.11 and 3.12).

Allow nested lists/tuples/"fragments"

It is not easy to add multiple children from a loop/list comprehension, we should allow some kind of fragments. Maybe it could work like this:

mydllist = dl[((dt[name], dd[age]) for name, age in persons)]

[Idea] allow repeated attribute extension!

Hey guys, saw your pip package in an HN thread and it really scratched an itch for me. I've been playing around with it and Tailwind to see if I can build a Python native UI framework.

This script:

import htpy as h

button = h.button(".btn")

submit_input = h.input(".btn", type="submit")

checkbox_input = h.input(".checkbox", type="checkbox")

print(
    h.div[
        h.p["Hello, World!"],
        button(".bottom")["Click me!"],
        checkbox_input(name="test"),
        submit_input(value="Submit"),
    ]
)

Outputs: (I'm adding newlines for readability)

<div>
<p>Hello, World!</p>
<button class="bottom">Click me!</button>
<input name="test"><input value="Submit">
</div>

Where as I would have expected successive Element() calls to accumulate attributes, and intelligently merge accumulated classes, e.g.

<div>
<p>Hello, World!</p>
<button class="btn bottom">Click me!</button>
<input class="checkbox" type="checkbox" name="test">
<input class="btn" type="submit" value="Submit">
</div>

For what its worth, with just one line change I was able to get the attribute accumulation by prepending **self._attrs, here.

Thoughts? I appreciate this can be worked around with the UI Component pattern you mention, but applying that at such a low level makes composition quite painful. Presumably you would end up almost never being able to use the clever element()[] syntax since its all wrapped in method calls.