Quickstart

Install quarto-gradio, render one app, and verify the result in a browser.

This quickstart creates one Quarto Markdown document and runs its Gradio app in the browser. You need Quarto 1.6 or newer, a directory for the document, and network access when the app first starts.

Install the extension

Run this command inside the directory that will contain your document:

quarto add peter-gy/quarto-gradio

Quarto copies the extension into _extensions/gradio. Commit that directory with your project so builds use the same extension source.

Create the document

Save this source as hello.qmd:

hello.qmd
---
title: Hello
filters:
  - gradio
execute:
  enabled: false
---

::: {#827e692a .cell}
``` {.python .cell-code}
import gradio as gr

def greet(name):
    return f"Hello {name}!"

demo = gr.Interface(
    fn=greet,
    inputs="textbox",
    outputs="textbox",
    live=True,
    flagging_mode="never",
)

demo.launch()
```
:::

The gradio entry enables the extension’s Lua filter. A Lua filter transforms Quarto’s internal document during rendering. execute.enabled: false tells Quarto to preserve the Python cell without running it in the local build environment.

The final .launch() call marks the end of the app source. The filter writes the accumulated Python into the HTML page for browser execution.

Preview the page

Run:

Terminal
quarto preview hello.qmd

Quarto opens a local preview and watches the source for changes. For a one-time build, run quarto render hello.qmd. The output is hello.html.

Wait for the embedded app to finish its initial download and startup. Enter a name. The output should update to Hello <name>!.

Code 
import gradio as gr

def greet(name):
    return f"Hello {name}!"

demo = gr.Interface(
    fn=greet,
    inputs="textbox",
    outputs="textbox",
    live=True,
    flagging_mode="never",
)

demo.launch()
import gradio as gr def greet(name): return f"Hello {name}!" demo = gr.Interface( fn=greet, inputs="textbox", outputs="textbox", live=True, flagging_mode="never", ) demo.launch()

Understand the boundary

The build and the app start at different times:

  1. Quarto runs the gradio filter and writes HTML.
  2. The browser loads @gradio/[email protected] from jsDelivr.
  3. Gradio Lite starts Pyodide, which runs Python through WebAssembly in a browser worker.
  4. The worker executes the source and Gradio mounts the app.

The source is visible to readers in the page. Keep credentials, private URLs, and other secrets out of it.

Gradio Lite is archived and frozen at version 5.45.0 in quarto-gradio. Check app APIs and packages in the browser even when they work in a newer local Gradio environment.

Continue

Read How it Works for app boundaries and browser startup. Then build a coding playground or install a Python package.