Home

Python is finally in our Browser

Modern HTML/CSS/JavaScript are very powerful tools to create contents, introduce innovations and communicate in the world wide web. Today I want to introduce the new and alternative tool called PyScript that was developed by the Anaconda Engineers in 2022. Although it is still an early stage, this tool comprises of amazing features that will surprise you. Let's find it out!

What is PyScript?

PyScript is a front-end framework developed to integrate Python and web. As you all know, Python is a prgramming language that has a fascinating and easily understandable syntax being loved by a huge community. With increasing usage of Python in the field of machine learning and data science, we were however, not able to utilise Python in the browser. This amazing PyScript aims to bring all of the features of Python into the our browser. Hence, this framework allows users to create rich Python applications in the brower using HTML's interface and powered by Pyodide, WASM, and modern web technologies.

• Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
• Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
• Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
• Environment management: Allow users to define what packages and files to include for the page code to run
• Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
• Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

To fully utilise PyScript, we first need to import the JavaScript file into our HTML document. (You can import these two lines below!)

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

However, does this mean PyScript is running on JavaScript? Not really! It works by Pyodide and WebAssembly. Pyodide is a Python distribution for the browser and it is a port of CPython, which is an interpreter of Python but compiled to WebAssembly. Since WebAssembly is a binary code format, browsers could also understand as well. So Python is using WebAssembly to embed a CPython interpreter in the browser and this allows Python communicate with HTML.

#1st Method
  <py-script>
    print("Hello World")
  <py-script>

#2nd Method
  <py-script src="/python-file.py"><py-script>

Alternatively, we can directly load Python REPL (Read Eval Print Loop) into HTML!

<py-repl id="my-repl" auto-generate="true">
    print("Hello World")
</py-repl>

Examples

This is a Panel KMeans Clustering Demo that was embedded and coded by PyScript & Katana ML.
More examples are available and you find them at https://pyscript.net/examples/.

My Thoughts on PyScript

PyScript currently remains in an early stage of its development. As you can see from above, it took some time to load and seems like not the best choice for heavy computational processes. Despite the limitations, many of us, including myself have been waiting for this feature to be released and hope more features will be released in the near future. I strongly believe that all of us are currently appreciating this framework and sending gratitude towards the Anaconda Team. Now it possess humongous potential to bring changes in the front-end developer community as well as the machine learning / data science communities. Especially in academia, researchers can employ PyScript to display their ML projects using visualisation tools or output the results of their code. Thus, making AI and ML more powerful. Perhaps we could utilise this in the Web 3.0 framework in the future one day!

For more information and new updates please visit the official website of PyScript!