Dash HTML Components

Dash is a web app framework that provides pure Python abstraction around HTML, CSS, and JavaScript.

Instead of writing HTML or using an HTML templating engine, you compose your layout using Python with the Dash HTML Components module (dash.html).

Import dash.html with:

from dash import html

The Dash HTML Components module is part of Dash and you’ll find the source for it in the Dash GitHub repo.

Tip: In production Dash apps, we recommend using Dash Enterprise Design Kit to style Dash HTML Components.

Here is an example of a simple HTML structure:

from dash import html

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
        html.P("This conversion happens behind the scenes by Dash's JavaScript front-end")
    ])
])

which gets converted (behind the scenes) into the following HTML in your web app:

<div>
    <h1>Hello Dash<h1>
    <div>
        <p>Dash converts Python classes into HTML<p>
        <p>This conversion happens behind the scenes by Dash's JavaScript front-end<p>
    <div>
<div>

If you’re not comfortable with HTML, don’t worry!
You can get 95% of the way there with just a few elements
and attributes.

If you want to use Markdown in your app, you can use the Dash Core Components Markdown component:

from dash import dcc

dcc.Markdown('''
#### Dash and Markdown

Dash supports [Markdown](http://commonmark.org/help).

Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](http://commonmark.org/help), inline `code` snippets, lists,
quotes, and more.
''')

Dash and Markdown

Dash supports Markdown.

Markdown is a simple way to write and format text.
It includes a syntax for things like bold text and italics,
links, inline code snippets, lists,
quotes, and more.

If you’re using HTML components, then you also have access to
properties like style, class, and id.
All of these attributes are available in the Python classes.

The HTML elements and Dash classes are mostly the same but there are
a few key differences:
- The style property is a dictionary
- Properties in the style dictionary are camelCased
- The class key is renamed as className
- Style properties in pixel units can be supplied as just numbers without the px unit

Let’s take a look at an example.

from dash import html

html.Div([
    html.Div('Example Div', style={'color': 'blue', 'fontSize': 14}),
    html.P('Example P', className='my-class', id='my-p-element')
], style={'marginBottom': 50, 'marginTop': 25})

That Dash code will render this HTML markup:

<div>

    <div>
        Example Div
    <div>

    <p>
        Example P
    <p>

<div>

Note: If you need to directly render a string of raw, unescaped HTML, you can use the DangerouslySetInnerHTML component which is provided by the dash-dangerously-set-inner-html library.

Full Elements Reference