dash-info.yaml

pkg_help_description: >-
    Dash is a web application framework that
    provides pure Python and R 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 for this package is on GitHub:
    plotly/dash-html-components.
pkg_help_title: >-
    Vanilla HTML Components for Dash
r_examples:
    - name: htmlA
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlA(children='Link to external site',
                      href='https://plot.ly',
                      target='_blank')
                )
              )
            )

            app$run_server()
    - name: htmlAbbr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
               htmlDiv(list(
                 htmlAbbr(children='Hello! htmlAbbr at work!',
                          title='\U{1F50D} Hover over this line for a few seconds and see the text box appear...')
                  )
               )
            )

            app$run_server()
    - name: htmlAcronym
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlAcronym(children='ASAP',
                title='Mouse over these words to see the acronym for \'as soon as possible\'.')
                  )
              )
            )

            app$run_server()
    - name: htmlAddress
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlAddress(children='5555 Avenue de Gaspe, Montreal QC H2T 2A3')
                )
              )
            )

            app$run_server()
    - name: htmlArea
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlImg(src = 'https://upload.wikimedia.org/wikipedia/commons/0/0c/PIA17351-ApparentSizes-MarsDeimosPhobos-EarthMoon.jpg',
                        useMap = '#image-map'),
                htmlMapEl(list(
                  htmlArea(target='_blank',
                           alt='Deimos',
                           title='Deimos',
                           href='https://en.wikipedia.org/wiki/Deimos_(moon)',
                           coords='5,114,32,147',
                           shape='rect'),
                  htmlArea(target='_blank',
                           alt='Phobos',
                           title='Phobos',
                           href='https://en.wikipedia.org/wiki/Phobos_(moon)',
                           coords='113,196,32,103',
                           shape='rect'),
                  htmlArea(target='_blank',
                           alt='Moon',
                           title='Moon',
                           href='https://en.wikipedia.org/wiki/Moon',
                           coords='127,285,294,1',
                           shape='rect')
                  ),
                  name = 'image-map'
                ),
                htmlDiv(children = 'Click on the image to visit a Wikipedia article',
                        id = 'object-name')
                )
              )
            )

            app$run_server()
    - name: htmlArticle
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlArticle(list(
                  htmlH2('Dash for R launched!'),
                  htmlP('Dash is a user interface library for creating analytical web applications.\n
                         Those who use R for data analysis, data exploration, visualization,\n
                         modelling, instrument control, and reporting will find immediate use for Dash for R.'),
                  htmlAside('Plotly is a technical computing company with offices in Montreal, Canada and Cambridge, Massachusetts.')
                  )
                )
               )
              )
            )

            app$run_server()
    - name: htmlAside
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlArticle(list(
                  htmlH2('Dash for R launched!'),
                  htmlP('Dash is a user interface library for creating analytical web applications.\n
                         Those who use R for data analysis, data exploration, visualization,\n
                         modelling, instrument control, and reporting will find immediate use for Dash for R.'),
                  htmlAside('Plotly is a technical computing company with offices in Montreal, Canada and Cambridge, Massachusetts.')
                  )
                )
               )
              )
            )

            app$run_server()
    - name: htmlAudio
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlAudio(src='https://www.nasa.gov/62284main_onesmall2.wav',
                          controls=TRUE,
                          title='Apollo 11 - July 16, 1969 - Neil Armstrong')
                  )
               )
            )

            app$run_server()
    - name: htmlB
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlB(children="This is a bold statement!"),
                htmlP(children="This is not so bold.")
                )
               )
            )

            app$run_server()
    - name: htmlBase
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlBase(href="https://www.w3schools.com/"),
                htmlA(children="HTML base tag", href="tags/tag_base.asp")
                )
               )
            )

            app$run_server()
    - name: htmlBasefont
      dontrun: TRUE
      code: |
            # This feature is obsolete. It may still work in some
            # browsers, but could stop working at any time. Try to
            # avoid using this component.
            #
            # Instead, use CSS properties to set font, font-family,
            # font-size and color.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlBasefont(color="FF0000",
                             face="Helvetica",
                             size="+2"),
                htmlP(children="If it works, this will be Helvetica but a couple point sizes larger.")
                )
               )
            )

            app$run_server()
    - name: htmlBdi
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
                htmlDiv(list(
                    htmlP(children="The line below should render as 'Aladdin', but in Arabic script:"),
                    htmlBdi(children="\U{0639}\U{0644}\U{0627}\U{0621} \U{0627}\U{0644}\U{062F}\U{064A}\U{0646}")
                )
                )
            )

            app$run_server()
    - name: htmlBdo
      dontrun: TRUE
      code: |
            # This element supports bidirectional text override.
            # We can force text to render from right to left instead
            # of left to right.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(children="This text will print from left to right."),
                htmlP(children="Below, we use bidirectional override to print right to left:"),
                htmlBdo(children="This text will print from right to left.",
                        dir="rtl")
               )
              )
            )

            app$run_server()
    - name: htmlBig
      dontrun: TRUE
      code: |
            # The <big> tag is not supported in HTML5.
            # Instead, use the font-size property in
            # CSS to enlarge text.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(children="This text will display in standard size."),
                htmlBig(children="This text may or may not appear slightly larger.")
               )
              )
            )

            app$run_server()
    - name: htmlBlink
      dontrun: TRUE
      code: |
            # The blink tag is now obsolete and deprecated.
            # It may not function properly in all browsers,
            # and it may cease working without warning.
            #
            # This element is generally unsupported on all
            # modern browser releases.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(children="Here is a bit of text."),
                htmlBlink(children="Here is a bit of blinking text.")
               )
              )
            )

            app$run_server()
    - name: htmlBlockquote
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("Here is some text."),
                htmlBlockquote(children=list(
                   htmlP("And here is a quotation in block format.")
                   )
                )
               )
              )
            )

            app$run_server()
    - name: htmlBr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("Here is some text."),
                htmlBr(),
                htmlP("Here is additional text."),
                htmlBr(),
                htmlP("See the gap in between the lines?")
                )
              )
            )

            app$run_server()
    - name: htmlButton
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlButton("Click me!")
                )
              )
            )

            app$run_server()
    - name: htmlCanvas
      dontrun: TRUE
      code: |
            # this component requires JavaScript code to draw on the canvas
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlCanvas(id="canvas-component")
                )
              )
            )

            app$run_server()
    - name: htmlCaption
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlTable(list(
                  htmlCaption("Elevations of a few Cascade Range volcanoes"),
                  htmlThead(
                    htmlTr(list(
                      htmlTh("Mountain"),
                      htmlTh("Elevation (m)"),
                      htmlTh("Elevation (ft)")
                    )
                  )),
                  htmlTbody(list(
                    htmlTr(list(
                      htmlTd("Mount Rainier"),
                      htmlTd("4,392"),
                      htmlTd("14,411")
                     )
                    ),
                    htmlTr(list(
                      htmlTd("Mount Hood"),
                      htmlTd("3,429"),
                      htmlTd("11,249")
                    )
                    ),
                    htmlTr(list(
                      htmlTd("Lassen Peak"),
                      htmlTd("3,187"),
                      htmlTd("10,457")
                     )
                    ),
                    htmlTr(list(
                      htmlTd("Mount St. Helens"),
                      htmlTd("2,549"),
                      htmlTd("8,363")
                     )
                    )
                   )
                  )
                 ), style = list(
                      border = "1px black solid"
                 )
                )
              )
             )
            )

            app$run_server()
    - name: htmlCenter
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlCenter("Centered text!")
                )
              )
            )

            app$run_server()
    - name: htmlCite
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlCite("Click me!")
                )
              )
            )

            app$run_server()
    - name: htmlCode
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlCode(
                children = 'cat("Hello world!")'
                  )
                )
              )
            )

            app$run_server()
    - name: htmlCol
      dontrun: TRUE
      code: |
            # Used within htmlColgroup to define columns.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlTable(list(
                    htmlColgroup(
                      list(
                        htmlCol(span = 2, style = list("background-color"= "red"))
                      )
                    ),
                    htmlTr(
                      list(
                        htmlTd("Cell A"),
                        htmlTd("Cell B"),
                        htmlTd("Cell C")
                      )
                    )
                  ))
                )
              )
            )

            app$run_server()
    - name: htmlColgroup
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlTable(list(
                    htmlColgroup(
                      list(
                        htmlCol(span = 2, style = list("background-color"= "red"))
                      )
                    ),
                    htmlTr(
                      list(
                        htmlTd("Cell A"),
                        htmlTd("Cell B"),
                        htmlTd("Cell C")
                      )
                    )
                  ))
                )
              )
            )

            app$run_server()
    - name: htmlCommand
      dontrun: TRUE
      code: |
            # This component is deprecated and its use is no longer recommended.
    - name: htmlContent
      dontrun: TRUE
      code: |
            # This feature is obsolete and no longer supported. It is recommended
            # that you use the htmlSlot component instead.
    - name: htmlData
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlUl(list(
                    htmlLi(list(htmlData(value = 398, "First Element"))),
                    htmlLi(list(htmlData(value = 399, "Second Element"))),
                    htmlLi(list(htmlData(value = 400, "First Element")))
                  ))
                )
              )
            )

            # Include the following in a seperate CSS file in an
            # `assets` directory in the root of your app.
            #
            # data:hover::after {
            #   content: ' (ID ' attr(value) ')';
            #   font-size: .7em;
            # }

            app$run_server()
    - name: htmlDatalist
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)
            library(dashCoreComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              dccInput(
                placeholder = 'Enter here',
                list = 'list-of-options'),
              htmlDatalist(id = 'list-of-options',
                children=list(
                  htmlOption("Option 1"),
                  htmlOption("Option 2"),
                  htmlOption("Option 3")
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDd
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDl(
                children= list(htmlDt("Dash for R"),
                              htmlDd('HtmlDt and htmlDD must be used
                                      within htmlDl'))
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDel
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDel(
                    children ="Deleted Hello"
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDetails
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlDetails(
                  children = list(
                    htmlSummary(
                      children = "Within a details element, the summary can act as a clickable description"
                    ),
                    "And the rest is hidden until the summary is clicked"
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlDfn
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDfn(
                    children ="Hello"
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDialog
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDialog(
                children = htmlP('Greetings')
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDiv
      dontrun: TRUE
      code: |
            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlDiv('This Title is Wrapped inside an inner Div')
                )
              )
            )

            app$run_server()
    - name: htmlDl
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDl(
                children= list(htmlDt("Dash for R"),
                              htmlDd('HtmlDt and htmlDD must be used
                                      within htmlDl'))
                  )
                )
              )
            )

            app$run_server()
    - name: htmlDt
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlDl(
                children= list(htmlDt("Dash for R"),
                              htmlDd('HtmlDt and htmlDD must be used
                                      within htmlDl'))
                  )
                )
              )
            )

            app$run_server()
    - name: htmlElement
      dontrun: TRUE
      code: |
            # This feature is obsolete. It may still work in some
            # browsers, but could stop working at any time. Try to
            # avoid using this component.
    - name: htmlEm
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlH1(list('Dash is a very ',
                          htmlEm(' important '),
                          'framework')
                  )
                )
              )
            )

            app$run_server()
    - name: htmlEmbed
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlEmbed(
                src = 'https://archive.org/embed/VintageCartoonsSet1Mp4',
                width = '500',
                height = '500')
                )
              )
            )

            app$run_server()
    - name: htmlFieldset
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)
            library(dashCoreComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlFieldset(
                children = list('Choose your favorite Dash HTML component',
                dccRadioItems(
                  options=list(
                    list("label'= "htmlDiv", "value'= "htmlDiv"),
                    list("label'= "htmlBase", "value'= "htmlBase"),
                    list("label'= "htmlArticle", "value'= "htmlArticle")
                        )
                      )
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlFigcaption
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlFigure(children = list(
                htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png'),
                htmlFigcaption(children = 'Plotly Logo')))
                )
              )
            )

            app$run_server()
    - name: htmlFigure
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlFigure(children = list(
                htmlImg(src = 'https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png',
                        width = '400',
                        height = '150')
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlFont
      dontrun: TRUE
      code: |
            # Starting with HTML 4, HTML does not convey styling information
            # anymore (outside the <style> element or the style attribute of each
            # element). CSS should be used for styling instead.
    - name: htmlFooter
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlFooter(list(
                htmlH1('Dash'),
                htmlLi('Pointer1'),
                htmlLi('Pointer2')
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlForm
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)
            library(dashCoreComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlForm(children=list(
                htmlP(children=list('Username: ', dccInput(type='text', id='username', placeholder='username'))),
                htmlP(children=list('Password: ', dccInput(type='password', id='password', placeholder='password'))),
                htmlButton(children=list('Login'), type='submit', id='login_button')
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlFrame
      dontrun: TRUE
      code: |
            # htmlFrame is now deprecated. htmlIFrame is recommended instead.
    - name: htmlFrameset
      dontrun: TRUE
      code: |
            # htmlFrameset is now deprecated. htmlIFrame is recommended instead.
    - name: htmlHeader
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlHeader("This is a header"),
                htmlP("And here is some text.")
              )
             )
            )

            app$run_server()
    - name: htmlH1
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH1(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlH2
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH2(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlH3
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH3(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlH4
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH4(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlH5
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH5(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlH6
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlH6(list(
                  'Dash Html',
                  htmlBr(), #We can customize
                  htmlSpan('Dash', style = list('opacity' = '0.8')),
                  htmlSpan(' Core')))
                )
              )
            )

            app$run_server()
    - name: htmlHgroup
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlHgroup(list(
                  htmlH1('MultiLevel Title'),
                  htmlHr(),
                  htmlH2('Header')
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlHr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlDiv(list(
                  htmlH1('Dash'),
                  htmlHr(),
                  htmlH2('Components')
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlI
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                  htmlI('Italicized Text')
                )
              )
            )

            app$run_server()
    - name: htmlIframe
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlIframe(width = "600px", height = "600px",
                        src = "https://dashr.plot.ly/")
                )
              )
            )

            app$run_server()
    - name: htmlImg
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
                htmlImg(src ='https://brand.plot.ly/static/images/plotly-logo-01-stripe@2x.png',
                        height='200', width='400')
                )
              )
            )


            app$run_server()
    - name: htmlIns
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlIns('This text has been inserted')
                )
              )
            )

            app$run_server()
    - name: htmlIsindex
      dontrun: TRUE
      code: |
            # This component is deprecated and its use is no longer recommended.
    - name: htmlKbd
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP('Please Press: '),
                htmlKbd(list(
                  'Ctl + ',
                  'Alt + ',
                  'Delete'))
                )
              )
            )

            app$run_server()
    - name: htmlKeygen
      dontrun: TRUE
      code: |
            # This feature is obsolete. It may still work in some
            # browsers, but could stop working at any time. Try to
            # avoid using this component.
    - name: htmlLabel
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)
            library(dashCoreComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(
                htmlLabel(
                  list(htmlDiv(list("Time points")),
                      dccInput(
                        id = "times-input",
                        placeholder = "Enter a value...",
                        type = "number",
                        value = 1,
                        min = 3,
                        max = 999)
                  )
                )
              )
            )

            app$run_server()
    - name: htmlLegend
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)
            library(dashCoreComponents)

            app <- Dash$new()

            app$layout(htmlDiv(list(
              htmlFieldset(
                children = list(
                                htmlLegend('Select your favorite component'),
                                dccRadioItems(
                                  options=list(
                                    list("label'= "htmlDiv", "value'= "htmlDiv"),
                                    list("label'= "htmlBase", "value'= "htmlBase"),
                                    list("label'= "htmlArticle", "value'= "htmlArticle")
                        )
                      )
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlLi
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlOl(list(
                  htmlLi("Montreal"),
                  htmlLi("Toronto"),
                  htmlLi("Halifax")
                )),
                htmlUl(list(
                  htmlLi("Montreal"),
                  htmlLi("Toronto"),
                  htmlLi("Halifax")
                ))
              ))
            )

            app$run_server()
    - name: htmlLink
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlLink(rel = "stylesheet", type = "text/css", href = "https://codepen.io/chriddyp/pen/bWLwgP.css")
              ))
            )

            app$run_server()
    - name: htmlListing
      dontrun: TRUE
      code: |
            # Warning: The <listing> element was intended as a way to render HTML code on a page.
            # It was never properly supported, and is now deprecated. Using <listing> will almost
            # certainly result in unexpected results. Instead, use <code>, or place the content in
            # a <div> with the appropriate CSS styling.

            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlListing(list(
                  htmlUl("A"),
                  htmlUl("B"),
                  htmlUl("C")
                ))
              ))
            )

            app$run_server()
    - name: htmlMain
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlMain(
                  list(htmlH1("Benjamin Franklin"),
                       htmlP("Benjamin Franklin was an American polymath
                             and one of the Founding Fathers of the United States.
                             Franklin was a leading author, printer, political theorist,
                             politician, Freemason, postmaster, scientist, inventor,
                             humorist, civic activist, statesman, and diplomat."))
                )
              ))
            )

            app$run_server()
    - name: htmlMapEl
      dontrun: TRUE
      code: |
            # Note that htmlMapEl generates the <map> HTML element;
            # for more information, please visit the link in this
            # component's description.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlImg(src = "https://upload.wikimedia.org/wikipedia/commons/0/0c/PIA17351-ApparentSizes-MarsDeimosPhobos-EarthMoon.jpg",
                        useMap = "#image-map"),
                htmlMapEl(list(
                  htmlArea(target="_blank",
                           alt="Deimos",
                           title="Deimos",
                           href="https://en.wikipedia.org/wiki/Deimos_(moon)",
                           coords="5,114,32,147",
                           shape="rect"),
                  htmlArea(target="_blank",
                           alt="Phobos",
                           title="Phobos",
                           href="https://en.wikipedia.org/wiki/Phobos_(moon)",
                           coords="113,196,32,103",
                           shape="rect"),
                  htmlArea(target="_blank",
                           alt="Moon",
                           title="Moon",
                           href="https://en.wikipedia.org/wiki/Moon",
                           coords="127,285,294,1",
                           shape="rect")
                  ),
                  name = "image-map"
                ),
                htmlDiv(children = "Click on the image to visit a Wikipedia article",
                        id = "object-name")
                )
              )
            )
            app$run_server()
    - name: htmlMark
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(list(
                  htmlMark("Plotly"),
                  " develops online data analytics and visualization tools."
                ))
              ))
            )

            app$run_server()
    - name: htmlMarquee
      dontrun: TRUE
      code: |
            # This feature is obsolete. It may still work in some
            # browsers, but could stop working at any time. Try to
            # avoid using this component.

            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlMarquee("Here is some sliding text that uses htmlMarquee")

              ))
            )

            app$run_server()
    - name: htmlMeta
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("The <meta> tag provides metadata about the HTML document.
                      Metadata will not be displayed on the page, but will be machine parsable.
                      To view meta tag the content of this page can be inspected."),
                htmlMeta(name = "author", content = "Edward Tufte")
              ))
            )

            app$run_server()
    - name: htmlMeter
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlLabel("Sample Level Meter: "),
                htmlMeter(id = "sample-meter",
                          min = 0,
                          max = 100,
                          low = 33,
                          high = 66,
                          optimum = 80,
                          value = 80
                          )
              ))
            )

            app$run_server()
    - name: htmlMulticol
      dontrun: TRUE
      code: |
            # Warning: The <multicol> tag is obsolete, it might not work as intended.
            # Try to avoid using it.
    - name: htmlNav
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlNav(
                  list(
                    htmlA("Plotly", href = "https://plot.ly/"),
                    '> ",
                    htmlA("Dash", href = "https://plot.ly/dash"),
                    '> ",
                    htmlA("Request Trial", href = "https://go.plot.ly/dash-enterprise-trial")
                  )
                )
              ))
            )

            app$run_server()
    - name: htmlNextid
      dontrun: TRUE
      code: |
            # This component is deprecated and its use is no longer recommended.
            # The <nextid> tag has been obsolete since HTML Version 3.2.
    - name: htmlNobr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlNobr("Lorem ipsum dolor sit amet,
                         consectetur adipiscing elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo consequat.
                         Duis aute irure dolor in reprehenderit in voluptate
                         velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident,
                         sunt in culpa qui officia deserunt mollit anim id est laborum."
                )
              ))
            )

            app$run_server()
    - name: htmlNoscript
      dontrun: TRUE
      code: |
            # This component may be used in the index template to define
            # alternate content in browsers which have disabled scripts,
            # or in which scripts are not supported.
    - name: htmlObjectEl
      dontrun: TRUE
      code: |
            # Note that htmlObjectEl generates the <object> HTML element;
            # for more information, please visit the link in this
            # component's description.
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlObjectEl(
                  width = 100,
                  height = 97
                  #data = "https://i.postimg.cc/tJd8PSVf/Plotly-logo-01-square.png"
                )
              ))
            )

            app$run_server()
    - name: htmlOl
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlOl(list(
                  htmlLi("Un"),
                  htmlLi("Deux"),
                  htmlLi("Trois")
                ))
              ))
            )

            app$run_server()
    - name: htmlOptgroup
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlLabel(
                  htmlFor = "option-select", "Please select car brand/model: "
                ),
                htmlSelect(id = "option-select", list(
                htmlOptgroup("Audi"), #label = "Audi"
                htmlOption("TT"),
                htmlOption("A4"),
                htmlOptgroup("BMW"), #label = "BMW"
                htmlOption("3 Series"),
                htmlOption("5 Series")
                ))
              ))
            )

            app$run_server()
    - name: htmlOption
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlSelect(list(
                  htmlOption("d'Artagnan"),
                  htmlOption("Athos"),
                  htmlOption("Porthos"),
                  htmlOption("Aramis")
                ))
              ))
            )

            app$run_server()
    - name: htmlOutput
      dontrun: TRUE
      code: |
            # This component works with htmlForm and htmlInput and may be used to present the result of an executed script.
    - name: htmlP
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("The <p> tag defines a paragraph.")
              ))
            )

            app$run_server()
    - name: htmlParam
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("The <param> element is used to specify the parameters that apply to
                plugin-powered content embedded with an <object> element.
                Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param"),
                htmlObjectEl(
                  #data = "link-to-data-file"
                  htmlParam(name = "controller", value = TRUE)
                )
              ))
            )

            app$run_server()
    - name: htmlPicture
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlPicture(list(
                  htmlSource(srcSet = "https://upload.wikimedia.org/wikipedia/commons/a/a7/Winter_and_the_City.jpg",
                             media = "(min-width: 800px)"),
                  htmlImg(src = "https://upload.wikimedia.org/wikipedia/commons/5/56/Summer_and_the_City.jpg"),
                  htmlP("Resize screen to see image changing...")
                ))
              ))
            )

            app$run_server()
    - name: htmlPlaintext
      dontrun: TRUE
      code: |
            # Warning: The <plaintext> tag is obsolete,
            # it might not work as intended.
            # Use the <pre> tag instead.

            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlPlaintext(),
                htmlBr(),
                htmlH4("The HTML Plaintext Element (<plaintext>) renders everything following
                      the start tag as raw text, ignoring any following HTML. There is no closing tag,
                      since everything after it is considered raw text.")
              ))
            )

            app$run_server()
    - name: htmlPre
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlPre(
                  "
                  Text in a <pre> element is displayed
                  in a fixed-width font (usually Courier),
                  and it preserves both spaces and line breaks.
                  "
                )
              ))
            )

            app$run_server()
    - name: htmlProgress
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP("Below is an example of htmlProgress"),
                htmlProgress(value = 80, max = 100)
              ))
            )

            app$run_server()
    - name: htmlQ
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(list(
                "The <q> tag defines a short quotation: ",
                htmlQ("This example text is wrapped in htmlQ")
                ))
              ))
            )

            app$run_server()
    - name: htmlRb
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlRuby(list(
                  "\U{6f22}",
                  htmlRp("("),
                  htmlRt("kan"),
                  htmlRp(")")
                )),
                htmlRuby(list(
                  "\U{5b57}",
                  htmlRp("("),
                  htmlRt("ji"),
                  htmlRp(")")
                ))
              ))
            )

            app$run_server()
    - name: htmlRp
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlRuby(list(
                  "\U{6f22}",
                  htmlRp("("),
                  htmlRt("kan"),
                  htmlRp(")")
                )),  
                htmlRuby(list(
                  "\U{5b57}",
                  htmlRp("("),
                  htmlRt("ji"),
                  htmlRp(")")
                ))   
              ))   
            )    

            app$run_server()    
    - name: htmlRt
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlRuby(list(
                  "\U{6f22}",
                  htmlRp("("),
                  htmlRt("kan"),
                  htmlRp(")")
                )),  
                htmlRuby(list(
                  "\U{5b57}",
                  htmlRp("("),
                  htmlRt("ji"),
                  htmlRp(")")
                ))   
              ))   
            )    

            app$run_server()
    - name: htmlRtc
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlRuby(list(
                  "\U2661",
                  htmlRtc(htmlRt('Heart"))
                ))
              ))
            )

            app$run_server()
    - name: htmlRuby
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlRuby("\U{54d0}")
              ))
            )

            app$run_server()
    - name: htmlS
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlS("htmlS  generates strikethrough text"),
                htmlP(),
                htmlB("htmlB  generates bold text")
              ))
            )

            app$run_server()
    - name: htmlSamp
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlSamp("htmlSamp formats text to computer program output.")
              ))
            )

            app$run_server()
    - name: htmlScript
      dontrun: TRUE
      code: |
            # This component is retained for compatibility reasons, but we suggest
            # using Dash's capability for embedding scripts within the assets folder
            # instead.
    - name: htmlSection
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlSection(
                  children = list(
                    htmlH1("This is a section title"),
                    htmlDiv("This is some text within a section")
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlSelect
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlSelect(
                  children = list(
                    htmlOption("This is an option in htmlSelect"),
                    htmlOption("But you might want to check out dccDropdown as well"),
                    htmlOption("dccDropdown is part of the dashCoreComponents library")
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlShadow
      dontrun: TRUE
      code: |
            # The Shadow element requires a browser that supports
            # Web Components. It is experimental and should be used
            # with caution; it is now considered an obsolete element
            # within the Web Components suite. It is retained here
            # solely for backwards compatibility reasons.
            #
            # For more information, please see the MDN link above.
    - name: htmlSlot
      dontrun: TRUE
      code: |
            # Please see https://mdn.github.io/web-components-examples/element-details/
            # and https://github.com/mdn/web-components-examples/tree/master/element-details
            # for a useful example of this element (with accompanying JavaScript) in action.
    - name: htmlSmall
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is normal text",
                htmlBr(),
                htmlSmall("And this is text in an htmlSmall component")
                )
              )
            )

            app$run_server()
    - name: htmlSource
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                  "Resize your browser window to see the image source change based based on the browser width",
                  htmlBr(),
                  htmlPicture(
                    list(
                      htmlSource(
                        media = "(min-width: 1000px)",
                        srcSet = "https://apod.nasa.gov/apod/image/1907/FishheadNebula_Pham_2401.jpg"
                      ),
                      htmlImg(
                        src = "https://apod.nasa.gov/apod/image/1907/ngc3576_campbell_1824.jpg"
                      )
                    )
                  )
                )
              )
            )

            app$run_server()
    - name: htmlSpacer
      dontrun: TRUE
      code: |
            # This component provides an HTML element that is now obsolete
            # and not supported by modern web browsers; it is retained for
            # backwards compatibility.
    - name: htmlSpan
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is some text",
                htmlBr(),
                htmlSpan(
                  children = "And some text within an italicized span",
                  style = list(fontStyle = "italic")
                )
                )
              )
            )

            app$run_server()
    - name: htmlStrike
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is normal text",
                htmlStrike("Text within an htmlStrike element will be stricken out")
                )
              )
            )

            app$run_server()
    - name: htmlStrong
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is normal text",
                htmlBr(),
                htmlStrong("Text within an htmlStrong element will be Bold")
                )
              )
            )

            app$run_server()
    - name: htmlSub
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is normal text ",
                htmlSub("And this is subscript text within an htmlSub")
                )
              )
            )

            app$run_server()
    - name: htmlSummary
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlDetails(
                  children = list(
                    htmlSummary(
                      children = "Within a details element, the summary can act as a clickable description"
                    ),
                    "And the rest is hidden until the summary is clicked"
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlSup
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "This is normal text",
                htmlSup("And this is superscript text within an htmlSup")
                )
              )
            )

            app$run_server()
    - name: htmlTable
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "You can create a table with htmlTable:",
                htmlBr(),
                htmlTable(
                  list(
                    htmlTr(
                      list(
                        htmlTh("Table Header 1"),
                        htmlTh("Table Header 2")
                      )
                    ),
                    htmlTr(
                      list(
                        htmlTd("row 1 under Header 1"),
                        htmlTd("row 1 under Header 2")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTbody
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "Within an htmlTable, you can specify the rows that go in the body of the table with htmlTbody",
                htmlBr(),
                htmlTable(
                  list(
                    htmlThead(
                      htmlTr(
                        htmlTh("This is in the header of the table")
                      )
                    ),
                    htmlTbody(
                      htmlTr(
                        htmlTd("This is in the body of the table")
                      )
                    ),
                    htmlTfoot(
                      htmlTr(
                        htmlTd("This is in the footer of the table")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTd
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "Within an htmlTable, individual cells can be made with htmlTd",
                htmlBr(),
                htmlTable(
                  list(
                    htmlTr(
                      list(
                        htmlTh("Header 1"),
                        htmlTh("Header 2")
                      )
                    ),
                    htmlTr(
                      list(
                        htmlTd("this is a cell"),
                        htmlTd("this is another cell")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTemplate
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "You can create an HTML template to be populated later via js",
                htmlBr(),
                htmlTable(
                  id = "myTable",
                  htmlTr(
                    list(
                      htmlTh("Header 1"),
                      htmlTh("Header 2")
                    )
                  )
                ),
                htmlTemplate(
                  id = "myRowTemplate",
                  htmlTr(
                    list(
                      htmlTd(className = "someRowValue"),
                      htmlTd()
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTextarea
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlTextarea(
                  rows = 4, cols = 50,
                  children = "A text area allows users to input text"
                )
                )
              )
            )

            app$run_server()
    - name: htmlTfoot
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "Within an htmlTable, you can create footer rows with htmlTfoot",
                htmlBr(),
                htmlTable(
                  list(
                    htmlThead(
                      htmlTr(
                        htmlTh("This is in the header of the table")
                      )
                    ),
                    htmlTbody(
                      htmlTr(
                        htmlTd("This is in the body of the table")
                      )
                    ),
                    htmlTfoot(
                      htmlTr(
                        htmlTd("This is in the footer of the table")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTh
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlTable(
                  list(
                    # the following row contains headers
                    htmlTr(
                      list(
                        htmlTh("Header 1"),
                        htmlTh("Header 2")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlThead
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "Within an htmlTable, you can create a header with htmlThead",
                htmlBr(),
                htmlTable(
                  list(
                    htmlThead(
                      htmlTr(
                        htmlTh("This is in the header of the table")
                      )
                    ),
                    htmlTbody(
                      htmlTr(
                        htmlTd("This is in the body of the table")
                      )
                    ),
                    htmlTfoot(
                      htmlTr(
                        htmlTd("This is in the footer of the table")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTime
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlP(
                  list(
                    "It might be useful to wrap dates like ",
                    htmlTime(dateTime = "2019-07-29", children = "July 29th"),
                    " in an htmlTime to make your datetime strings machine-readable."
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTitle
      dontrun: TRUE
      code: |
            # This component's effects will be overridden by the index
            # template in Dash for R. We suggest using Dash's API to
            # set the page title instead:
            #
            # app$title('My page title')
    - name: htmlTr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "Within an htmlTable, individual rows can be made with htmlTr",
                htmlBr(),
                htmlTable(
                  list(
                    # the following row contains headers
                    htmlTr(
                      list(
                        htmlTh("Header 1"),
                        htmlTh("Header 2")
                      )
                    ),
                    # the following row contains cells
                    htmlTr(
                      list(
                        htmlTd("this is a cell"),
                        htmlTd("this is another cell")
                      )
                    )
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlTrack
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlVideo(children = list(
                  htmlSource(src = 'https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4', type = 'video/mp4'),
                  htmlTrack(kind = 'captions', srcLang = 'en', src = 'https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt', default = 'default', label = 'English')
                ),
                controls = TRUE
               )
              )
             )
            )

            app$run_server()
    - name: htmlU
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlU("Wrap your text in htmlU to have it underlined")
                )
              )
            )

            app$run_server()
    - name: htmlUl
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "You can make an unordered list with htmlUl",
                htmlBr(),
                htmlUl(
                  children = list(
                    htmlLi("Some item"),
                    htmlLi("Some other item")
                  )
                )
                )
              )
            )

            app$run_server()
    - name: htmlVar
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "You can use htmlVar to represent the name of a variable",
                htmlBr(),
                htmlVar("myVariable")
                )
              )
            )

            app$run_server()
    - name: htmlVideo
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlVideo(
                  src = "https://ia800303.us.archive.org/18/items/bacteria_friend_and_foe/bacteria_friend_and_foe_512kb.mp4",
                  controls = TRUE,
                  title = "Bacteria: Friend and Foe"
                )
                )
              )
            )

            app$run_server()
    - name: htmlWbr
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                "In a long string, it might be a good idea to add an htmlWbr to specify word breaks",
                htmlP("Thisverylongstringwithnowhitespaceswon'tlookverygood"),
                htmlWbr(),
                htmlP("butatleastyoucanspecifya'natural'placeforthestringtobebrokenup")
                )
              )
            )

            app$run_server()
    - name: htmlXmp
      dontrun: TRUE
      code: |
            library(dash)
            library(dashHtmlComponents)

            app <- Dash$new()

            app$layout(
              htmlDiv(list(
                htmlXmp("xmp elements will be rendered in monospace font"),
                htmlXmp("Note that this element is obsolete in HTML5"),
                htmlA(
                  "See this for more details",
                  href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp"
                )
                )
              )
            )

            app$run_server()