Creating an HTML generator for dash

Dash Python
1

Hi Everyone,

We know that Dash use different HTML format. I wanted to save time by creating an parser which take input simple HTML and convert it into DASH type HTML. I am not able to think how to accomplish this. What I have done till now is detected HTML tags. Can anyone help me ?

from html.parser import HTMLParser

class MyHTMLParser(HTMLParser):
    def handle_starttag(self, tag, attrs):
        print("Encountered a start tag:", tag)

    def handle_endtag(self, tag):
        print("Encountered an end tag :", tag)

    def handle_data(self, data):
        print("Encountered some data  :", data)

parser = MyHTMLParser()


html = '''
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
'''
parser.feed(html)

Can Anyone have some idea?

1 Like
2

I hear that you can create Dash layouts with Markdown. Have you looked into that? Even if you are dead set on HTML and not Markdown, browsing the code-base could be a starting point.

3

@MarkN I am not aware of anything like writing HTML with markdown. I guess you didn’t got the problem. I want to convert

<div class = "hello"> ekkk</div>

to

html.Div("ekkk", className="hello")
4

Parsing arbitrary HTML and re-converting it into the appropriate Python code, while maintaining full and up-to-date support for the Dash UI Libraries, is not a trivial thing to do. If you are indeed doing this to save time, it makes me wonder what kind of colossal task you have in front of you which this would save time with. Even if you succeed, now you are stuck with an architectural pipeline that consists of HTML -> Python -> Dash Components -> HTML (Via react rendering). I can’t think of any situation where this would be a good idea. And the fact that it’s not a good idea is probably why there are no existing examples or tools to do such a thing…

5

@MarkN Yes, may be it’s not a good idea that why I wanted to know more about the same. I needed it because I already have a lot of html code like templates. Predefined Bootstrap examples and components which can make my app great in UI. I don’t want to write everything again and again. That’s why I wanted to do this. Although thanks for the comment.

6

@rvsingh011 How many HTML templates are we talking? Speaking from experience, it may honestly be far far easier to just do a one-time conversion.

Additionally, I may be mistaken here being relatively new to Dash myself, but I don’t see any reason why all the HTML code on a page needs to be rendered by Dash, but it unfortunately seems that is the case. I found this discussion which seems to be closely related: https://github.com/plotly/dash/issues/44

There is also a recent proposal here which may make it easier to do what you’re trying to do. https://github.com/plotly/dash/issues/265

In the meantime though you’ll have to bite the bullet and just write the python code yourself. Sorry I couldn’t be of better assistance.