# Automatically convert html to dash format

**URL:** <https://community.plotly.com/t/automatically-convert-html-to-dash-format/78749>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [September 23, 2023, 2:29pm UTC](https://community.plotly.com/t/automatically-convert-html-to-dash-format/78749 "2023-09-23T14:29:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pier](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@Pier](https://community.plotly.com/u/Pier)\
**Post date:** [September 23, 2023, 2:29pm UTC](https://community.plotly.com/t/automatically-convert-html-to-dash-format/78749/1 "2023-09-23T14:29:48Z")

</div>

Greetings.

In order to convert html to dash format more conveniently, I developed a Python library `html-to-dash` . You can use the command `pip install html-to-dash` to use it.

Here are some examples：

## Basic usage

```python
from html_to_dash import parse_html
element_str = """
<div>
    <div class='bg-gray-800' style='color:red;margin:10px'>
     <svg aria-label="Ripples. Logo" role="img" xmlns="http://www.w3.org/2000/svg"</svg>
        <a href="#" id="link1">A</a>
    </div>
    <div>text</div>
    <div><a href="#" id="link2">B</a></div>
</div>
"""
parse_html(element_str)

```

Print:

```auto
# Tags : Unsupported [svg] removed.
Result:
html.Div(
    children=[
        html.Div(
            className="bg-gray-800",
            style={"color": "red", "margin": "10px"},
            children=[html.A(href="#", id="link1", children=["A"])],
        ),
        html.Div(children=["text"]),
        html.Div(children=[html.A(href="#", id="link2", children=["B"])]),
    ]
)

```

## Enable dash\_svg

Use [dash-svg](https://github.com/stevej2608/dash-svg) module to render SVG tags.

```python
from html_to_dash import parse_html

element_str = """
<svg xmlns=" http://www.w3.org/2000/svg " version="1.1" width="300" height="300">
  <rect x="100" y="100" width="100" height="100" fill="#e74c3c"></rect>
  <polygon points="100,100 200,100 150,50" fill="#c0392b"></polygon>
  <polygon points="200,100 200,200 250,150" fill="#f39c12"></polygon>
  <polygon points="100,100 150,50 150,150 100,200" fill="#f1c40f"></polygon>
  <polygon points="150,50 200,100 250,50 200,0" fill="#2ecc71"></polygon>
  <polygon points="100,200 150,150 200,200 150,250" fill="#3498db"></polygon>
</svg>
"""

parse_html(element_str, enable_dash_svg=True)

```

Print:

```auto
Result:
dash_svg.Svg(
    xmlns=" http://www.w3.org/2000/svg ",
    version="1.1",
    width="300",
    height="300",
    children=[
        dash_svg.Rect(x="100", y="100", width="100", height="100", fill="#e74c3c"),
        dash_svg.Polygon(points="100,100 200,100 150,50", fill="#c0392b"),
        dash_svg.Polygon(points="200,100 200,200 250,150", fill="#f39c12"),
        dash_svg.Polygon(points="100,100 150,50 150,150 100,200", fill="#f1c40f"),
        dash_svg.Polygon(points="150,50 200,100 250,50 200,0", fill="#2ecc71"),
        dash_svg.Polygon(points="100,200 150,150 200,200 150,250", fill="#3498db"),
    ],
)

```

In addition, it also supports advanced functions such as expanding modules and removing tags. More content can be found in the github repository：[GitHub - PierXuY/html-to-dash: Convert HTML to dash format.](https://github.com/PierXuY/html-to-dash)

I hope it can be helpful to you.