Skip to contents

Expermimental. An glue-like output for Shiny. epoxyHTML() lets you use placeholders in your HTML such as "{{height}}", that are provided values from the server by giving renderEpoxyHTML() a height value.


  .class = NULL,
  .class_item = NULL,
  .container = "div",
  .container_item = "span",
  .placeholder = "",
  .sep = "",
  .open = "{{",
  .close = "}}",
  .na = "",
  .null = "",
  .literal = FALSE,
  .trim = FALSE



The output id


UI elements or text (that will be treated as HTML), containing template variables. Use named values to provide initial placeholder values.


Classes added to the output div, in addition to .epoxy-html


Classes added to the .container wrapping each template variable.


The name of the HTML element to be used for the output element, by default "div".


The name of the HTML element to be used for each template item, by default "span".


Default placeholder if a template variable placeholder isn't provided.


[character(1): ‘""’]
Separator used to separate elements.


Opening template variable delimiter


Closing template variable delimiter


[character(1): ‘NA’]
Value to replace NA values with. If NULL missing values are propagated, that is an NA result will cause NA output. Otherwise the value is replaced by the value of .na.


[character(1): ‘character()’]
Value to replace NULL values with. If character() whole output is character(). If NULL all NULL values are dropped (as in paste0()). Otherwise the value is replaced by the value of .null.


[boolean(1): ‘FALSE’]
Whether to treat single or double quotes, backticks, and comments as regular characters (vs. as syntactic elements), when parsing the expression string. Setting .literal = TRUE probably only makes sense in combination with a custom .transformer, as is the case with glue_col(). Regard this argument (especially, its name) as experimental.


[logical(1): ‘TRUE’]
Whether to trim the input template with trim() or not.


An HTML object.

HTML Markup

By default, placeholders are inserted into a <span> element in your UI, with the classes specified in .class_item.

epoxyHTML() also supports an HTML markup syntax similar to pug (an HTML preprocessor). With the markup syntax, "{{h3.example.basic%basic-three demo}}" creates a demo placeholder inside an <h3 id="basic-three" class="example basic"></h3> tag.

The placeholder template string follows the pattern {{<markup> <name>}}. The markup syntax comes first, separated from the placeholder name by a space. The HTML element is first, followed by classes prefixed with . or and ID prefixed with #. The template markup can contain only one element and one ID, but many classes can be specified.

See also



ui <- shiny::fluidPage(
  shiny::h2("epoxyHTML demo"),
    .id = 'test',
    .class_item = "inner",
        class = "col-xs-4",
          inputId = "thing",
          label = "What is this {{color}} thing?",
          choices = c("apple", "banana", "coconut", "dolphin")
        class = "col-xs-4",
          inputId = "color",
          label = "What color is the {{thing}}?",
          c("red", "blue", "black", "green", "yellow")
        class = "col-xs-4",
          inputId = "height",
          label = "How tall is the {{color}} {{thing}}?",
          value = 5,
          min = 0,
          max = 10,
          step = 0.1,
          post = "ft"
    shiny::tags$p(class = "big", "The {{color}} {{thing}} is {{height}} feet tall."),
    # Default values for placeholders above.
    thing = "THING",
    color = "COLOR",
    height = "HEIGHT"
    '.big { font-size: 1.5em; }
    .inner:not(.epoxy-item__placeholder) { background-color: rgba(254, 233, 105, 0.5)}
    .epoxy-item__placeholder { color: #999999; }'

server <- function(input, output, session) {
  output$test <- renderEpoxyHTML(
    thing = input$thing,
    color = input$color,
    height = input$height

if (interactive()) {
  shiny::shinyApp(ui, server)