Shinylive Quarto Extension

1 Installation

pip install shinylive --upgrade

# cd into quarto project folder
quarto add quarto-ext/shinylive
# add the following in `_quarto.yml` header
filters:
    - shinylive

2 Interactive Shiny App

  • #| standalone: true: the code represents a complete Shiny application, as opposed to one which has parts spread throughout the document (which will be supported in the future).

  • #| components: [editor, viewer]: show code editor and viewer side-by-side.

  • #| layout: vertical: stacking editor and viewer

  • :::{.column-screen-inset}: the app will take up the whole window width.

Ref:

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]

from shiny import App, render, ui
import numpy as np
import matplotlib.pyplot as plt

app_ui = ui.page_fluid(
    ui.layout_sidebar(
        ui.sidebar(
            ui.input_slider("period", "Period", 0.5, 4, 1, step=0.5),
            ui.input_slider("amplitude", "Amplitude", 0, 2, 1, step=0.25),
            ui.input_slider("shift", "Phase shift", 0, 2, 0, step=0.1),
        ),
        ui.output_plot("plot"),
    ),
)


def server(input, output, session):
    @output
    @render.plot(alt="Sine wave")
    def plot():
        t = np.arange(0.0, 4.0, 0.01)
        s = input.amplitude() * np.sin(
            2 * np.pi / input.period() * (t - input.shift() / 2)
        )
        fig, ax = plt.subplots()
        ax.set_ylim([-2, 2])
        ax.plot(t, s)
        ax.grid()


app = App(app_ui, server)
Back to top