Package: html2dash
html2dashWrite your dash layout in html/xml form.Why does this package exist?Dash is a great framework for building web apps using only python (no html/css/
javascript). If you have used dash long enough, you must have noticed some of the
following.For larger layouts, the python code becomes very long and hard to read.Sometimes I get the html form of a class (like pandas dataframe), but I
cannot easily display that in dash.Use html from markdown parsersCannot copy paste html code from examples on the web.Cannot use tools like emmet to generate html code.html2dash solves these problems by allowing you to write your dash layout in
html/xml form. It converts the html/xml code to equivalent dash layout code.Installationpipinstallhtml2dashExamplesHere is a simple example:fromdashimportDashfromhtml2dashimporthtml2dashapp=Dash(__name__)layout="""<div><h1>Hello World</h1><p>This is a paragraph</p><div><h2>Subheading</h2><p>Another paragraph</p></div></div>"""app.layout=html2dash(layout)You can define attributes likeid,class,styleetc. These
will be converted to equivalent dash attributes. For example:layout="""<div id="my-div" class="my-class" style="color: red;"><h1>Hello World</h1><p>This is a paragraph</p><div><h2>Subheading</h2><p>Another paragraph</p></div></div>"""This is equivalent to:layout=html.Div(id="my-div",className="my-class",style={"color":"red"},children=[html.H1("Hello World"),html.P("This is a paragraph"),html.Div(children=[html.H2("Subheading"),html.P("Another paragraph"),])])You can use any html tag that appears indash.htmlmodule. Ifhtml2dashdoes
not find the tag indash.html, it will search in thedash.dccmodule.fromhtml2dashimporthtml2dashlayout=html2dash("""<div><h1>Hello World</h1><p>This is a paragraph</p><Input id="my-input" value="Hello World" /></div>""")Here,Inputis not found indash.htmlmodule. So, it will search indash.dccmodule and finddcc.Inputand convert it todcc.Input(id="my-input", value="Hello World").The order in whichhtml2dashsearches for tags is:dash.htmldash.dccYou can add additional component libraries to the module list as follows.fromhtml2dashimporthtml2dash,settingsimportdash_mantine_componentsasdmc# settings["modules"] is a list of modules to search for tags.# Default value is [html, dcc]settings["modules"].append(dmc)layout=html2dash("""<div><h1>Hello World</h1><p>This is a paragraph</p><div><Badge>Default</Badge><Badge variant="outline">Outline</Badge></div></div>""")You can also map html tags to dash components. For example, if you dont want to
use<icon>tag, you can map it toDashIconifyas follows.fromhtml2dashimporthtml2dash,settingsfromdash_iconifyimportDashIconifysettings["element-map"]["icon"]=DashIconifylayout=html2dash("""<div><h1>Icon example</h1><icon icon="mdi:home"/></div>""")Display a pandas dataframe in dashSince pandas dataframes come with ato_htmlmethod, you can easily display
them in dash usinghtml2dash.importpandasaspdfromhtml2dashimporthtml2dashdf=pd.DataFrame({"a":[1,2,3],"b":[4,5,6]})layout=html2dash(df.to_html())If you want to usedash_mantine_componentsto display the dataframe, you can
do the following.importpandasaspdfromhtml2dashimporthtml2dash,settingsimportdash_mantine_componentsasdmc# <table> would have been mapped to dash.html.Table# But, we want to use dmc.Table instead.settings["element-map"]["table"]=dmc.Tabledf=pd.DataFrame({"a":[1,2,3],"b":[4,5,6]})layout=html2dash(df.to_html())html2dashcan handle multi-index dataframes as well.importpandasaspdfromhtml2dashimporthtml2dash,settingsimportdash_mantine_componentsasdmcsettings["element-map"]["table"]=dmc.Tabledf=pd.DataFrame({("a","b"):[1,2,3],("a","c"):[4,5,6],("d","e"):[7,8,9],})layout=html2dash(df.to_html())Case sensitivity of html tagshtml tags are case insensitive. So,<div>and<DIV>are equivalent. But,
html2dash is partly case sensitive. For any tag, it first tries to find the tag
with the given case. If it does not find the tag, it tries to find the tag with
the first letter capitalized.For example, if you have the following layout:layout=html2dash("""<div><h1>Hello World</h1><p>This is a paragraph</p><input id="my-input" value="Hello World"/></div>""")In the above, all tags exceptinputare found indash.htmlmodule.
And for input tag, the following will be the sequence of searches:Search forinputindash.html>> Not foundSearch forInputindash.html>> Not foundSearch forinputindash.dcc>> Not foundSearch forInputindash.dcc>> Found