How to add notebook cells to Quarto projects

TIL how to add notebook cells to Quarto projects such as the following two dependent cells:

• In the first notebook cell, we import the required packages and define \(x\) and \(y\):

• In the second notebook cell, we plot \(y\) vs \(x\) (and add a zoom to the beginning of the plot):

Notice that you can change the code inside the cells and run them again! Try it!

Instructions

1. Install uv (if you haven’t yet):

Terminal

curl -LsSf https://astral.sh/uv/install.sh | sh

2. Create a Quarto project (if you haven’t yet):

Terminal

uvx --from quarto-cli quarto create project

Here are some example configuration options:

3. Enter into the project folder and add the {quarto-pyodide} extension:

Terminal

uvx --from quarto-cli quarto add coatless-quarto/pyodide

4. Edit the index.qmd file (this is an example):

index.qmd

---
title: "test-quarto-pyodide"
filters:
  - pyodide
---
```{pyodide-python}
import numpy as np
import matplotlib.pyplot as plt

step = .1
x = np.arange(0,10+step,step)
y = x**2
```

```{pyodide-python}
fig, ax = plt.subplots(figsize=[6, 4])
ax.plot(x,y)
axins = ax.inset_axes([0.1, 0.5, 0.4, 0.4])
axins.plot(x[:10],y[:10])
ax.indicate_inset_zoom(axins)
plt.show()
```

(Optional) Change the Pyodide version in the file _extensions/coatless-quarto/pyodide/qpyodide.lua (the latest version with Python 3.12 is version 0.27.7):

The Python version can be obtained in a notebook cell (for example, run the notebook cell below):

5. Preview the project:

Terminal

uvx --from quarto-cli quarto preview

6. Deploy it (for example to GitHub pages), the command is the following:

Terminal

uvx --from quarto-cli quarto publish

Conclusions

If you have read my previous post, you know I am very excited that we can now embed a single executable cell inside a website. You can also embed a whole notebook inside a website. In another post, I explained how to add marimo notebook cells to a Quarto project. However, I love the idea of adding many dependent executable cells to a website such as with this Quarto extension.