How to use bootstraplib’s Live Theme Previewer to customize Shiny apps?

[This article was first published on r-bloggers on Programming with R, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

One of the announcements of RStudio conf 2020 that caught my eyes is a brand new package {bootstraplib} – https://github.com/rstudio/bootstraplib/ . It’s another open-source contribution from RStudio (a PBC).

{bootstraplib} basically provides tools for theming shiny and rmarkdown from R via Bootstrap (3 or 4) Sass. If you’re not aware of Bootstrap, it’s one of the most popular (open-source) css framework available on the web.

While {bootstraplib} has got a lot of things, this post is going to be about one thing that I love the most which is “Live Theme Preview” where we can simply edit the values of CSS properties and see the change in Real time. This changes are then printed on your RStudio Console as R code which can be used in your Shiny app / RMarkdown and Tada you’ve just upgraded your boring Shiny app / RMarkdown to a charming Shiny app.

Package:

{bootstraplib} is currently available only on Github (so not on CRAN yet).

remotes::install_github("rstudio/bootstraplib")
#or 
devtools::install_github("rstudio/bootstraplib")
library(bootstraplib)

Steps to enable Real Time / Live Bootstrap themer for your Shiny app

Considering that you’ve got an existing shiny app.

  1. Load the library with library(bootstraplib)
  2. Add the below code to initialize a bootstrap theme in your ui.R
bs_theme_new(bootswatch = "sketchy")
  1. Add the theme preview function inside your Shiny Server function of server.R. Note this is only required as long as you need the Live theme Customization feature and Run the app (as usually you run it)
bootstraplib::bs_themer()
  1. While you’re customizing the theme, the corresponding R code gets printed on your Console which you can copy and add it in your ui.R just below where you’ve created the bootstrap theme.
bs_theme_new(bootswatch = "sketchy")
bs_theme_add_variables(`body-bg` = "#2CEC11")
bs_theme_add_variables(`body-bg` = "#2CEC11", `body-color` = "#292123")
bs_theme_add_variables(`body-bg` = "#2CEC11", `body-color` = "#F61D49")
  1. Don’t forget to remove or comment out the live preview function you had added in the Server.R’s Shiny server function (Step 3)
#bootstraplib::bs_themer()

Sample Screenshot of Live Theme Editing

bootstraplib live shiny app themeing

Bootstraplib’s Documentation Demo

bootstraplib demo

This not only can help you in beautifying the looks of your Shiny app / RMarkdown but also can open up multiple arenas to create Organziation-theme specific reports from RMarkdown and dashboards from Shiny, Thus making Organiztions embrace reproducible reports/apps than the never-die Powerpoint.

If you’re interested in learning more about Shiny, Check out THIS

Sample Shiny Code with Bootstraplib Live Theme Editor

ui.R

#
# This is the user-interface definition of a Shiny web application. You can
# run the application by clicking 'Run App' above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)

bs_theme_new(bootswatch = "sketchy")


bs_theme_add_variables(`body-bg` = "#2CEC11")
bs_theme_add_variables(`body-bg` = "#2CEC11", `body-color` = "#292123")
bs_theme_add_variables(`body-bg` = "#2CEC11", `body-color` = "#F61D49")
# Define UI for application that draws a histogram
shinyUI(fluidPage(
    bootstrap(),
    

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
            plotOutput("distPlot")
        )
    )
))

server.R

#
# This is the server logic of a Shiny web application. You can run the
# application by clicking 'Run App' above.
#
# Find out more about building applications with Shiny here:
#
#    http://shiny.rstudio.com/
#

library(shiny)
library(bootstraplib)



# Define server logic required to draw a histogram
shinyServer(function(input, output) {
    # uncomment this when you want live previewing / editing of this theme    
    #bootstraplib::bs_themer()
    output$distPlot <- renderPlot({

        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')

    })

})

To leave a comment for the author, please follow the link and comment on their blog: r-bloggers on Programming with R.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)