In this tutorial, I will cover how to include custom JavaScript, CSS and HTML code in your R shiny app. By including them, you can make a very powerful professional web app using R.First let's understand basics of a WebpageIn general, web page contains the following section of details.
Content (Header, Paragraph, Footer, Listing)
Font style, color, background, border
Images and Videos
Popups, widgets, special effects etc.
HTML, CSS and JavaScript
These 3 web programming languages in conjunction  take care of all the information webpage contains (from text to adding special effects).
HTML determines the content and structure of a page (header, paragraph, footer etc.)
CSS controls how webpage would look like (color, font type, border etc.)
JavaScript decides advanced behaviors such as pop-up, animation etc.
Fundamentals of Webpage
One of the most common web development term you should know : rendering. It is the act of putting together a web page for presentation.
Shiny Dashboard SyntaxIn this section, I am using syntax of shinydashboard library. The structure of shinydashboard syntax is similar to shiny library. Both requires ui and server components. However, functions are totally different. Refer the code below. Make sure to install library before using the following program.# Load Librarylibrary(shinydashboard)# User Interfaceui = dashboardPage( dashboardHeader(title = &quot;Blank Shiny App&quot;), dashboardSidebar(), dashboardBody() )# Serverserver = function(input, output) { }# Run ApprunApp(list(ui = ui, server = server), launch.browser =T)
Example : Create Animation EffectThe program below generates animation in the web page. To test it, you can check out this link. When user hits &quot;Click Me&quot; button, it will trigger demojs() JavaScript which will initiate animation. It's a very basic animation. You can edit the code and make it as complex as you want.
HTML
Click Me CSS
#sampleanimation {width: 50px;height: 50px;position: absolute;background-color: blue;}#myContainer { width: 400px; height: 400px; position: relative; background: black;}
JS
function demojs() { var elem = document.getElementById('sampleanimation'); var position = 0; var id = setInterval(frame, 10); function frame() { if (position == 350) { clearInterval(id); } else { position++; elem.style.top = position + 'px'; elem.style.left = position + 'px'; } }}
There are several ways to include custom JavaScript and CSS codes in Shiny. Some of the common ones are listed below with detailed explanation -Method I : Use tags to insert HTML, CSS and JS Code in ShinyHTMLtags$body(HTML(&quot;Your HTML Code&quot;))
CSStags$head(HTML(&quot;Your CSS Code&quot;))
ORCSS code can also be defined using tags$style. tags$head(tags$style(HTML(&quot; Your CSS Code &quot;)))
JStags$head(HTML(&quot;Your JS Code&quot;))
ORJS code can be described with tags$script.tags$head(tags$script(HTML(&quot; Your JS Code &quot;)))
Code specified in tags$head means it will be included and executed under . Similarly tags$body can also be used to make shiny run code within tags$head vs. tags$bodyIn general, JavaScript and CSS files are defined inside  . Things which we want to display under body section of the webpage should be defined within .Animation Code in Shinylibrary(shinydashboard) # User Interface ui function demojs() { var elem = document.getElementById('sampleanimation'); var position = 0; var id = setInterval(frame, 10); function frame() { if (position == 350) { clearInterval(id); } else { position++; elem.style.top = position + 'px'; elem.style.left = position + 'px'; } } } &quot;)), # CSS Code tags$head(HTML(&quot; &quot;)), # HTML Code box(tags$body(HTML(&quot;Click Me &quot;)), height = 400) )) server = function(input, output) { } runApp(list(ui = ui, server = server), launch.browser =T) Important NoteIn JS, CSS and HTML code, make sure to replace double quotation mark with single quotation mark under shiny's HTML(&quot; &quot;) function as it considers double quotation mark as closing the function.
Method II : Call JavaScript and CSS files in ShinyYou can use includeScript( ) and includeCSS( ) functions to refer JS and CSS codes from files saved in your local directory. You can save the files anywhere and mention the file location of them in the functions.How to create JS and CSS files manuallyOpen notepad and paste JS code and save it with .js file extension and file type &quot;All files&quot; (not text document). Similarly you can create css file using .css file extension.
library(shinydashboard) # User Interface ui Click Me &quot;)), height = 400) )) server = function(input, output) { } runApp(list(ui = ui, server = server), launch.browser =T) When to use Method 2?When you want to include a big (lengthy) JS / CSS code, use method 2. Method 1 should be used for small code snippets as RStudio does not support coloring and error-checking of JS / CSS code. Also it makes code unnecessary lengthy which makes difficult to maintain.
Method III : Add JS and CSS files under www directoryStep 1 : Create an app using shinyApp( ) function and save it as app.R. Refer the code below.library(shinydashboard) library(shinydashboard) app Click Me &quot;)), height = 400) )) , server = function(input, output) { } ) Step 2 :Create a folder named www in your app directory (where your app app.r file is stored) and save .js and .css files under the folder. Refer the folder structure below.├── app.R└── www └── animate.js └── animation.css
Step 3 :Submit runApp( ) function. Specify path of app directory.runApp(appDir = &quot;C:/Users/DELL/Documents&quot;, launch.browser = T) About Author: Deepanshu founded ListenData with a simple objective - Make analytics easy to understand and follow. He has over 7 years of experience in data science and predictive modeling. During his tenure, he has worked with global clients in various domains.
Let's Get Connected: LinkedIn