| Name | html2dash JSON |
| Version |
0.2.4
JSON |
| download |
| home_page | |
| Summary | Convert an HTML layout to a plotly dash layout |
| upload_time | 2024-01-02 15:17:54 |
| maintainer | |
| docs_url | None |
| author | |
| requires_python | >=3.7 |
| license | MIT License Copyright (c) 2023, Najeem Muhammed Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| keywords |
dash
plotly
html
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# html2dash
Write 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 parsers
- Cannot 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.
## Installation
```bash
pip install html2dash
```
## Examples
Here is a simple example:
```python
from dash import Dash
from html2dash import html2dash
app = 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 like `id`, `class`, `style` etc. These
will be converted to equivalent dash attributes. For example:
```python
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:
```python
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 in `dash.html` module. If `html2dash` does
not find the tag in `dash.html`, it will search in the `dash.dcc` module.
```python
from html2dash import html2dash
layout = html2dash("""
<div>
<h1>Hello World</h1>
<p>This is a paragraph</p>
<Input id="my-input" value="Hello World" />
</div>
""")
```
Here, `Input` is not found in `dash.html` module. So, it will search in `dash.dcc`
module and find `dcc.Input` and convert it to `dcc.Input(id="my-input", value="Hello World")`.
The order in which `html2dash` searches for tags is:
1. `dash.html`
2. `dash.dcc`
You can add additional component libraries to the module list as follows.
```python
from html2dash import html2dash, settings
import dash_mantine_components as dmc
# 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 to `DashIconify` as follows.
```python
from html2dash import html2dash, settings
from dash_iconify import DashIconify
settings["element-map"]["icon"] = DashIconify
layout = html2dash("""
<div>
<h1>Icon example</h1>
<icon icon="mdi:home"/>
</div>
""")
```
## Display a pandas dataframe in dash
Since pandas dataframes come with a `to_html` method, you can easily display
them in dash using `html2dash`.
```python
import pandas as pd
from html2dash import html2dash
df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
layout = html2dash(df.to_html())
```
If you want to use `dash_mantine_components` to display the dataframe, you can
do the following.
```python
import pandas as pd
from html2dash import html2dash, settings
import dash_mantine_components as dmc
# <table> would have been mapped to dash.html.Table
# But, we want to use dmc.Table instead.
settings["element-map"]["table"] = dmc.Table
df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
layout = html2dash(df.to_html())
```
`html2dash` can handle multi-index dataframes as well.
```python
import pandas as pd
from html2dash import html2dash, settings
import dash_mantine_components as dmc
settings["element-map"]["table"] = dmc.Table
df = 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 tags
html 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:
```python
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 except `input` are found in `dash.html` module.
And for input tag, the following will be the sequence of searches:
1. Search for `input` in `dash.html` >> Not found
2. Search for `Input` in `dash.html` >> Not found
3. Search for `input` in `dash.dcc` >> Not found
4. Search for `Input` in `dash.dcc` >> Found
Raw data
{
"_id": null,
"home_page": "",
"name": "html2dash",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": "",
"keywords": "dash,plotly,html",
"author": "",
"author_email": "Najeem Muhammed <najeem@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/93/00/50658f32ab96325943193b4fd5e9e9d5b77a5855f09a19437b31978d3a2c/html2dash-0.2.4.tar.gz",
"platform": null,
"description": "# html2dash\n\nWrite your dash layout in html/xml form.\n\n## Why does this package exist?\n\nDash is a great framework for building web apps using only python (no html/css/\njavascript). If you have used dash long enough, you must have noticed some of the\nfollowing.\n\n- For larger layouts, the python code becomes very long and hard to read.\n- Sometimes I get the html form of a class (like pandas dataframe), but I\n cannot easily display that in dash.\n- Use html from markdown parsers\n- Cannot copy paste html code from examples on the web.\n- Cannot use tools like emmet to generate html code.\n\nhtml2dash solves these problems by allowing you to write your dash layout in\nhtml/xml form. It converts the html/xml code to equivalent dash layout code.\n\n## Installation\n\n```bash\npip install html2dash\n```\n\n## Examples\n\nHere is a simple example:\n\n```python\nfrom dash import Dash\nfrom html2dash import html2dash\n\napp = Dash(__name__)\n\nlayout = \"\"\"\n<div>\n <h1>Hello World</h1>\n <p>This is a paragraph</p>\n <div>\n <h2>Subheading</h2>\n <p>Another paragraph</p>\n </div>\n</div>\n\"\"\"\n\napp.layout = html2dash(layout)\n```\n\nYou can define attributes like `id`, `class`, `style` etc. These\nwill be converted to equivalent dash attributes. For example:\n\n```python\nlayout = \"\"\"\n<div id=\"my-div\" class=\"my-class\" style=\"color: red;\">\n <h1>Hello World</h1>\n <p>This is a paragraph</p>\n <div>\n <h2>Subheading</h2>\n <p>Another paragraph</p>\n </div>\n</div>\n\"\"\"\n```\n\nThis is equivalent to:\n\n```python\nlayout = html.Div(\n id=\"my-div\",\n className=\"my-class\",\n style={\"color\": \"red\"},\n children=[\n html.H1(\"Hello World\"),\n html.P(\"This is a paragraph\"),\n html.Div(\n children=[\n html.H2(\"Subheading\"),\n html.P(\"Another paragraph\"),\n ]\n )\n ]\n)\n```\n\nYou can use any html tag that appears in `dash.html` module. If `html2dash` does\nnot find the tag in `dash.html`, it will search in the `dash.dcc` module.\n\n```python\nfrom html2dash import html2dash\n\nlayout = html2dash(\"\"\"\n<div>\n <h1>Hello World</h1>\n <p>This is a paragraph</p>\n <Input id=\"my-input\" value=\"Hello World\" />\n</div>\n\"\"\")\n```\n\nHere, `Input` is not found in `dash.html` module. So, it will search in `dash.dcc`\nmodule and find `dcc.Input` and convert it to `dcc.Input(id=\"my-input\", value=\"Hello World\")`.\n\nThe order in which `html2dash` searches for tags is:\n\n1. `dash.html`\n2. `dash.dcc`\n\nYou can add additional component libraries to the module list as follows.\n\n```python\nfrom html2dash import html2dash, settings\nimport dash_mantine_components as dmc\n\n# settings[\"modules\"] is a list of modules to search for tags.\n# Default value is [html, dcc]\nsettings[\"modules\"].append(dmc)\n\nlayout = html2dash(\"\"\"\n<div>\n <h1>Hello World</h1>\n <p>This is a paragraph</p>\n <div>\n <Badge>Default</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n </div>\n</div>\n\"\"\")\n```\n\nYou can also map html tags to dash components. For example, if you dont want to\nuse `<icon>` tag, you can map it to `DashIconify` as follows.\n\n```python\nfrom html2dash import html2dash, settings\nfrom dash_iconify import DashIconify\n\nsettings[\"element-map\"][\"icon\"] = DashIconify\n\nlayout = html2dash(\"\"\"\n<div>\n <h1>Icon example</h1>\n <icon icon=\"mdi:home\"/>\n</div>\n\"\"\")\n```\n\n## Display a pandas dataframe in dash\n\nSince pandas dataframes come with a `to_html` method, you can easily display\nthem in dash using `html2dash`.\n\n```python\nimport pandas as pd\nfrom html2dash import html2dash\n\ndf = pd.DataFrame({\"a\": [1, 2, 3], \"b\": [4, 5, 6]})\nlayout = html2dash(df.to_html())\n```\n\nIf you want to use `dash_mantine_components` to display the dataframe, you can\ndo the following.\n\n```python\nimport pandas as pd\nfrom html2dash import html2dash, settings\nimport dash_mantine_components as dmc\n\n# <table> would have been mapped to dash.html.Table\n# But, we want to use dmc.Table instead.\nsettings[\"element-map\"][\"table\"] = dmc.Table\n\ndf = pd.DataFrame({\"a\": [1, 2, 3], \"b\": [4, 5, 6]})\nlayout = html2dash(df.to_html())\n```\n\n`html2dash` can handle multi-index dataframes as well.\n\n```python\nimport pandas as pd\nfrom html2dash import html2dash, settings\nimport dash_mantine_components as dmc\n\nsettings[\"element-map\"][\"table\"] = dmc.Table\n\ndf = pd.DataFrame(\n {\n (\"a\", \"b\"): [1, 2, 3],\n (\"a\", \"c\"): [4, 5, 6],\n (\"d\", \"e\"): [7, 8, 9],\n }\n)\nlayout = html2dash(df.to_html())\n```\n\n## Case sensitivity of html tags\n\nhtml tags are case insensitive. So, `<div>` and `<DIV>` are equivalent. But,\nhtml2dash is partly case sensitive. For any tag, it first tries to find the tag\nwith the given case. If it does not find the tag, it tries to find the tag with\nthe first letter capitalized.\n\nFor example, if you have the following layout:\n\n```python\nlayout = html2dash(\"\"\"\n<div>\n <h1>Hello World</h1>\n <p>This is a paragraph</p>\n <input id=\"my-input\" value=\"Hello World\"/>\n</div>\n\"\"\")\n```\n\nIn the above, all tags except `input` are found in `dash.html` module. \nAnd for input tag, the following will be the sequence of searches:\n\n1. Search for `input` in `dash.html` >> Not found\n2. Search for `Input` in `dash.html` >> Not found\n3. Search for `input` in `dash.dcc` >> Not found\n4. Search for `Input` in `dash.dcc` >> Found\n",
"bugtrack_url": null,
"license": "MIT License Copyright (c) 2023, Najeem Muhammed Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.",
"summary": "Convert an HTML layout to a plotly dash layout",
"version": "0.2.4",
"project_urls": {
"Bug Tracker": "https://github.com/idling-mind/html2dash/issues",
"Homepage": "https://github.com/idling-mind/html2dash"
},
"split_keywords": [
"dash",
"plotly",
"html"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "47c15afba0ec24494ef26ab38e771659f07f27830ef9404128c92625f7b117a5",
"md5": "c73361a339e305a13087fb5ee564e3e1",
"sha256": "5c2b004d071f408543716755593ba2fa25bd7aa3d32a1d38679958d6b5d400b5"
},
"downloads": -1,
"filename": "html2dash-0.2.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "c73361a339e305a13087fb5ee564e3e1",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 6914,
"upload_time": "2024-01-02T15:17:53",
"upload_time_iso_8601": "2024-01-02T15:17:53.048791Z",
"url": "https://files.pythonhosted.org/packages/47/c1/5afba0ec24494ef26ab38e771659f07f27830ef9404128c92625f7b117a5/html2dash-0.2.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "930050658f32ab96325943193b4fd5e9e9d5b77a5855f09a19437b31978d3a2c",
"md5": "26dcd6cac531536c50a5a86f9deb8842",
"sha256": "2b83176dbd1fac3365f67eae87384c7307c1acd96ee4cd0406d2d1bb6191c1ff"
},
"downloads": -1,
"filename": "html2dash-0.2.4.tar.gz",
"has_sig": false,
"md5_digest": "26dcd6cac531536c50a5a86f9deb8842",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 6632,
"upload_time": "2024-01-02T15:17:54",
"upload_time_iso_8601": "2024-01-02T15:17:54.807029Z",
"url": "https://files.pythonhosted.org/packages/93/00/50658f32ab96325943193b4fd5e9e9d5b77a5855f09a19437b31978d3a2c/html2dash-0.2.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-01-02 15:17:54",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "idling-mind",
"github_project": "html2dash",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "html2dash"
}
