Run Python in browser: PyScript how to?

3 min readMay 9, 2022

Now you can! A quick step guide on how to run python in browser alongside HTML.

What is PyScript?

Developed by the team from Anaconda, it is a framework for interleaving Python in HTML (like PHP). This means you can execute python code in browser, just like you used to do javascript code in <script> tags, for python you can do it under <py-script> tags.

Features of PyScript:

write and run Python code in HTML
call Javascript libraries in PyScript
you can define the Python packages needed to run your Python code <py-env
Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more) in browser

Under the hood:

PyScript is built on Pyodide, which is a “port of CPython to WebAssembly/Emscripten.” PyScript supports writing and running Python code in a browser, and it will provide support for other languages in the future.

WebAssembly is the technology that makes it possible to write code in browsers in other languages. It uses a human readable .wat text format language, which then gets converted to a binary .wasm format that browsers can run.

Lets’s try it

PyScript it currently in the alpha stage, but we can test some of the options it provide to run python in browser.

Hello world example

You just have to add the following lines to your page

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

As we can see, Python code is embedded in the <py-script> block. Opening the file in the browser will give this output.

<py-script> tag

The <py-script> tag let's you execute multi-line Python scripts and print back onto the page or onto a labeled html elements

in the below example we will use python’s datetime module to calculate current date and then write it to today labeled <label> element of html.

and here is the output:

write and run Python code in HTML

using python packages and modules

you will need to declare the dependencies using the <py-env> in the HTML head. You can also link to .whl files directly on disk.

<py-env>
- './static/wheels/travertino-0.1.3-py3-none-any.whl'
</py-env>or<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

Note: we can only use the packages listed here

Summary

PyScript allows you to write python in browser alongside HTML
PyScript allows you to use python packages directly in page using py-env tag
the project is still in the alpha stage, but we will see more features coming & more modules will be supported under Pyodide.

Thanks for reading. I am curious to hear about your thoughts about this new tech! How do you see it, comparing with javascript?

Liked this article? Please clap and Subscribe