Package: uidom
UiDOMAn HTML library for pythonThis 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.Installation> pip install uidomAn Alpinejs toggle example#!/usr/bin/env python# app.py"""This example should work as is."""fromfastapiimportFastAPIfromuidomimportDocumentfromuidom.domimportComponent,script,title,divfromuidom.routing.fastapiimportStreamingRoutedocument=Document(body=[script(src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js",defer=None,rel="prefetch")])api=FastAPI()api.router.route_class=StreamingRouteclassToggleButton(Component):defrender(self):withdiv(x_data={'open':'true'})astoggle:withdiv(x_on_click='open = !open'):div("Opened",x_show="open"),div("Closed",x_show="!open"),returntoggleclassApp(Component):defrender(self,*args,**kwargs):returndocument(*args,**kwargs,,head=title('App Page'))@api.get('/')defindex():returnApp(ToggleButton())A Jinja template examplefromuidom.domimportnav,ul,For,li,a,Var,JinjaElementfromcollectionsimportnamedtupleasntclassNav(JinjaElement):defrender(self):returnnav(ul(For("item in menu_items",li(a(Var("item.name"),href=Var("item.link"))),)))# or we can write Jinja Element directlyNav=lambda:JinjaElement(nav(ul(For("item in menu_items",li(a(Var("item.name"),href=Var("item.link")))))))nav_bar=Nav()menu_url=nt("menu_url","name link")# nav_bar element is a jinja template and has an internal representation as follows<nav><ul>{% for item in menu_items %}<li><ahref="{{ item.link }}">{{ item.name }}</a></li>{% endfor %}</ul></nav># now we can use nav_bar just like we use jinja templates and render it as followsnav_bar(menu_items=[menu_url("Home",r"\home.html"),menu_url("About",r"\about.html"),menu_url("Contact Us",r"\contact_us.html"),])# it creates an element as follows<nav><ul><li><ahref="\home.html">Home</a></li><li><ahref="\about.html">About</a></li><li><ahref="\contact_us.html">Contact Us</a></li></ul></nav>using markdown with uidom elementsfromuidom.domimportMarkdownElementem_text=MarkdownElement("*hello world*")print(em_text)# it returns following string<p><em>hello world</em></p># MarkdownElement can be used as follows tooclassHelloWorld(MarkdownElement):defrender(self):return"*hello world*"# now HelloWorld instance gives the same# outputprint(HelloWorld())<p><em>hello world</em></p>using raw html with uidom elementsfromuidom.domimport*classModal(Component):defrender(self,*args,**kwargs):return'''<div x-data="{ open: false }"><!-- Button --><button x-on:click="open = true" type="button"class="px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400">Login</button><!-- Modal --><div x-show="open" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true"x-id="['modal-title']" :aria-labelledby="$id('modal-title')" class="fixed inset-0 overflow-y-auto"><!-- Overlay --><div x-show="open" x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div><!-- Panel --><div x-show="open" x-transition x-on:click="open = false"class="relative flex items-center justify-center min-h-screen p-4"><div x-on:click.stop x-trap.noscroll.inert="open"class="relative w-full max-w-2xl p-8 overflow-y-auto bg-white border border-black rounded-md"><form wire:submit.prevent="login" action="" class=""><!-- Title --><h2 class="text-3xl font-medium" :id="$id('modal-title')">Confirm</h2><!-- Content --><div class="space-y-3"><div class=""><input wire:model.defer="email" type="email" class="w-full rounded-md"></div><div class=""><input wire:model.defer="password" type="password" class="w-full rounded-md"></div></div><!-- Buttons --><div class="flex mt-8 space-x-2"><button  type="submit" x-on:click="open = false"class="px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400">Confirm</button><button type="button" x-on:click="open = false"class="px-4 py-2 bg-white border border-black focus:outline-none focus:ring-4 focus:ring-aqua-400">Cancel</button></div></form></div></div></div></div>'''LICENSEthis library is licensed under MIT (MIT-LICENSE)