{"id":16545532,"url":"https://github.com/bitplorer/uidom","last_synced_at":"2025-10-28T15:31:29.024Z","repository":{"id":44447472,"uuid":"512341977","full_name":"bitplorer/uidom","owner":"bitplorer","description":"Blade like HTML Library for Python","archived":false,"fork":false,"pushed_at":"2023-05-21T09:09:40.000Z","size":506,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-07-01T04:45:22.517Z","etag":null,"topics":["alpinejs","custom-elements","dom","hot-reload","html","htmx","python","ssr","tailwindcss","web-components"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bitplorer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-10T04:13:33.000Z","updated_at":"2023-06-06T10:04:16.000Z","dependencies_parsed_at":"2023-01-23T03:15:10.971Z","dependency_job_id":null,"html_url":"https://github.com/bitplorer/uidom","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitplorer%2Fuidom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitplorer%2Fuidom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitplorer%2Fuidom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitplorer%2Fuidom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitplorer","download_url":"https://codeload.github.com/bitplorer/uidom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219859195,"owners_count":16556036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","custom-elements","dom","hot-reload","html","htmx","python","ssr","tailwindcss","web-components"],"created_at":"2024-10-11T19:07:04.128Z","updated_at":"2025-10-28T15:31:28.663Z","avatar_url":"https://github.com/bitplorer.png","language":"Python","funding_links":[],"categories":["Libraries"],"sub_categories":["General HTML Generation"],"readme":"\u003c!--\n Copyright (c) 2022 UiDOM\n \n This software is released under the MIT License.\n https://opensource.org/licenses/MIT\n--\u003e\n\n# UiDOM\n\n## An HTML library for python\n\nThis library is inspired from dominate html library and takes it further. It supports jinja templating and many more features that we expect from an html library. We can even create Custom Elements and Web Components in UiDOM.\n\n## Installation\n\n```cmd\n\u003e pip install uidom\n```\n\n## An Alpinejs toggle example\n\n```python\n#!/usr/bin/env python\n# app.py\n\"\"\"\n This example should work as is. \n\"\"\"\nfrom fastapi import FastAPI\nfrom uidom import Document\nfrom uidom.dom import Component, script, title, div\nfrom uidom.routing.fastapi import StreamingRoute\n\ndocument = Document(body=[\n    script(src=\"https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js\", defer=None, rel=\"prefetch\")\n    ])\n\napi = FastAPI() \napi.router.route_class = StreamingRoute\n\nclass ToggleButton(Component):\n\n    def render(self):\n        with div(x_data={'open': 'true'}) as toggle:\n            with div(x_on_click='open = !open'):\n                div(\"Opened\", x_show=\"open\"), \n                div(\"Closed\", x_show=\"!open\"), \n        return toggle\n\nclass App(Component):\n\n    def render(self, *args, **kwargs):\n        return document(*args, **kwargs, , head=title('App Page'))\n\n\n@api.get('/')\ndef index():\n    return App(ToggleButton())\n\n```\n\n## A Jinja template example\n\n```python\nfrom uidom.dom import nav, ul, For, li, a, Var, JinjaElement\nfrom collections import namedtuple as nt\n\n\nclass Nav(JinjaElement):\n    def render(self):\n        return nav(\n            ul(\n                For(\n                    \"item in menu_items\",\n                    li(a(Var(\"item.name\"), href=Var(\"item.link\"))),\n                )\n            )\n        )\n\n# or we can write Jinja Element directly\n\nNav = lambda: JinjaElement(nav(ul(For(\"item in menu_items\", li(a(Var(\"item.name\"), href=Var(\"item.link\")))))))\n\nnav_bar = Nav()\nmenu_url = nt(\"menu_url\", \"name link\")\n\n# nav_bar element is a jinja template and has an internal representation as follows \n```\n\n```html\n\u003cnav\u003e\n  \u003cul\u003e\n    {% for item in menu_items %}\n      \u003cli\u003e\n        \u003ca href=\"{{ item.link }}\"\u003e\n          {{ item.name }}\n        \u003c/a\u003e\n      \u003c/li\u003e\n    {% endfor %}\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n```python\n# now we can use nav_bar just like we use jinja templates and render it as follows\n\nnav_bar(\n    menu_items=[\n        menu_url(\"Home\", r\"\\home.html\"),\n        menu_url(\"About\", r\"\\about.html\"),\n        menu_url(\"Contact Us\", r\"\\contact_us.html\"),\n    ]\n)\n\n# it creates an element as follows\n```\n\n```html\n\u003cnav\u003e\n  \u003cul\u003e\n      \u003cli\u003e\n        \u003ca href=\"\\home.html\"\u003e\n          Home\n        \u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"\\about.html\"\u003e\n          About\n        \u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n        \u003ca href=\"\\contact_us.html\"\u003e\n          Contact Us\n        \u003c/a\u003e\n      \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n## using markdown with uidom elements\n\n```python\nfrom uidom.dom import MarkdownElement\n\nem_text = MarkdownElement(\"*hello world*\")\n\nprint(em_text)\n# it returns following string\n```\n\n```html\n\u003cp\u003e\n  \u003cem\u003e\n    hello world\n  \u003c/em\u003e\n\u003c/p\u003e\n```\n\n```python\n# MarkdownElement can be used as follows too \n\nclass HelloWorld(MarkdownElement):\n    \n    def render(self):\n        return \"*hello world*\"\n\n# now HelloWorld instance gives the same \n# output\nprint(HelloWorld())\n```\n\n```html\n\u003cp\u003e\n  \u003cem\u003e\n    hello world\n  \u003c/em\u003e\n\u003c/p\u003e\n```\n\n## using raw html with uidom elements\n\n```python\nfrom uidom.dom import *\n\n\nclass Modal(Component):\n\n    def render(self, *args, **kwargs):\n        return '''\n\u003cdiv x-data=\"{ open: false }\"\u003e\n    \u003c!-- Button --\u003e\n    \u003cbutton x-on:click=\"open = true\" type=\"button\"\n        class=\"px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400\"\u003e\n        Login\n    \u003c/button\u003e\n\n    \u003c!-- Modal --\u003e\n    \u003cdiv x-show=\"open\" x-on:keydown.escape.prevent.stop=\"open = false\" role=\"dialog\" aria-modal=\"true\"\n        x-id=\"['modal-title']\" :aria-labelledby=\"$id('modal-title')\" class=\"fixed inset-0 overflow-y-auto\"\u003e\n        \u003c!-- Overlay --\u003e\n        \u003cdiv x-show=\"open\" x-transition.opacity class=\"fixed inset-0 bg-black bg-opacity-50\"\u003e\u003c/div\u003e\n\n        \u003c!-- Panel --\u003e\n        \u003cdiv x-show=\"open\" x-transition x-on:click=\"open = false\"\n            class=\"relative flex items-center justify-center min-h-screen p-4\"\u003e\n            \u003cdiv x-on:click.stop x-trap.noscroll.inert=\"open\"\n                class=\"relative w-full max-w-2xl p-8 overflow-y-auto bg-white border border-black rounded-md\"\u003e\n               \u003cform wire:submit.prevent=\"login\" action=\"\" class=\"\"\u003e\n                   \u003c!-- Title --\u003e\n                \u003ch2 class=\"text-3xl font-medium\" :id=\"$id('modal-title')\"\u003eConfirm\u003c/h2\u003e\n                \u003c!-- Content --\u003e\n                \u003cdiv class=\"space-y-3\"\u003e\n                    \u003cdiv class=\"\"\u003e\n                        \u003cinput wire:model.defer=\"email\" type=\"email\" class=\"w-full rounded-md\"\u003e\n                    \u003c/div\u003e\n\n                    \u003cdiv class=\"\"\u003e\n                        \u003cinput wire:model.defer=\"password\" type=\"password\" class=\"w-full rounded-md\"\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003c!-- Buttons --\u003e\n                \u003cdiv class=\"flex mt-8 space-x-2\"\u003e\n                    \u003cbutton  type=\"submit\" x-on:click=\"open = false\"\n                        class=\"px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400\"\u003e\n                        Confirm\n                    \u003c/button\u003e\n                    \u003cbutton type=\"button\" x-on:click=\"open = false\"\n                        class=\"px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400\"\u003e\n                        Cancel\n                    \u003c/button\u003e\n                \u003c/div\u003e\n               \u003c/form\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e'''\n\n```\n\n## LICENSE\n\n### this library is licensed under MIT (MIT-LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitplorer%2Fuidom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitplorer%2Fuidom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitplorer%2Fuidom/lists"}