PyScript - A Game Changer For Your Browser

Execute Python right in your Browser!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!--Load PyScript, Pyodide, Micropip and Python packages-->
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
  - pandas
</py-env>

<!-- Write your Python code! -->
<py-script>
import pandas as pd 
from pyodide.http import open_url

df = pd.read_csv(open_url("/downloads/iris.csv"))
df
</py-script>

Intro

Honestly, this is one of the coolest things I saw these days!

PyScript enables you to execute almost any Python code right in your browser!

Thinking about pandas? Yes, it does work beautifully! See the live example below.
Thinking about interactive dashboards? No problem at all!
ML pipelines? On-demand NLP? Infinite possibilities!

How?

They are way better explaining how it works but I try to sum it up.

In a nutshell PyScript calls itself a meta project linking already existing and powerful components like Pyodide in order to facilitate the whole process. At the very core, WebAssembly compiles the code to a binary that is executed in the browser.

PyScript adds really cool features such as “bi-directional communication between Python and Javascript objects and namespaces”! It’s hell for purists but heaven for hackers!

A simple Pandas example

There’s a good example page on their homepage with interactive dashboards, elevated graphics engines and much more.

However, I wanted to create my own “hello world” script specifically suited for most of my use cases involving heavy data wrangling with pandas.

Down here, I simply included the script from PyScript’s CDN:

- pandas

1
2
3
4
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
  - pandas
</py-env>

You already get the idea, everything you need such as Python wheels for your specific packages will be loaded via CDN but you could include them as static files of course.

So, believe it or not, but the below table comes right from pandas with as little as these lines!

1
2
3
4
5
6
7
8
9
<div>
  <py-script>
import pandas as pd 
from pyodide.http import open_url

df = pd.read_csv(open_url("/downloads/iris.csv"))
df
  </py-script>
</div>

import pandas as pd from pyodide.http import open_url

df = pd.read_csv(open_url("/downloads/iris.csv")) df

You can make use of all the functionalities and e.g. export your df to JSON format with

1
2
3
4
5
<div>
  <py-script>
df.to_json()
  </py-script>
</div>

df.to_json()

Just make sure to put the code in a div tag when plotting something, else it might swallow the rest of the HTML page (as was the case for this blog post).

Personal use case

In the past, I needed to write a script for a client wrangling some data. I could have done it in JS but it’s such a pain. Instead, I made use of Python and Pandas and simply compiled it to an executable as I described in an earlier post.

With PyScript, one could save time and directly write the interactive code in HTML running on all devices - beautiful!

Thoughts

As the examples are only thought for demo purposes I highly appreciate that they offer a way of loading everything via CDN, especially the package wheels. However - as you might have noticed - it takes a few seconds to load everything, compile and execute it.

A big part of that could be eliminated by compiling everything first and simply sending the compiled code to the browser. I will give it a try in the near future and take a look at the speed.

Concluding remarks

Personally, PyScript as well as WebAssembly opened a new world to me. I think it’s a big step towards facilitating data science for everyone and bringing sophisticated tools one step closer to the people without the overhead of complicated server setups.

Let me know if you created something cool with PyScript!

Contents