Dash HTML Components

Dash is a web application 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 structures with the
dash-html-components library.

The source for this library is on GitHub: plotly/dash-html-components.

Here is an example of a simple HTML structure:

import dash_html_components as 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')
    ])
])

<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.
Dash’s core component library also supports
Markdown.

import dash_core_components as 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.
''')

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.

import dash_html_components as 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})

<div>

    <div>
        Example Div
    <div>

    <p>
        Example P
    <p>

<div>

Full elements reference: