Your first webR-powered Quarto Document using the {quarto-webr} Extension and RStudio

Video Timeline 00:00 - Video Introduction 00:05 - Introduction to the Topic 00:15 - Launch RStudio 00:17 - Create a New Quarto Project Named `demo-webr` Using RStudio's Project Interface 00:45 - Exploring the Fresh RStudio Instance Initialized with the Quarto Project 01:03 - Understanding the Unique Feature: Per-Project Installation of Quarto Extensions 01:25 - Step-by-Step Guide: Installing the `quarto-webr` Extension via Terminal with the Command: `quarto add coatless/quarto-webr` 01:53 - Verification: Spotting the `webr` Filter Installed Within the `_extensions` Folder 02:09 - Transition to the "Source" View for the Quarto Document 02:29 - Incorporating the `webr` Filter into the Document's YAML Configuration 02:44 - Enhancing Interactivity: Substituting `{r}` with `{webr-r}` in the Code Cell Options 03:00 - Rendering the Document by Clicking the "Render" Button 03:07 - Demonstrating Interactivity: Reviewing the Rendered Quarto Document with an Interactive Code Cell and Executing Code Using "Run Code" 03:21 - Dynamic Outputs: Showing Real-Time Switching Between Text and Graphical Outputs Without Re-rendering by Modifying the Code Inside the Cell to `plot(pressure)` and Clicking "Run Code" Again 03:36 - Closing Remarks: Until Next Time! 03:46 - Conclusion and End Credits --- Summary: 1. Opened RStudio from our local installation. 2. Navigated to and clicked on "Project: (None)" located in the upper right corner of the RStudio interface. 3. From the dropdown menu, selected "Create a New Project." 4. Opted for the "New Directory" option and chose the "Quarto Project." 5. Named the directory "demo-webr" and clicked "Create Project." 6. RStudio re-launched with the "demo-webr" project loaded. 7. Installed the quarto-webr extension by accessing the "Terminal" tab, located in the lower left-hand side next to the console, and typed the following command: ``` quarto add coatless/quarto-webr ``` 8. Added the webr filter to the document's YAML header. 9. Modified the code chunk from `{r}` to `{webr-r}` and proceeded to click "Render." --- Links: quarto-webr Extension Documentation: http://quarto-webr.thecoatlessprofess... Extension project Source: https://github.com/coatless/quarto-webr webR Project Documentation: https://docs.r-wasm.org/webr/latest/ Project Source: https://github.com/r-wasm/webr --- Socials 👨‍💻 https://github.com/coatless 🐘 https://mastodon.social/@coatless 🦋 https://bsky.app/profile/coatless.bsk... 🕸️ https://thecoatlessprofessor.com 📋   / jamesbalamuta   🕊️   / axiomsofxyz