HTML/SVG tag generator for minimalist
- all elements output are pure string, simple and easy to manipulate
- no classes or objects, only functions
- all standard html and svg elements are included
- create nested child elements with list of strings and elements
- able to create custom elements
- create value-less(boolean) attributes with positional argument
- handy for using with UnoCSS attributify mode
- pure python, no external dependencies
- high test coverage
- installation:
pip install tagit
- basic signature
element(tag_content: str | list | None = None, *args, **kwargs) -> str
# common elements
from tagit import div, img, p, ul, li, label, input_,
# empty tag
print(div())
# <div />
# None content is ignored
print(div(None))
# <div />
# empty string content creates closing tag
print(div(""))
# <div></div>
# tag as content
print(div(img(src="url"), id="bar"))
# <div id="bar"><img src="url"/></div>
# content mix with strings and tags
print(div(["foo", img(src="url"), "bar")])
# <div>foo<img src="url"/>bar</div>
- use trailing underscore to work around python keyword and built-in functions
- attributes:
class_
->class
for_
->for
- elements:
del_
->del
input_
->input
map_
->map
object_
->object
print(label("foo", for_="bar"))
# <label for="bar">foo</label>
print(input_(None, class_="foo", name="bar", type="checkbox", value="baz"))
# <input name="bar" type="checkbox" value="baz"/>
- position args -> value-less attribute.
- boolean attribute: eg.
checked
,disabled
,selected
- assign tailwind classes with UnoCSS attributify mode
- boolean attribute: eg.
print(div("foo", "clear-both", "m-2", "rounded", id="baz"))
# <div clear-both m-2 rounded id="baz">foo</div>
- keyword argument with value None is ignored
tag = div(None, "m-2", "rounded", id="baz", style=None)
print(tag)
# <div m-2 rounded id="baz" />
- create custom element
- signature:
tag(tag_name: str, tag_content: str | list | None = None, *args, **kwargs) -> str
from tagit import tag
tag('div')
# <div />'
tag('div', 'Hello', id='greeting', class_='text-bold')
# <div id="greeting" class="text-bold">Hello</div>
tag('input', type='text', required='')
# <input type="text" required="" />'
tag('ul', [tag('li', 'Item 1'), tag('li', 'Item 2')])
# <ul><li>Item 1</li><li>Item 2</li></ul>
tag('button', 'Click me', 'disabled', class_='btn')
# <button disabled class="btn">Click me</button>
tag('div', 'Content', 'data-custom', id='example', aria_hidden='true')
# <div data-custom id="example" aria-hidden="true">Content</div>
tag("MyElement", tag_content="foo", props="bar")
# <MyElement props="bar">foo</MyElement>
When creating simple website, instead of separating python and template files like this:
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
I prefer a pure python approach like this:
ul(
[
li(
a(item.caption, href=item.href)
)
for item in navigation
],
id = "navigation"
)
It provides full intellisense, type checking, and all language features from the text editor, a much better DX.