Python in web browser directly from HTML!!!! | by Anuj Karn | Jul 2022

Photo by Richy Great on Unsplash

If you are a data scientist or a developer who mainly likes to use Python like me? Some of my ideas don’t leave the kitchen because Javascript is involved in the construction. Would it be nice if we could write websites in Python? Amazingly, at PyCon US 2022, Anaconda CEO Peter Wang announced a brilliant new technology called PyScript which allows users to write Python directly in the browser!!!.

Since JavaScript is the primary programming language for running a web browser and an interactive web page, Python is generally used for data science, machine learning, and artificial intelligence.

Even though we have back-end frameworks like Django and Flask, or static site builders like Jekyll, Python is usually behind JavaScript for web development.

PyScript is an experimental but promising new technology that makes the Python runtime available as a scripting language in WebAssembly-enabled browsers.

Developed by Anaconda, PyScript is, as Peter mentioned in his talk,

A system for interweaving Python into HTML (like PHP).

This means you can write and run Python code in HTML, call JavaScript libraries in PyScript, and do all your web development in Python.

According to PyScript.net:

“PyScript is a framework that allows users to create rich Python applications in the browser using the HTML interface and the power of Pyodide, WASM and modern web technologies. The PyScript framework offers users of all levels of experience access to an expressive, easy-to-learn programming language with countless apps.

PyScript consists of a single JavaScript inclusion that you can add to a web page. This includes the basic PyScript runtime payloads and automatically adds support for custom tags used in PyScript.

Here is a simple example of a “hello, world” project in PyScript:




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

output="out">
print("Hello world")

id="out">

The script The tag is used to load PyScript functionality. The pyscript.css the stylesheet adds Python runtime environment loading, initializing during page load time.

Python code must be included in py-script label. The code should be formatted according to Python’s conventions for indentation.

We can import libraries using py-env tag identical to our requirements.txt.

It may look like this


- matplotlib
- numpy

If you are a Jupyter Notebook fan, you can also use py-repl tag to display the live coding environment in the browser for Python. It is mainly used for mathematics and statistics.

py-repl generates an input field on a webpage that works like a very basic version of a Jupyter Notebook environment. Here is an example of the repl tag in action:


lang="en">

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

pyscript REPL


Tip: press Shift-ENTER to evaluate a cell



id="my-repl" auto-generate="true">


The output to the browser is:

By now I assume you have a good idea of ​​what PyScript is, how it works, and what it has to offer. As it is still in alpha phase, it shows promising results.

PyScript is undoubtedly an exciting new technology that allows you to run Python code in the web browser.

What is you think of PyScript? Will it really replace JavaScript in the browser? Will you try it in your next project?

Watch the demo here:

Contact me on LinkedIn: https://www.linkedin.com/in/anuj-karn

Please comment your views on this.

Comments are closed.