'jQuery UI' Interactions and Effects for Shiny

An extension to shiny that brings interactions and animation effects from 'jQuery UI' library.


Travis-CI Build Status AppVeyor Build Status CRAN_Status_Badge

The shinyjqui package is an R wrapper for jQuery UI javascript library. It allows user to easily add interactions and animation effects to a shiny app.


You can install the stable version from CRAN, or the development version from github with:

# for the development version


# load packages
  • Draggable: Allow elements to be moved using the mouse
server <- function(input, output) {}
ui <- fluidPage(
  # for shinyjqui v0.2.0 or lower, please use jqui_draggabled instead 
  jqui_draggable(fileInput('file', 'File'))
shinyApp(ui, server)

  • Resizable: Change the size of an element using the mouse.
server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
ui <- fluidPage(
  # for shinyjqui v0.2.0 or lower, please use jqui_resizabled instead
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
shinyApp(ui, server)

  • Sortable: Reorder elements in a list or grid using the mouse.
server <- function(input, output) {
  output$hc <- renderHighchart({
    hchart(mtcars, "scatter", hcaes(x = cyl, y = mpg, group = factor(vs))) %>% 
      hc_legend(enabled = FALSE)
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(vs))) + 
      geom_point() + 
      theme(legend.position= "none")
ui <- fluidPage(
  # for shinyjqui v0.2.0 or lower, please use jqui_sortabled instead
  jqui_sortable(div(id = 'plots',
                     highchartOutput('hc', width = '200px', height = '200px'),
                     plotOutput('gg', width = '200px', height = '200px')))
shinyApp(ui, server)

  • Animation Effects: Apply an animation effect to an element. Effects can also be used in hide or show.
server <- function(input, output) {
  observeEvent(input$show, {
    jqui_show('#gg', effect = input$effect)
  observeEvent(input$hide, {
    jqui_hide('#gg', effect = input$effect)
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg, color = factor(gear))) +
      geom_point() +
      theme(plot.background = element_rect(fill = "transparent",colour = NA))
  }, bg = "transparent")
ui <- fluidPage(
  div(style = 'width: 400px; height: 400px',
      plotOutput('gg', width = '100%', height = '100%')),
  selectInput('effect', NULL, choices = get_jqui_effects()),
  actionButton('show', 'Show'),
  actionButton('hide', 'Hide')
shinyApp(ui, server)

  • Classes transformation: Add and remove class(es) to elements while animating all style changes.
server <- function(input, output) {
  current_class <- c()
    class_to_remove <- setdiff(current_class, input$class)
    class_to_add <- setdiff(input$class, current_class)
    current_class <<- input$class
    if(length(class_to_remove) > 0) {
      jqui_remove_class('#foo', paste(class_to_remove, collapse = ' '), duration = 1000)}
    if(length(class_to_add) > 0) {
      jqui_add_class('#foo', paste(class_to_add, collapse = ' '), duration = 1000)}
ui <- fluidPage(
      HTML('.class1 { width: 410px; height: 100px; }
            .class2 { text-indent: 40px; letter-spacing: .2em; }
            .class3 { padding: 30px; margin: 10px; }
            .class4 { font-size: 1.1em; }')
  div(id = 'foo', 'Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.'),
  checkboxGroupInput('class', 'Class',
                     choices = list(`width: 410px; height: 100px;` = 'class1',
                                    `text-indent: 40px; letter-spacing: .2em;` = 'class2',
                                    `padding: 30px; margin: 10px;` = 'class3',
                                    `font-size: 1.1em;` = 'class4'))
shinyApp(ui, server)

  • orderInput(): Display a list of items. Their order can be changed by drag and drop.
server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest_order) })
ui <- fluidPage(
  orderInput('source', 'Source', items = month.abb,
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
shinyApp(ui, server)

  • sortableTableOutput(): Render a HTML table with sortable rows.
ui <- fluidPage(
server <- function(input, output) {
  output$index <- renderPrint({
    cat("Row index:\n")
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
shinyApp(ui, server)

  • selectableTableOutput(): Render a HTML table with selectable rows or cells.
ui <- fluidPage(
  selectableTableOutput("tbl", selection_mode = "cell"),
server <- function(input, output) {
  output$selected <- renderPrint({
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
shinyApp(ui, server)


shinyjqui 0.3.2

  • Bug fix: The interaction functions were not working in ui mode when the ui has an id with spaces.
  • Bug fix: The interaction functions were not working in ui mode when there are other output elements exist. (#25)
  • Bug fix: Effect and class functions were not working duo to the upgrade of v0.3.0. (#26, #28)

shinyjqui 0.3.1

  • Bug fix: The interaction functions were not working in selector mode duo to the v0.3.0 update.
  • Bug fix: For the shiny output elements created by insertUI or renderUI, the mouse interaction effects are now working.

shinyjqui 0.3.0

  • New feature: Introduce save and load operations to mouse-interaction attached html elements. This enabled client-side store and restore the elements' states (eg. position, size, selection and order). (#16)
  • New feature: The -able functions can be used in both shiny server and ui, and therefore, the -abled functions are deprecated.
  • New feature: Adds shiny bookmark supporting to mouse-interaction attached html elements. This enabled server-side or across-client store and restore the elements' states (eg. position, size, selection and order). (#12)
  • New feature: Now, all interaction functions' selector argument accepts JS() wrapped javascript expression. This made the target element selection more flexible.
  • New feature: Add draggableModalDialog(), sortableCheckboxGroupInput(), sortableRadioButtons(), sortableTabsetPanel(), sortableTableOutput() and selectableTableOutput() functions to create shiny inputs and outputs with mouse interactions.
  • Breaking change: The switch argument in mouse-interaction functions was replaced with operation argument to support more options.
  • Breaking change: The shiny input values selected from selectable and order from sortable now return elements' innerText instead of innerHTML.
  • Bug fix: The mouse interaction function doesn't work when the same element is inserted again. (#6, #8)
  • Bug fix: Resizable interferes with other interactions when the target element is a shiny output. (#10)
  • Bug fix: Add htmlDependency to jqui_icon() to make it work in version 0.2.0 and above.

shinyjqui 0.2.0

  • No longer needed to call includeJqueryUI() before using other shinyjqui functions.(#4)
  • New jqui_icon() to create a jQuery UI icon.
  • New jqui_toggle() to toggle display/hide state of a shiny html element with animation.
  • New pre-defined interaction-specific shiny input values: is_dragging for draggable; over, drop, dropped and out for droppable; is_resizing for resizable; is_selecting for selectable.(#1) See vignettes for details.
  • Minify shinyjqui.js.(#3)
  • Import and export JS() from htmlwidgets package.
  • Add pkgdown docs.
  • Documentation with Roxygen2 6.0.1.

shinyjqui 0.1.0

  • Added a NEWS.md file to track changes to the package.

Reference manual

It appears you don't have a PDF plugin for this browser. You can click here to download the reference manual.


0.3.3 by Yang Tang, 8 months ago


Report a bug at https://github.com/yang-tang/shinyjqui/issues

Browse source code at https://github.com/cran/shinyjqui

Authors: Yang Tang [aut, cre]

Documentation:   PDF Manual  

MIT + file LICENSE license

Imports shiny, htmltools, htmlwidgets, jsonlite

Suggests ggplot2, highcharter, knitr, rmarkdown

Imported by CaPO4Sim, Factoshiny, ggquickeda, html2R.

Suggested by SOMbrero, bsub, compareGroups, shinyMergely, shinyMonacoEditor, shinydashboardPlus.

See at CRAN