Quarto x Gradio Extension
A Quarto extension that embeds runnable Gradio UIs directly into documentation pages. Examples run in the browser via Pyodide, so readers can experiment without local setup or a backend.
The fundamental limitation of most technical and educational material is the gap between theory and practice. Static code snippets and screenshots can explain a concept, but they cannot truly demonstrate it, forcing a context switch that breaks the flow of learning. This is especially true when teaching complex mathematical concepts in data science, where understanding often remains abstract until a student can interact with the underlying algorithm.
This project explores a simple way to close that gap by embedding runnable interfaces directly into the documentation. Instead of only reading about a concept, a student can interact with an implementation on the same page. For example: a live demo of Huffman encoding embedded next to the explanation.
This is made possible by a pragmatic architectural choice: execute examples entirely in the reader’s browser. Using
Stack
While the problem is more important than the tools, the tech stack tells a story about the project's architecture and trade-offs. Here's what this project is built on:
Platforms & Runtimes
Executes example Gradio interfaces entirely in the browser via Pyodide, enabling serverless app demos within documentation pages
Implements a small client-side UX script that warns mobile users when Gradio Lite content is present and loads site analytics
Drives the Pandoc filter that detects Python cells and injects <gradio-lite> markup so examples render as live apps in the generated site
Runs Python code client-side so Gradio apps in the docs execute in the reader's browser without any backend
Frontend & Visualization
Builds the documentation website and applies the custom Lua filter to embed Gradio Lite apps directly within content pages
Renders interactive Gradio UIs in the browser using <gradio-lite> tags, turning example Python cells into live, serverless apps
Enables optional slide presentations that can include the same embedded, in-browser Gradio app experiences
Provides the site's visual foundation via the Darkly theme so embedded Gradio components match the site's styling
Powers interactive charts inside example Gradio interfaces to demonstrate rich, client-side visualizations
