Shiny in xaringan

[royfrancis]

Do shiny widgets and shiny apps work inside a xaringan presentation?

Here is a sample document I am testing. This code in an RMarkdown document

---
title: "shiny-test"
output: 
  html_document
runtime: shiny
---

```{r,echo=FALSE,message=FALSE}
library(shiny)
```

```{r}
shinyApp(
  ui=fluidPage(
    textInput("text_input",label="textInput"),
    textOutput("text_output")),
  server=function(input,output) {
    output$text_output <- renderText({input$text_input})
 }
)
```

run using rmarkdown::run("shiny-test.Rmd") opens up a browser and works as expected.

Replacing html_document with xaringan::moon_reader does not work.

[gadenbuie]

Shiny currently doesn't work in xaringan presentations (slide 20 of xaringan intro). The current recommendation is to launch the app in a new browser tab, which isn't burdensome because you'll be presenting from a browser anyway.

Similarly, the Shiny mode (runtime: shiny) does not work. I might get these issues fixed in the future, but these are not of high priority to me. I never turn my presentation into a Shiny app. When I need to demonstrate more complicated examples, I just launch them separately. It is convenient to share slides with other people when they are plain HTML/JS applications.

If you really really want your Shiny app inside your slides, you can try embedding the app inside an <iframe>.

[royfrancis]

Ah thanks! I remember seeing a note about shiny in xaringan somewhere and couldn't recall where.

What do you mean by "launch the app in a new browser"?

By embedding in <iframe>, do you mean like this?

<iframe>
```{r}
shinyApp(
  ui=fluidPage(),
  server=function(input,output) {})
```
</iframe>

because that doesn't work. I also tried frameWidget() from widgetframe.

```{r}
frameWidget(shinyApp(
  ui=fluidPage(),
  server=function(input,output) {}))
```

Doesn't work either. I am probably using it incorrectly.

[royfrancis]

I do agree that having live shiny widgets in a presentation is generally not desirable. Unless... the presentation itself is about shiny apps :) which is my situation.

[gadenbuie]

Okay, so rather than trying to build the Shiny app in the same document as your slides, the recommendation would be to build and deploy your app separately. For example, you could deploy your app on shinyapps.io.

Then you can either open a link to your Shiny app in a separate tab, or you could use iframe to embed the Shiny app into your slides.

Let's say your app is deployed at royfrancis.shinyapps.io/exampleApp. Then to link to the app you would use

![Example App](https://royfrancis.shinyapps.io/exampleApp)

or to embed the app you would use

<iframe src="https://royfrancis.shinyapps.io/exampleApp"></iframe>

You can add CSS styles to the <iframe> element to position and size it appropriately.

[royfrancis]

Right. That makes sense. Thanks!

[QuinnAsena]

As an expression of interest, embedding shiny apps in xaringan would be really useful to my work.
Thanks for the great package :)

[yihui]

@QuinnAsena I tried a couple of years ago, but it was too challenging and now I don't remember what the challenges were.

[jcrodriguez1989]

Hi, I am having a related issue.
I am embedding several iframes on my xaringan slides, for example:

• in slide 1 I have <iframe src="https://myApp?slide=1" loading="lazy"></iframe>
• in slide 3 I have <iframe src="https://myApp?slide=3" loading="lazy"></iframe>

but the lazy loading is not working, it is always loading every iframe when opening the slides. I need to get the url only when the current slide is being open.
Is there any way of getting this?

thanks!

[gadenbuie]

It seems that lazy loading of iframes doesn’t work for hidden iframes.

[QuinnAsena]

If it is any help, I reversed things and put xaringan in Shiny (tab 4):
https://quinnasena.shinyapps.io/growth_app/

Code:
https://github.com/QuinnAsena/growth_lecture

[jcrodriguez1989]

@QuinnAsena thanks for your recommendation, however, I need Shiny in slides 😬

@gadenbuie , so xaringan hides all non-showing slides? In other words, it wont be possible to get what I want? 😂

thanks for such fast replies!!

[royfrancis]

@QuinnAsena Thanks for the example, but that is just a PDF in shiny and not really an interactive xaringan presentation.

[gadenbuie]

@jcrodriguez1989 yes exactly. I should have mentioned it in my reply; all of the slides except for the current slide have display: none, so I don’t think there’s a way to make lazy loading (of iframes) work.

[QuinnAsena]

@QuinnAsena Thanks for the example, but that is just a PDF in shiny and not really an interactive xaringan presentation.

@royfrancis Oh yes, that's true. It should be possible to embed the interactive presentation though right (iframe?, includehtml?)? Can't quite remember why I chose PDF, maybe ran into some issue or just decided students would prefer PDF format.

[jcrodriguez1989]

thanks for your reply @gadenbuie !