Shiny in Blogdown

Data Visualization
Shiny
A short R note on embedding a hosted Shiny app inside a static blog page using an iframe or knitr helper.
Author

Yang Liu

Published

February 24, 2019

How to embed Shiny

Static blog systems such as Blogdown or Quarto cannot run a Shiny server inside an R Markdown or Quarto document. The usual solution is to host the Shiny app separately, then embed it in the page with an iframe.

The direct HTML version is written outside the chunk:
<iframe src=“https://liuyanguu.shinyapps.io/bcl_app/” width=“1000” height=“800”></iframe>

There is also a built-in function in knitr that does the same thing inside a chunk. The main difference is that we can only set height, and the Shiny app may appear slightly differently, with the sidebarPanel at the top and the mainPanel beneath it.

knitr::include_app("https://liuyanguu.shinyapps.io/bcl_app/", height = "100%")
# by the way, you can also embed your slides in a similar way, for example:
knitr::include_url('https://timmastny.rbind.io/slides/first_presentation#2')

My Shiny app example

I modified the excellent example and tutorial by Dean Attali, who is also the author of ggExtra’s marginal plot. I found it clearer than the Shiny training materials I had used before.
Thanks a lot. Yes, I donated.

If this embedding does not display well on your screen, here is the link to the app.

The code for the app
All the code is in one file. I did not split the UI and server into separate files.
The code is hosted on GitHub.