# tagit
[![ci-badge]][ci-url] [![pypi-badge]][pypi-url] [![MIT-badge]][MIT-url] [![black-badge]][black-url]
> simple and pythonic way to write html/svg tags
## Key Features
- all elements output are pure string, simple and easy to manipulate
- only functions are exported, no classes or objects
- all standard html and svg elements are exported as functions
- create nested child elements with list of strings or elements
- able to create custom elements
- create value-less(boolean) attributes with empty string or positional argument
- handy for using with [UnoCSS] attributify mode
## Installation
`pip install tagit`
## Quick Start
- import common html elements
```python
# all html/svg elements are available as functions
from tagit import div
div('hi', id='foo')
# <div id="foo" class="bar">hi</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`
```python
from tagit import label, input_
label('username', for_='username') + input_(type="text", id="username", class_="bar")
# <label for="username">username</label><input type="text" id="username" class="bar"/>
```
- value-less(boolean) attributes. eg. `checked`, `disabled`, `selected`
- to denote value-less attribute:
- use empty string, eg. `checked=""`
- use positional argument
```python
div(img(src='url'), class_='bar', checked="")
# <div class="bar" checked><img src="url"/></div>
input_(None, 'disabled', type='text')
# <input disabled type="text"/>
```
- create custom element
```python
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>
```
- more examples available at [demo.py] file and the [tests] package
## Motivation
When creating simple website, instead of separating python and template files like this:
```html
<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:
```python
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.
## Need Help?
Open a [github issue] or ping me on [X ![x-icon]][X]
[black-badge]: https://img.shields.io/badge/code%20style-black-000000.svg
[black-url]: https://github.com/psf/black
[ci-badge]: https://github.com/hoishing/tagit/actions/workflows/ci.yml/badge.svg
[ci-url]: https://github.com/hoishing/tagit/actions/workflows/ci.yml
[demo.py]: https://github.com/hoishing/tagit/blob/main/demo.py
[github issue]: https://github.com/hoishing/tagit/issues
[MIT-badge]: https://img.shields.io/github/license/hoishing/tagit
[MIT-url]: https://opensource.org/licenses/MIT
[pypi-badge]: https://img.shields.io/pypi/v/tagit
[pypi-url]: https://pypi.org/project/tagit/
[tests]: https://github.com/hoishing/tagit/blob/main/tests/test_main.py
[UnoCSS]: https://github.com/unocss/unocss
[x-icon]: https://api.iconify.design/logos/twitter.svg?width=20
[X]: https://x.com/hoishing
Raw data
{
"_id": null,
"home_page": "https://github.com/hoishing/tagit",
"name": "tagit",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.12",
"maintainer_email": null,
"keywords": "template, html, svg",
"author": "Kelvin Ng",
"author_email": "hoishing@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/81/3d/5abc5c25363c6b47495b8d0472aa9b92813d1b1c630db26c18a24cec9b94/tagit-0.6.1.tar.gz",
"platform": null,
"description": "# tagit\n\n[![ci-badge]][ci-url] [![pypi-badge]][pypi-url] [![MIT-badge]][MIT-url] [![black-badge]][black-url]\n\n> simple and pythonic way to write html/svg tags\n\n## Key Features\n\n- all elements output are pure string, simple and easy to manipulate\n- only functions are exported, no classes or objects\n- all standard html and svg elements are exported as functions\n- create nested child elements with list of strings or elements\n- able to create custom elements\n- create value-less(boolean) attributes with empty string or positional argument\n - handy for using with [UnoCSS] attributify mode\n\n## Installation\n\n`pip install tagit`\n\n## Quick Start\n\n- import common html elements\n\n```python\n# all html/svg elements are available as functions\nfrom tagit import div\n\ndiv('hi', id='foo')\n# <div id=\"foo\" class=\"bar\">hi</div>\n```\n\n- use trailing underscore to work around python keyword and built-in functions\n- attributes:\n - `class_` -> `class`\n - `for_` -> `for`\n- elements:\n - `del_` -> `del`\n - `input_` -> `input`\n - `map_` -> `map`\n - `object_` -> `object`\n\n```python\nfrom tagit import label, input_\n\nlabel('username', for_='username') + input_(type=\"text\", id=\"username\", class_=\"bar\")\n# <label for=\"username\">username</label><input type=\"text\" id=\"username\" class=\"bar\"/>\n```\n\n- value-less(boolean) attributes. eg. `checked`, `disabled`, `selected`\n- to denote value-less attribute: \n - use empty string, eg. `checked=\"\"`\n - use positional argument\n\n```python\ndiv(img(src='url'), class_='bar', checked=\"\")\n# <div class=\"bar\" checked><img src=\"url\"/></div>\n\ninput_(None, 'disabled', type='text')\n# <input disabled type=\"text\"/>\n```\n\n- create custom element\n\n```python\nfrom tagit import tag\n\ntag('div')\n# <div />'\n\ntag('div', 'Hello', id='greeting', class_='text-bold')\n# <div id=\"greeting\" class=\"text-bold\">Hello</div>\n\ntag('input', type='text', required='')\n# <input type=\"text\" required />'\n\ntag('ul', [tag('li', 'Item 1'), tag('li', 'Item 2')])\n# <ul><li>Item 1</li><li>Item 2</li></ul>\n\ntag('button', 'Click me', 'disabled', class_='btn')\n# <button disabled class=\"btn\">Click me</button>\n\ntag('div', 'Content', 'data-custom', id='example', aria_hidden='true')\n# <div data-custom id=\"example\" aria-hidden=\"true\">Content</div>\n\ntag(\"MyElement\", tag_content=\"foo\", props=\"bar\")\n# <MyElement props=\"bar\">foo</MyElement>\n```\n\n- more examples available at [demo.py] file and the [tests] package\n\n## Motivation\n\nWhen creating simple website, instead of separating python and template files like this:\n\n```html\n<ul id=\"navigation\">\n {% for item in navigation %}\n <li><a href=\"{{ item.href }}\">{{ item.caption }}</a></li>\n {% endfor %}\n</ul>\n```\n\nI prefer a pure python approach like this:\n\n```python\nul(\n [\n li(\n a(item.caption, href=item.href)\n )\n for item in navigation\n ],\n id = \"navigation\"\n)\n```\n\nIt provides full intellisense, type checking, and all language features from the text editor, a much better DX.\n\n## Need Help?\n\nOpen a [github issue] or ping me on [X ![x-icon]][X]\n\n[black-badge]: https://img.shields.io/badge/code%20style-black-000000.svg\n[black-url]: https://github.com/psf/black\n[ci-badge]: https://github.com/hoishing/tagit/actions/workflows/ci.yml/badge.svg\n[ci-url]: https://github.com/hoishing/tagit/actions/workflows/ci.yml\n[demo.py]: https://github.com/hoishing/tagit/blob/main/demo.py\n[github issue]: https://github.com/hoishing/tagit/issues\n[MIT-badge]: https://img.shields.io/github/license/hoishing/tagit\n[MIT-url]: https://opensource.org/licenses/MIT\n[pypi-badge]: https://img.shields.io/pypi/v/tagit\n[pypi-url]: https://pypi.org/project/tagit/\n[tests]: https://github.com/hoishing/tagit/blob/main/tests/test_main.py\n[UnoCSS]: https://github.com/unocss/unocss\n[x-icon]: https://api.iconify.design/logos/twitter.svg?width=20\n[X]: https://x.com/hoishing\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "simple and pythonic way to write html/svg tags",
"version": "0.6.1",
"project_urls": {
"Homepage": "https://github.com/hoishing/tagit",
"Repository": "https://github.com/hoishing/tagit"
},
"split_keywords": [
"template",
" html",
" svg"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "a5d1be58b5bc41e3c1d007d07f44305fb64460cb0d6683afa8e6758b5a099828",
"md5": "75c6c4134dafd8d90e9937c41985b620",
"sha256": "3794488bae23772f16f1b485e19ef6278dde158fc8410c04c989fbcf582bde4f"
},
"downloads": -1,
"filename": "tagit-0.6.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "75c6c4134dafd8d90e9937c41985b620",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.12",
"size": 7966,
"upload_time": "2024-10-06T04:45:13",
"upload_time_iso_8601": "2024-10-06T04:45:13.920215Z",
"url": "https://files.pythonhosted.org/packages/a5/d1/be58b5bc41e3c1d007d07f44305fb64460cb0d6683afa8e6758b5a099828/tagit-0.6.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "813d5abc5c25363c6b47495b8d0472aa9b92813d1b1c630db26c18a24cec9b94",
"md5": "b1b735f168481dcf8f177a98d0a72eaa",
"sha256": "72c385381c83aa74c9bf85e57068a2b51ff4e083919d9cffb3f75a12e6883564"
},
"downloads": -1,
"filename": "tagit-0.6.1.tar.gz",
"has_sig": false,
"md5_digest": "b1b735f168481dcf8f177a98d0a72eaa",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.12",
"size": 6764,
"upload_time": "2024-10-06T04:45:15",
"upload_time_iso_8601": "2024-10-06T04:45:15.420893Z",
"url": "https://files.pythonhosted.org/packages/81/3d/5abc5c25363c6b47495b8d0472aa9b92813d1b1c630db26c18a24cec9b94/tagit-0.6.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-06 04:45:15",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "hoishing",
"github_project": "tagit",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "tagit"
}
JSON
