PyScript: Way to run Python script in web/browser

Do you want to run python code in the browser? In other words, do you want to execute your python algorithm or model using web-framework?

Yes, PyScript is a new framework that's integrate with your browser code(i-e HTML) and allows the user to run your python code.

Image created by Own, Icon used from Google

The question “How to run python script in webpage” already asked 10 years back on StackOverflow by Haren Sarma where he tries to ran the python script on the browser. But unfortunately, python didn’t support at that time.

Stackoverflow Question: How to run python script in webpage

What is PyScript?

PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface. PyScript aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn.

Image take from https://pyscript.net/

Vision of the Contributors

PyScript is a meta project that aims to combine multiple open technologies to create a framework for users to use Python (and other languages) to create sophisticated applications in the browser. It highly integrates with the way the DOM works in the browser and allows users to add logic, in Python, in a way that feels natural to web as well as Python developers.

The initial release of the PyScript is found on the GitHub https://github.com/pyscript/pyscript

Install or Download

The installation/download option can be found on the official site, https://pyscript.net/. But you don’t worry about the installation or download the PyScript. You may skip this as well and follow from the below step.

How to use PyScript?

To try PyScript, import the pyscript to your HTML page with the following script and link tags:

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

If you are interested in reading how it works on the browser and where PyScript components stands on the browser, read the two official documentation from the Anaconda about the architectural overview:

1. https://www.anaconda.com/blog/pyscript-python-in-the-browser
2. https://anaconda.cloud/pyscript-python-in-the-browser

Getting started

I create a HTML file with name ‘testing-python.html’ and the skeleton of the page looks like,

Components of PyScript

At that point, you can then use PyScript components in your HTML page. PyScript currently implements the following elements:

• <py-script>: that can be used to define python code that is executable within the web page. The element itself is not rendered to the page and only used to add logic
• <py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write code that can be executed

Let’s take a look one by one with example,

<py-script>

• Using inline style — means the python code itself written inside the py-script tag. You can use all the data structure and external python libraries inside the py-script tag, but make sure you take care the indentation of the python code.

The above code display the hello message along with the for-loop iteration from 1 to 9 as shown in figure-2.

Figure-2: Output of the inline style example

• Using external style — means the python code in written in another file with the .py extension and linked with the py-script tag. Create a new file and save the below code with ‘testing.py’.

Use source reference inside the py-script tag of the testing.py file as,

The output is same as above figure-2.

<py-repl>

If you are using the empty tags like <py-repl></py-repl>, it will create a single line editor similar to a text box where you can write the code and execute it on your browser as shown in figure-3.

Figure-3: Editor to execute the code

Now you can write some code in the editor and run it through the green button. It will show you the output of your python code as illustrate in below figure-4.

Figure-4: Output of python code

You can write any logic and data structure supported by python, and it gives the output same as IDE. Here I check with list data structure as shown in figure-5,

Figure-5: Output of list DS

To conclude!

Align with the vision of the contributors of PyScript mention above, the PyScript helps the data scientist to execute their algorithms and model on the browser with a very little knowledge of the HTML. You don’t need to worry about the front-end framework. Just run your python scripts/code inside the <py-script> tag. From my perspective, it also reduces the one-step effort. Before that, the developers have to create the Restful web service or API using Django or Flask framework and put all the logic inside the HTTP’s method and then call these endpoints of the API on frontend to get the result. Now, without implementing the endpoints of the API, you can run your python code in the browser easily.

Similar to the JavaScript (which is programming language of the Web technologies), I think Python is also a future for the Web.

This is an open-source project and if you are interested, you can play your role by contributing in PyScript repository and can be found at https://github.com/pyscript/pyscript.

Reference: https://www.anaconda.com/blog/pyscript-python-in-the-browser

Thank you!