{"id":16778500,"url":"https://github.com/pierxuy/html-to-dash","last_synced_at":"2025-04-10T20:43:26.849Z","repository":{"id":194259706,"uuid":"690572359","full_name":"PierXuY/html-to-dash","owner":"PierXuY","description":"Convert HTML to dash format.","archived":false,"fork":false,"pushed_at":"2023-10-11T13:46:15.000Z","size":86,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T18:12:56.481Z","etag":null,"topics":["dash","dash-svg","html","svg"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PierXuY.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-12T13:02:47.000Z","updated_at":"2025-02-22T08:22:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"8519f1c5-a5cf-461f-a1d8-4c17d346aea0","html_url":"https://github.com/PierXuY/html-to-dash","commit_stats":null,"previous_names":["pierxuy/html_to_dash","pierxuy/dash_to_html"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierXuY%2Fhtml-to-dash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierXuY%2Fhtml-to-dash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierXuY%2Fhtml-to-dash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PierXuY%2Fhtml-to-dash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PierXuY","download_url":"https://codeload.github.com/PierXuY/html-to-dash/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248293948,"owners_count":21079752,"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":["dash","dash-svg","html","svg"],"created_at":"2024-10-13T07:27:51.762Z","updated_at":"2025-04-10T20:43:26.830Z","avatar_url":"https://github.com/PierXuY.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-to-dash\nConvert HTML to dash format.\n\n# Installation\n`pip install html-to-dash`\n\n# Examples\n## Basic usage\n```python\nfrom html_to_dash import parse_html\nelement_str = \"\"\"\n\u003cdiv\u003e\n    \u003cdiv class='bg-gray-800' style='color:red;margin:10px'\u003e\n        \u003csvg aria-label=\"Ripples. Logo\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003c/svg\u003e\n        \u003ca href=\"#\" id=\"link1\"\u003eA\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003etext\u003c/div\u003e\n    \u003cdiv\u003e\u003ca href=\"#\" id=\"link1\"\u003ea1\u003c/a\u003etail1\u003ca href=\"#\" id=\"link2\"\u003ea2\u003c/a\u003etail2\u003c/div\u003e\n\u003c/div\u003e\n\"\"\"\nparse_html(element_str)\n```\nPrint:\n```\n# Tags : Unsupported [svg] removed.\nResult:\nhtml.Div(\n    children=[\n        html.Div(\n            className=\"bg-gray-800\",\n            style={\"color\": \"red\", \"margin\": \"10px\"},\n            children=[html.A(href=\"#\", id=\"link1\", children=[\"A\"])],\n        ),\n        html.Div(children=[\"text\"]),\n        html.Div(\n            children=[\n                html.A(href=\"#\", id=\"link1\", children=[\"a1\"]),\n                html.Span(children=[\"tail1\"]),\n                html.A(href=\"#\", id=\"link2\", children=[\"a2\"]),\n                html.Span(children=[\"tail2\"]),\n            ]\n        ),\n    ]\n)\n```\n- By default, only tags in the dash.html module are supported.\n- Tags and attributes are checked, and those that are not supported are automatically removed.\n- The tags and attributes are case-insensitive.\n- If the provided HTML string is unclosed, div will be automatically added as the root tag.\n- The html, body, and head tags will be automatically removed without notification, as these tags may be automatically supplemented by the lxml module and are not supported in dash.\n- The tail(Text after element's end tag, but before the next sibling element's start tag) will automatically be converted into the text of a span tag.\n\n## Enable dash_svg\nUse [dash-svg](https://github.com/stevej2608/dash-svg) module to render SVG tags.\n```python\nfrom html_to_dash import parse_html\n\nelement_str = \"\"\"\n\u003csvg xmlns=\" http://www.w3.org/2000/svg \" version=\"1.1\" width=\"300\" height=\"300\"\u003e\n  \u003crect x=\"100\" y=\"100\" width=\"100\" height=\"100\" fill=\"#e74c3c\"\u003e\u003c/rect\u003e\n  \u003cpolygon points=\"100,100 200,100 150,50\" fill=\"#c0392b\"\u003e\u003c/polygon\u003e\n  \u003cpolygon points=\"200,100 200,200 250,150\" fill=\"#f39c12\"\u003e\u003c/polygon\u003e\n  \u003cpolygon points=\"100,100 150,50 150,150 100,200\" fill=\"#f1c40f\"\u003e\u003c/polygon\u003e\n  \u003cpolygon points=\"150,50 200,100 250,50 200,0\" fill=\"#2ecc71\"\u003e\u003c/polygon\u003e\n  \u003cpolygon points=\"100,200 150,150 200,200 150,250\" fill=\"#3498db\"\u003e\u003c/polygon\u003e\n\u003c/svg\u003e\n\"\"\"\n\nparse_html(element_str, enable_dash_svg=True)\n```\nPrint:\n```\nResult:\ndash_svg.Svg(\n    xmlns=\" http://www.w3.org/2000/svg \",\n    version=\"1.1\",\n    width=\"300\",\n    height=\"300\",\n    children=[\n        dash_svg.Rect(x=\"100\", y=\"100\", width=\"100\", height=\"100\", fill=\"#e74c3c\"),\n        dash_svg.Polygon(points=\"100,100 200,100 150,50\", fill=\"#c0392b\"),\n        dash_svg.Polygon(points=\"200,100 200,200 250,150\", fill=\"#f39c12\"),\n        dash_svg.Polygon(points=\"100,100 150,50 150,150 100,200\", fill=\"#f1c40f\"),\n        dash_svg.Polygon(points=\"150,50 200,100 250,50 200,0\", fill=\"#2ecc71\"),\n        dash_svg.Polygon(points=\"100,200 150,150 200,200 150,250\", fill=\"#3498db\"),\n    ],\n)\n```\n- In the dash application, `import dash_svg` module will render normally.\n- The dash_svg has higher priority than dash.html, but lower priority than extra module.\n\n## Expanded usage\n```python\nfrom html_to_dash import parse_html\nelement_str = \"\"\"\n\u003chtml\u003e\n\u003cbody\u003e\n\u003cdiv\u003e\n    \u003cinput type=\"text\" id=\"username\" name=\"username\" aria-label=\"Enter your username\" aria-required=\"true\"\u003e\n    \u003cdiv class='bg-gray-800' style='color:red;margin:10px'\u003e\n        \u003ca href=\"#\" id=\"link1\"\u003eA\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003etext\u003c/div\u003e\n    \u003csvg\u003e\u003c/svg\u003e\n    \u003cscript\u003e\u003c/script\u003e\n    \u003cdiv\u003e\u003ca href=\"#\" id=\"link2\"\u003eB\u003c/a\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\"\"\"\n\nextra_mod = [{\"dcc\": {\"Input\": [\"id\", \"type\", \"placeholder\", \"aria-*\"]}}]\n\ndef tag_attr_func(tag, items):\n    if tag == \"Input\":\n        k, v = items\n        if \"-\" in k:\n            return f'**{{\"{k}\": \"{v}\"}}'\n\nparsed_ret = parse_html(\n    element_str,\n    tag_map={\"svg\": \"img\"},\n    skip_tags=['script'],\n    extra_mod=extra_mod,\n    tag_attr_func=tag_attr_func,\n    if_return=True,\n)\nprint(parsed_ret)\n```\nPrint:\n```\n# Tags : Unsupported [script] removed.\n# Attrs: Unsupported [name] in dcc.Input removed.\nhtml.Div(\n    children=[\n        dcc.Input(\n            type=\"text\",\n            id=\"username\",\n            **{\"aria-label\": \"Enter your username\"},\n            **{\"aria-required\": \"true\"}\n        ),\n        html.Div(\n            className=\"bg-gray-800\",\n            style={\"color\": \"red\", \"margin\": \"10px\"},\n            children=[html.A(href=\"#\", id=\"link1\", children=[\"A\"])],\n        ),\n        html.Div(children=[\"text\"]),\n        html.Img(),\n        html.Div(children=[html.A(href=\"#\", id=\"link2\", children=[\"B\"])]),\n    ]\n)\n```\n- The \\* sign is supported as a wildcard, like data-\\*, aria-\\*.\n- Both class and className can be handled correctly.\n- In fact, attributes with the \"-\" symbol are processed by default, which is only used here as an example. Similarly, the style attribute can be handled correctly.\n- If tag_map param is provided, will convert the corresponding tag names in the HTML based on the dict content before formal processing.\n- Tag in skip_tags will remove itself and its text.The priority of tag_map is higher than skip_tags.\n- Supports any custom module, not limited to HTML and DCC. Essentially, it is the processing of strings.\n- Custom module prioritize in order and above the default dash.html module.\n- The tag_attr_func param is a function that handle attribute formatting under the tag.   \n  When adding quotation marks within a string, `double quotation marks` should be added to avoid the black module being unable to parse.   \n  For example,`f'**{{\"{k}\": \"{v}\"}}'` instead of `f\"**{{'{k}': '{v}'}}\"`、`f'{k}=\"{v}\"'` instead of `f\"{k}='{v}'\"`\n- If the HTML structure is huge, set huge_tree to True.\n\n# References\n- https://github.com/mhowell86/convert-html-to-dash\n- https://github.com/xhluca/convert-html-to-dash\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierxuy%2Fhtml-to-dash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierxuy%2Fhtml-to-dash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierxuy%2Fhtml-to-dash/lists"}