Rendering raw HTML

Thanks for Dash! 😄

I am trying to pass raw HTML through to Dash, such as HTML returned by calling pd.DataFrame.to_html() (as a shortcut to defining a function such as generate_table() in the getting started docs).

React seems to support this through a div that sets dangerouslySetInnerHTML. Passing this to html.Div raises an exception that the argument is not one of the 14 that are pre-defined.

Is there any way to do this with Dash?

[TheoLvs]

Hello guys, I stumbled on the same issue recently, I managed to solve it with Beautifulsoup and a recursive function

Parse your html with BeautifulSoup :

import bs4 as bs
html_parsed = bs.BeautifulSoup(html_snippet)

And use the following recursive function to convert the parsed html to a set of dash-html-components

import dash_html_components as html

def convert_html_to_dash(el,style = None):
    if type(el) == bs.element.NavigableString:
        return str(el)
    else:
        name = el.name
        style = extract_style(el) if style is None else style
        contents = [convert_html_to_dash(x) for x in el.contents]
        return getattr(html,name.title())(contents,style = style)

With the helper function to get a style dictionary from a list of style arguments of a Beautifulsoup element

def extract_style(el):
    return {k.strip():v.strip() for k,v in [x.split(": ") for x in el.attrs["style"].split(";")]}

This was a quick hack, but worked perfectly for what I wanted to do !

[chriddyp]

@frogger72 - Good point. I ran into this myself on a personal project where I wanted to render HTML from a third-party source and converting it to the dash-html-components library would’ve been too complex. I have created a dangeroulsySetInnerHTML component that you can use now https://github.com/plotly/dash-dangerously-set-inner-html. However, I recommend using the dash-html-components as much as possible.