Dash HTML Components

Dash is a web application framework that provides pure R and Python abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the dashHtmlComponents package. The source is on GitHub at plotly/dash-html-components.

Please visit our online documentation, which is interactive and frequently updated: https://dashr.plotly.com.

The components in this package are all simple wrappers for HTML5 elements. Extensive documentation for these elements is available online: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/

Here is an example of a simple HTML structure:

library(dash)

htmlDiv(list(
  htmlH1('Hello Dash'),
  htmlDiv(list(
    htmlP('Dash converts R classes into HTML'),
    htmlP("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 application:

<div>
    <h1>Hello Dash</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
        <p>This conversion happens behind the scenes by the 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.

library(dash)

dccMarkdown('''
#### Dash and Markdown
Dash supports [Markdown](https://daringfireball.net/projects/markdown/).

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

which renders the following:

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 R functions. The HTML elements and Dash classes are mostly the same but there are a few key differences:

The style property is a named list
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.

library(dash)

htmlDiv(list(
    htmlDiv('Example Div', style=list('color' = 'blue', 'fontSize' = 14)),
    htmlP('Example P', className='my-class', id='my-p-element')
), style=list('marginBottom' = 50, 'marginTop' = 25))

That Dash code will render this HTML markup:

<div style="margin-bottom: 50px; margin-top: 25px;">

   <div style="color: blue; font-size: 14px">
       Example Div
   </div>

   <p class="my-class", id="my-p-element">
       Example P
   </p>
</div>