Dash HTML Components

2.0.0 · maintenance · verified Sat Apr 11

Dash HTML Components is a Python library that provides pure Python abstractions around all HTML5 tags, enabling developers to compose layouts for Dash web applications using Python classes instead of writing raw HTML. As of Dash 2.0, the development of this library has been integrated into the main Dash repository, and `dash-html-components` now primarily exists for backward compatibility. It is currently at version 2.0.0 and aligns its release cadence with the core Dash framework.

Warnings

deprecated The import statement `import dash_html_components as html` is deprecated in Dash 2.0 and later versions. While it still functions for backward compatibility, new applications should use `from dash import html` for consistency with the integrated component architecture.
Fix: Replace `import dash_html_components as html` with `from dash import html`.
gotcha When setting HTML class attributes in `dash.html` components, use `className` (camelCase) instead of `class_` or `class`. `class` is a reserved keyword in Python.
Fix: Use `html.Div(className='my-class')` instead of `html.Div(class='my-class')` or `html.Div(class_='my-class')`.
gotcha The `style` property for HTML components expects a Python dictionary, not a CSS string. CSS property names within this dictionary should be camelCased (e.g., `textAlign` instead of `text-align`). Pixel units can often be specified as numbers without the 'px' suffix.
Fix: Use `html.Div(style={'backgroundColor': 'blue', 'paddingLeft': 10})`.
breaking Dash 2.0 and subsequent versions have dropped official support for Python 2.x. Applications using `dash-html-components` 2.0.0 or higher require Python 3.x.
Fix: Migrate your Python environment and codebase to Python 3.x.
gotcha As of Dash 2.8 and later, the `n_clicks` event listener is no longer added to an HTML component by default if it does not have an `id`. If a component has an `id` but you do not need its `n_clicks` property, set `disable_n_clicks=True` to improve accessibility by preventing screen readers from incorrectly interpreting the element as clickable.
Fix: Ensure components that require `n_clicks` have an `id`. For others, explicitly set `disable_n_clicks=True` if an `id` is present but clicks are not needed.

Install

pip install dash-html-components Install `dash-html-components`

Imports

html
```
from dash import html
```
The direct import from `dash` is recommended for Dash 2.0+ applications. The separate `dash_html_components` package is deprecated but still works for backward compatibility.

Quickstart

This minimal Dash application demonstrates how to create a basic layout using `dash.html` components. It defines a main `Div` containing a `H1` heading and another `Div` with two `P` paragraphs, applying inline styling to the inner `Div`.

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.H1("Hello Dash"),
    html.Div([
        html.P("Dash converts Python classes into HTML elements."),
        html.P("This is a simple Dash app using html components.")
    ], style={'color': '#7FDBFF'})
])

if __name__ == '__main__':
    app.run_server(debug=True)

view raw JSON →