Use Reveal.js

Place an embedded Gradio app on a Quarto Reveal.js slide and verify it during presentation navigation.

Reveal.js is the HTML presentation framework used by Quarto’s revealjs output format. The gradio filter can place an embedded app or coding playground on a slide.

Create an app slide

Use format: revealjs, enable the filter, and keep Quarto-side Python execution disabled:

slides.qmd

---
format: 
  revealjs:
    theme: dark
    slide-number: true

filters:
  - gradio

execute:
  enabled: false

search: false
---

## Slide Title

Make sure to check the next slide, the live app is there!

::: {#e5d9f6f4 .cell output-location='slide' gr-theme='dark'}
``` {.python .cell-code}
import gradio as gr

gr.Interface(
    fn=lambda name: f"Hi {name}!",
    inputs="textbox",
    outputs="textbox",
    live=True,
).launch()
```
:::

The output-location: slide cell option puts the generated app output on a following slide. Navigate forward in the presentation and wait for the app to start.

Combine slides and a playground

The full example uses Reveal.js layout options and a coding playground:

Open the complete presentation to test keyboard navigation and the editor at full size.

Keep app source and controls within the slide viewport. A vertical playground layout usually gives the editor and preview more usable width. Test the presentation at the projector resolution and on any remote-control browser you plan to use.

See the Quarto Reveal.js reference for slide options and Build a Coding Playground for editor configuration.