[SOLVED] Embedding variable with HTML tags in plotly dash layout

Embedding variable with HTML tags in plotly dash layout

I have a variable with some text already containing HTML tags - like line breaks/bold/etc. I'm extracting this variable from a dataframe based on some conditions.

I want to use this inside my Dash layout.

myData = df["HTML_TEXT_COLUMN].values[0]

For example, you can consider myData variable to have the below text -

line1 <br> line2 <br> line3

I'm trying to use this variable as an HTML inside my dash layout like this -

app.layout = html.Div(children = [
    html.H1("Some header),
    myData
    # OR html.P(myData)
    ]
)

This is considering the layout as a text with the HTML tags as text. Instead, I would like to consider that variable as an HTML and consider the line breaks. What am I doing wrong?

Ideally, I would like to do this without saving the variable as an HTML file and then using that html file in an iFrame - since I don't want to have unnecessary HTML files saved.

Solution

Found an answer and wanted to update in case anyone else wanted -

Instead of using myData directly in the html layout, using it as a Markdown -

app.layout = html.Div([
    html.H1("Some header"),
    dcc.Markdown(myData)
    ]
)

This worked!