Pairing {quarto-shinylive} and {quarto-webr}

The document is split into two sections. The first section showcases the active code cells and the second portion of the document focuses on re-creating this document.

Working Demo

Let’s take a quick look at the technologies in action.

Important

Shinylive applications are unable to share their contents with each other or {quarto-webr}. Thus, variables defined in a Shiny app or inside of a {webr-r} code cell are only available in the defining technology.

{quarto-shinylive}

Example of a Shinylive application inside of the Quarto document.

#| standalone: true
library(shiny)
library(bslib)
library(shinylive)

is_shinylive <- function() { R.Version()$arch == "wasm32"}

ui <- page_fillable(
    class = "d-flex flex-column text-center align-items-center justify-content-center",
    h1("Is this app running in shinylive?"),
    textOutput("in_shinylive", container = \(...) p(..., class="fs-2 fw-bold"))
)

server <- function(input, output, session) {
    output$in_shinylive <- renderText({
        if (is_shinylive()) "Yes." else "No."
    })
}

shinyApp(ui, server)

{quarto-webr}

Example of the {quarto-webr} Extension working alongside a {quarto-shinylive} cell.

Interactive

Non-interactive

Walkthrough

In this section, we go step-by-step to create portions of the above code cell demo.

Installation

The installation process requires installing Quarto Extensions using Terminal and the {shinylive} R package R package for Shinylive using the R console.

Quarto Extensions

Please make sure to create a Quarto project and, then, install each extension inside of Terminal:

# For shinylive
quarto add quarto-ext/shinylive

# For quarto-webr
quarto add coatless/quarto-webr

Both extensions should be found in _extensions/ within the project directory. That is, if you navigate to the _extensions/ folder, you should see:

.
β”œβ”€β”€ _extensions
β”‚   β”œβ”€β”€ coatless
β”‚   β”‚   └── webr
β”‚   └── quarto-ext
β”‚       └── shinylive
└── quarto-project-in-rstudio.Rproj

If not, please double-check your working project directory.

R Package

We need to install the {shinylive} R package in order for the {quarto-shinylive} extension to work by typing into R console:

install.packages("shinylive")

Quarto Document

From there, please setup a Quarto document (.qmd) that contains:

  1. the Shiny app source inside of a code cell denoted with {shinylive-r}; and,
  2. the code you want webr to use with {webr-r}.

Here is an example skeleton Quarto document that has both code cells present:

---
title: Pairing {quarto-shinylive} and {quarto-webr}
format:
  html:
    resources: 
      - shinylive-sw.js
engine: knitr
filters:
  - webr
  - shinylive
---

## `{quarto-shinylive}`

```{shinylive-r}
#| standalone: true
library(shiny)

ui <- fluidPage(
   titlePanel("Hello Shiny!")
)

server <- function(input, output, session) {
  # code
}

shinyApp(ui, server)
```

## `{quarto-webr}`


### Interactive

```{webr-r}
print("Hello {quarto-webr} world!")
```

### Non-interactive

```{webr-r}
#| context: output
cat("And, this is a non-interactive cell", fill = TRUE)
```