Skip to content

Community developed Quarto extension to enable interactive Python code cells in HTML documents using Pyodide

Notifications You must be signed in to change notification settings

coatless-quarto/pyodide

Repository files navigation

Pyodide Extension for Quarto HTML Documents

Important

Looking for the official Quarto WebAssembly backend? Check out quarto-live!

This community developed Quarto extension enables the Pyodide code cell within various Quarto formats, including HTML, RevealJS, Websites, Blogs, and Books.

quarto-pyodide Filter in Action

Check out the above example of the extension in action here!

Interested in an R version? Take a look at quarto-webr!

Note

Please note that the {quarto-pyodide} Quarto extension is a community-driven initiative and is not affiliated with Posit, Quarto, or the main Pyodide project. Its evolution and maintenance stem solely from the collective efforts of community members.

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

After the installation process is finished, the extension will be readily available for Quarto documents within the designated working directory. Please note that if you are working on projects located in different directories, you will need to repeat this installation step for each of those directories.

Usage

For each document, place the pyodide filter in the document's header:

filters:
  - pyodide

Then, place the Python code for Pyodide in a code block marked with {pyodide-python}

---
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!')
```

The rendered document can be viewed online here.

For help setting up other use cases, please see our Templates collection.

Help

To report a bug, please add an issue to the repository's bug tracker.

Want to contribute a feature? Please open an issue ticket to discuss the feature before sending a pull request.

Acknowledgements

Please see our acknowledgements page.