WebR: Use with an existing quarto website

Website

Try webR with an existing quarto project.

Author

Chi Zhang

Published

October 1, 2023

When you create a new quarto website, inside _quarto.yml the output-dir isn’t specified. In this case, when you follow the tutorial by James J Balamuta (creator of the extension quarto-webr) you will be able to render a functional webR page. Yet, if you already have an existing quarto website deployed by Github actions (with output-dir: docs), the default solution might not work.

Fortunately, the fix is simple enough. I think this feature will be added to the future versions of quarto-webr extension, because this extension is just great.

Installation

Open terminal, install the extension in the root of the current quarto project. This is important, as quarto extensions are project-based, i.e. need to be included in each quarto project.

quarto add coatless/quarto-webr

Configuration

Add the following lines in the yaml header in the quarto file you want to run webR. For example,

title: "WebR demo"
engine: knitr
format: html
filters: 
  - webr
webr: 
  channel-type: "post-message"

Important bits:

  • specify engine to knitr
  • specify filters to - webr. This could alternatively be specified in the overall _quarto.yml file to apply to every qt document.
  • add channel-type: "post-message" under webr. No dash in front.

Execution

Now use the curly bracket {webr-r} for your code chunk (which used to be just {r}),


A histogram that changes every time you click RUN CODE. This proves that we are running interactively the R code inside the web browser.