Interactive plots from Quarto docs not rendering inside R Shiny using iframe, How to render Quarto ".qmd" files within R Shiny app?

Goal
I want to render multiple Quarto files (.qmd) inside existing one R Shiny App

Current Solution
My current solution is to render Quarto files into html and disply html files inside R Shiny App, however this does not work for interactive plots. I am aware that I can use shiny inside Quarto documents but I want to render quarto with its functionalities inside R Shiny.

Reproducible Example Code

app.R

library(shiny)
library(quarto)

ui <- fluidPage(titlePanel("Reproducable Example"),
                
                sidebarLayout(
                  sidebarPanel(
                    textInput(inputId = "user_argument", label = "Argument"),
                    br(),
                    actionButton("render_button", "Render Quarto ")
                  ),
                  mainPanel(uiOutput("quarto_output"))
                ))

server <- function(input, output) {
  observeEvent(input$render_button, {
    quarto::quarto_render("example.qmd",
                          execute_params = list(user_arg = input$user_argument))
    html <-  readLines("qmd_output.html")
    # Display html in output
    output$quarto_output <- renderUI({
      tags$iframe(srcdoc = html,
                  height = "500px",
                  width = "100%")
    })
  })
}

# Run the application
shinyApp(ui = ui, server = server)

example.qmd

---
title: "Quarto HTML Basics"
format:
  html:
    code-tools: true
    self-contained: true
    output-file: "qmd_output.html"
    theme: cosmo
execute:
  warning: false
params:
  user_arg: NA
---



```{r}
#| label: fig-temperatures
#| fig-cap: "New Haven Temperatures"

library(dygraphs)
dygraph(nhtemp) %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))
```

## Argument

My name is `r params$user_arg`.

Observations

1. The interactive plot is working when quarto renders the html and not working when same html is rendered inside R Shiny
2. I am using iframe because directly inserting the html inside the R Shiny also overrides the css from inserted html.

Help

1. Is there any other way to render Quarto files inside R Shiny App?
2. If no, any option to render interactive plots in Shiny from html?

New answer

After juuust a bit of tinkering, I got the iframe to work, and the CSS doesn't spill over. Here's what I did:
First, create a www folder in your directory where app.R lives. Web resources can be easily used if they are placed in this directory.
Next, move example.qmd inside the www folder. Finally, change the observeEvent to this:

observeEvent(input$render_button, {
    quarto::quarto_render("www/example.qmd", #note the www/
                          execute_params = list(user_arg = input$user_argument)
                          )
    html <-  "qmd_output.html" # WITHOUT www! Because www/ is implicit in src calls
    # Display html in output
    output$quarto_output <- renderUI({
      
      tags$iframe(src = html,
                  height = "500px",
                  width = "100%")
    })
  })

Original reply

Not a perfect answer, but this will get your Quarto document showing up:

change the observeEvent to this:

observeEvent(input$render_button, {
    quarto::quarto_render("example.qmd",
                          execute_params = list(user_arg = input$user_argument))
    html <-  "qmd_output.html" #CHANGED you defined this name in example.qmd
    # Display html in output
    output$quarto_output <- renderUI({
      # I didn't get iframe to work, but using the next line will load the generated HTML
      includeHTML(html)
  })