Dynamic Interactions with WebAssembly in R and Python

Bringing Data Science Languages to the Web with WebAssembly

I recently had the pleasure of giving guest lectures on “Dynamic Interactions for R and Python” for Stanford University’s STATS 352 Spring 2024 course. In these sessions, I shared my work on creating interactive data science documents using WebAssembly (WASM), and I wanted to capture some of those key insights here.

What is WebAssembly?

WebAssembly is a binary instruction format designed with safety in mind. It enables high-performance applications to run in web browsers, providing “near-native execution speed” in a containerized, sandboxed environment. This technology allows languages like R and Python to run directly in the browser without requiring a server.

The exciting part? This fundamentally changes how we can create, share, and interact with data science content.

WebR and Pyodide: R and Python in Your Browser

Two amazing projects are at the center of this revolution:

1. webR: A version of the R interpreter built for WebAssembly, created by George Stagg and Lionel Henry
2. Pyodide: A Python distribution for the browser created by Michael Droettboom and the Pyodide Contributors

These projects allow you to run R and Python code directly in your web browser without needing to install anything or connect to a remote server!

From Server-Based to Browser-Based Computing

Traditionally, interactive data analysis required either:

1. Compute Servers: Where users send code to be executed on a remote server
2. Local Installation: Where users must install R or Python on their own computers

WebAssembly introduces a third approach: the web server sends a copy of R or Python to your browser, and your computer runs the code locally. This paradigm shift offers several advantages:

• Universal computing environments (everyone has the same setup)
• No license fees
• No installation required
• Works on any device with a modern browser

Quarto Extensions That Make It Possible

In my work, I’ve developed two Quarto extensions that bring this technology to life:

• quarto-webr: Running R code in the browser under a Quarto Document
• quarto-pyodide: Running Python code in the browser via a Quarto Document

These extensions connect the power of Quarto (a next-generation publishing system that unifies and extends the R Markdown ecosystem) with WebAssembly-based R and Python, creating a powerful platform for interactive documents.

Creating Your First Interactive Document

Let me show you how easy it is to create an interactive R document with Quarto and webR:

---
title: "Interactive R in the Browser"
format: html
engine: knitr
filters:
  - webr
---

This is a webR-enabled code cell in a Quarto HTML document:

```{webr-r}
# This code runs directly in your browser!
data(mtcars)
model <- lm(mpg ~ wt, data = mtcars)
summary(model)
plot(mtcars$wt, mtcars$mpg)
abline(model, col = "red")
```

When a reader opens this document, they can:

1. See the code
2. Modify it if they want
3. Run it directly in their browser
4. See the results immediately

And for Python:

---
title: "Interactive Python in the Browser"
format: html
filters:
  - pyodide
---

This is a Python code cell that runs in your browser:

```{pyodide-python}
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 10, 100)
y = np.sin(x)

plt.figure(figsize=(7, 4))
plt.plot(x, y)
plt.title("Sin Wave")
plt.show()
```

Real-World Applications

I’ve been thrilled to see these extensions adopted in various educational and research contexts:

• Educational Materials: Interactive textbooks and tutorials where learners can experiment with code
• Data Dashboards: Self-contained analytical reports that allow users to explore data
• Scientific Publishing: Research papers with reproducible analysis embedded directly in the document
• Technical Documentation: API guides with live code examples

For the webR extension, I’ve tried to capture some of the adoption in my Community Examples webpage.

For the Pyodide extension, I’ve seen great adoption from:

• Prof Louis Moresi’s EMSC program
• Rémi Genet’s Introduction to Python (in French)
• Prof. Kendra Burbank’s STAT 24320 course notes

Getting Started

Want to try this yourself? Here’s how:

1. Install Quarto from quarto.org
2. Add the webR extension with: quarto add coatless/quarto-webr
3. Add the Pyodide extension with: quarto add coatless-quarto/pyodide
4. Create a document using the formats shown above
5. Render and share!

For those who prefer an immediate start, I’ve created a GitHub Codespace that you can use:

Open in GitHub Codespaces

Limitations to Consider

While I’m excited about this technology, I also recognize some trade-offs:

• Initial Load Time: The first load requires downloading R or Python, which can be substantial
• Privacy: All code is visible in the source (no hidden solutions)
• Internet Required: Users need an internet connection to initially load the document
• Performance: Complex computations will run slower than native installations

Looking Forward

As I continue to develop these extensions, I’m working on:

• Improving the quarto-pyodide extension features (message posting interface, better graphing support)
• Formalizing a built-in code exercise checking feature
• Moving toward native code APIs
• Exploring dynamic input toggles alongside code cells

I recently showed a prototype of dynamic input controls that I’m particularly excited about:

Prototype of dynamic input controls with interactive code cells

Resources to Learn More

• WebAssembly
  • webR Documentation
  • Pyodide Documentation
• Quarto
• Quarto Extension Documentation Websites
  • quarto-webr
  • quarto-pyodide
  • GitHub Repository with Examples
• Talk Contents
  • Stanford Lecture Materials
  • GitHub Source

If you have questions or want to share how you’re using these extensions, feel free to reach out or open an issue on GitHub!