Making your first Pyodide-powered Quarto document

Installation

To use this extension in a Quarto project, install it from within the project’s working directory by typing into Terminal:

quarto add coatless-quarto/pyodide

Note

Quarto extensions are project-specific installations and are not stored in a global library. This means that for every new Quarto project or directory where you create a Quarto Document, you’ll need to install the extension again.

Usage

Once the extension is successfully installed, you can begin utilizing it in your Quarto documents located within the same working directory as the _extensions folder. To activate the Pyodide functionality in those documents, follow these steps:

1. Add pyodide Filter: In the header of your Quarto document, add the pyodide filter to the list of filters:

filters:
  - pyodide

2. Use {pyodide-python} Code Blocks: Write your Python code within code blocks marked with {pyodide-python}. Here’s an example:

---
title: Pyodide in Quarto HTML Documents
format: html
filters:
  - pyodide
---

This is a Pyodide-enabled code cell in a Quarto HTML document.

```{pyodide-python}
n = 5
while n > 0:
  print(n)
  n = n - 1

print('Blastoff!')
```

3. Render Your Document: You can now render your Quarto document by clicking on the Preview button in the upper right side of the markdown editor window (or use the keyboard shortcut ⇧⌘K on macOS or Ctrl+Shift+K on Windows/Linux). The document will execute under engine: jupyter by default, but you can specify a different engine like knitr if needed.

Note

If an engine is not specified, Quarto will attempt to use the jupyter compute engine by default. This may cause an error if jupyter is not installed on your computer.

4. Explore interactivity: Try out the rendered code cell by pressing the “Run Code” button or using a keyboard shortcut of Shift + ↩︎.

Fin

In summary, this guide has provided an overview of how to incorporate the quarto-pyodide extension into your Quarto HTML documents using VS Code. We explored key workflow changes necessary for incorporating interactive Python code into your Quarto HTML documents, from installation to document rendering.

For your next steps consider looking at different use cases for interactive options.

Important

This Quarto extension is open source software and is not affiliated with Posit, Quarto, or Pyodide. The extension is at best a community effort to simplify the integration of Pyodide inside of Quarto generated documents.