pyscriptjs/examples/panel.html

<html>
  <head>
    <title>Panel Example</title>
    <meta charset="iso-8859-1">
    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.10/dist/panel.min.js"></script>
    <link rel="stylesheet" href="../build/pyscript.css" />
    <script defer src="../build/pyscript.js"></script>
  </head>
  <body>
    <py-env>
      - bokeh
      - numpy
      - panel==0.13.1a2
    </py-env>
    <h1>Panel Example</h1>
    <div id="myplot"></div>
    <py-script>
import asyncio
import panel as pn

slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')

def callback(new):
    return f'Amplitude is: {new}'

row = pn.Row(slider, pn.bind(callback, slider))

await pn.io.pyodide.show(row, 'myplot')
    </py-script>
</body>
</html>