💡 Use with Reveal.js

This guide will demonstrate how you can embed a Gradio app into a Reveal.js presentation.

Minimal Example

Embedding Gradio Lite apps into Reveal.js presentations is extremely similar to embedding them into other HTML-based Quarto documents. The main difference is that the following Quarto options must be specified at the cell-level:

#| echo: true
#| output-location: slide

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

filters:
  - gradio
---

## Slide Title

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

```{python}
#| echo: true
#| output-location: slide
#| gr-theme: dark
import gradio as gr

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

Complex Example

Thanks to all the existing Quarto + Reveal.js features, the presentation can be customized to the n^th degree, as described in the Quarto Reveal.js documentation.