PyScript

This guide shows you how to use PyScript with HoloViz and Quarto to create live and interactive documents.

Configuration

In order to use Panel with Pyscript you will need to run pn.extension(...) in a {python} code block as you would normally do.

import panel as pn

pn.extension("deckgl", design="material")

In addition you must also configure PyScript in a <script type="py" ...> tag

<script type="py" config='{"packages":["panel", "hvplot", "matplotlib"]}'>
import panel as pn

pn.extension("deckgl")
</script>

Examples

Basic

A Panel PyScript application embedded in a Quarto doc

Matplotlib

A Panel Matplotlib PyScript application embedded in a Quarto doc

hvPlot

A Panel hvPlot PyScript application embedded in a Quarto doc

Deck.gl

Editor

I would really like to include an example of using the PyScript py-editor. But currently I don’t know how to get it working. See PyScript #1907.

<script type="py-editor">
import panel as pn

pn.extension()

slider = pn.widgets.IntSlider(name="Select a value", value=10, start=0, end=100)
pn.Column(
    pn.rx("You selected: {}").format(slider),
).servable(target="editor")
</script>
<div id="editor" class="loading pn-container"></div>

There are other py-editor improvements I would really like.

Back to top