Panel Convert

This guide shows you how to use the {panel-convert-python} filter with Quarto to create live and interactive documents.

With the {panel-convert-python} filter you can insert entire, templated Panel applications into your documents running directly in the browser powered by PyScript.

Note

Please note that a +40MB Python environment is loaded by the user for each application you insert with {panel-convert-python}.

Configuration

You will need to install and configure the holoviz-quarto extension as described in the Getting Started guide.

Examples

Panel

A Panel application converted to Pyodide and embedded in a Quarto doc

Panel Matplotlib

A Panel Matplotlib application embedded in a Quarto doc

Panel FastListTemplate

A Panel FastListTemplate application embedded in a Quarto doc

---
title: Panel Convert
format: html
filters:
  - holoviz/quarto
---

This guide shows you how to use the `{panel-convert-python}` filter with [Quarto](https://quarto.org/) to create live and interactive documents.

With the `{panel-convert-python}` filter you can insert entire, templated Panel applications into your documents running directly in the browser powered by PyScript.

::: {.callout-note}
Please note that a +40MB Python environment is loaded by the user for each application you insert with `{panel-convert-python}`.
:::

<img src="https://panel.holoviz.org/_static/logo_horizontal_light_theme.png" style="height: 50px;margin-right:10px"> <img src="https://pyscript.net/assets/images/pyscript-sticker-black.svg" style="height: 50px;margin-right:10px">

## Configuration

You will need to install and configure the `holoviz-quarto` extension as described in the [Getting Started](getting-started.qmd) guide.

## Examples

### Panel

A **Panel** application converted to Pyodide and embedded in a Quarto doc

```{panel-convert-python}
import panel as pn

pn.extension(design="material")

slider = pn.widgets.IntSlider(name="Select a value", value=10, start=0, end=100)
pn.Column(
    pn.rx("You selected: {}").format(slider),
).servable()
```

### Panel Matplotlib

A **Panel Matplotlib** application embedded in a Quarto doc

```{panel-convert-python}
import numpy as np
import panel as pn
import matplotlib.pyplot as plt

pn.extension(design="material")

def plot(factor):
  r = np.arange(0, 2, 0.01)
  theta = factor * np.pi * r
  fig, ax = plt.subplots(
    subplot_kw = {'projection': 'polar'} 
  )
  ax.plot(theta, r)
  ax.set_rticks([0.5, 1.2, 1.5, 2])
  ax.grid(True)
  plt.close(fig)
  return fig

slider = pn.widgets.FloatSlider(value=2, start=1, end=4, step=0.25,)
plot = pn.pane.Matplotlib(pn.rx(plot)(slider), tight=True, format="svg", height=400, sizing_mode="stretch_width")
pn.Column(
  slider, plot, sizing_mode="stretch_width"
).servable()
```

### Panel FastListTemplate

A **Panel FastListTemplate** application embedded in a Quarto doc

```{panel-convert-python}
import panel as pn

pn.extension()

slider = pn.widgets.IntSlider(name="Select a value", value=10, start=0, end=100)
component = pn.Column(
    pn.rx("You selected: {}").format(slider),
)
pn.template.FastListTemplate(
  title="Panel in Quarto", main=[component]
).servable()
```