Panel in PyScript Example

Panel
1

If you have not noticed you can now actually run Panel apps entirely in the browser using PyScript. I.e. you don’t need to deploy to a server. You can just email your Panel app as a file, put it on Github pages or similar.

The below is a simple example. You can find the official examples at PyScript demo.

<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.1/dist/panel.min.js"></script>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <style>
        table { width: 500px;}
        h1 {font-size: 30px}
      </style>
    </head>
    <py-env>
      - bokeh
      - numpy
      - panel==0.13.1
    </py-env>
    <body>
      <div id="simple_app"></div>
      <py-script>
        import panel as pn
        import calendar

        pn.extension(sizing_mode="stretch_width")
  
        month = pn.widgets.IntSlider(start=1, end=12, name='Month')
  
        def callback(new):
            c=calendar.HTMLCalendar(calendar.SUNDAY)
            return c.formatmonth(2022,new)
  
        pn.Column(
            "# Panel PyScript Calendar Example", 
            month, 
            pn.bind(callback, month),
        ).servable(target='simple_app');
        
      </py-script>
  </body>
  </html>
7 Likes
2

Looks awesome!
do you know what the limitations are as of now / bottlenecks?

e.g. can we bring tabulator with pandas or perspective widget as seamlessly?

Anton.

1 Like
3

The Panel things I’ve tried seems to work.

I think the bottlenecks are more on the PyScript/ Pyodide side

  • Slow to load
  • More difficult to load data. For example must use pd.read_csv(pyodide.open_url(....)).
  • Development cycle slower because pyscript cannot autoreload fast and because error messages not so mature.
4

The Panel Kmeans example is one of the official PyScript examples and uses the Tabulator widget :wink:

PyScript is a very recent project and far from maturity, and I’d say and so is the whole story of Python in the browser, which is why things like loading data as mentioned by Marc are not yet super smooth. Is this going to improve? I’d bet so!

3 Likes