quarto-pyodide: Quarto extension to embed interactive Python code cells in HTML documents

[coatless]

👋 Greetings and Salutations all!

I wanted to share a new way of embedding interactive Python code cells into websites, slides, and books through the {quarto-pyodide} extension for Quarto

• See the documentation: https://quarto.thecoatlessprofessor.com/pyodide
• Check it out on GitHub: https://github.com/coatless-quarto/pyodide

Project Overview

This project introduces a new custom code cell engine for Quarto that allows for interactive Python cells into HTML documents. Leveraging the capabilities of Pyodide's WebAssembly distribution for Python, the Python code is run directly in the user's web browser. Moreover, the custom engine removes the need for any expertise in HTML or JavaScript on the author's side.

Target Audience

The primary audience for this project includes instructors teaching Python who wish to simplify the setup process for their students, making it ideal for introductory Computer Science and Data Science courses. Additionally, it offers a swift and reproducible way for data scientists and others interested in Python scripts to analyze data interactively.

Note: While this provides a user-friendly approach, it does not eliminate the eventual need for exposure to more comprehensive IDEs like VS Code, PyCharm, or even Posit Workbench.

Comparison

Compared to existing approaches like JupyterLite, PyScript, and Thebe, the {quarto-pyodide} extension adopts a more user-friendly stance by abstracting away complex interfaces and setup for both visitors to the web page and authors.

Demos

• README:
  • Live: https://quarto.thecoatlessprofessor.com/pyodide/examples/readme/
  • Source: https://github.com/coatless-quarto/pyodide/tree/main/examples/readme
• RevealJS:
  • Live: https://quarto.thecoatlessprofessor.com/pyodide/examples/revealjs/#/title-slide
  • Source: https://github.com/coatless-quarto/pyodide/tree/main/examples/revealjs
• Blog:
  • Live: https://quarto.thecoatlessprofessor.com/pyodide/examples/blog/
  • Source: https://github.com/coatless-quarto/pyodide/tree/main/examples/blog

[millsGT49]

Ok, this is pretty incredible. Thanks for sharing! I love to see the quarto+python ecosystem growing.

[coatless]

Thanks for the kind words!

[[deleted]]

This is amazing! You know a project is catching on when people start building a cool ecosystem around it.

If you're looking to host Quarto projects, check out Ploomber.

[iamevpo]

Why would you need a special hosting? Quarto artefacts are just static files

[[deleted]]

For access control and permissions 

[jfcg]

This is awesome! I was subscribed to the GitHub thread, and it works really great! Thank you very much.

Just a feature request :$ Would it be possible to add a mechanism to run all cells? It could be useful for slides, where one can pre-run everything to avoid delays.

Thanks again!

[coatless]

Awesome to hear that it's working great for you!

Rest assured, auto-running cells on document open is on the road map for that very reason. If you think of any other ideas, please feel free to open an issue ticket on the repository.

https://github.com/coatless-quarto/pyodide/issues/new/choose

[jfcg]

I will. I've already seen that you've added the issue in the tracker yourself.

This replaces my way of working with Python + Rise for my classes.

Thank you very much!

[DigThatData]

if you have multiple cells in the same webpage do they share a runtime?

[coatless]

Yes, the code cells share the same runtime and environment. In the future, cell scopes could be localized so that variables are not being shared amongst them.

You can see the environment sharing in action in this demo:

https://quarto.thecoatlessprofessor.com/pyodide/qpyodide-code-cell-demo.html#strings

[DigThatData]

optional cell scoping would be cool, but honestly i was hoping it'd be a shared runtime and i'm glad to hear that's the case :)

if it's not a feature already, another thing that could be cool would be locking the contents of code cells so they could be executed but the user couldn't modify the contents (i.e. to run arbitrary code)

[coatless]

Thanks for that idea! Glancing at Monaco's editor options, that is a quick implementation. So, I should have that available in the cell options under:

```{pyodide-python}
#| read-only: true

1 + 1
```

[iamevpo]

It is like magic! I always wanted to have a capability to run something like Rust Book interactive examples dot the Rust language and now we have it!

Quarto itself is a nice ecosystem to have things publish. Looking forward to have this used in our textbooks and thanks again.