Run Python in HTML

Python was the foundation of my technical career. I gained my Python skills and worked on many AI/ML projects. But when I have to show the output, I cannot run the python file for each stakeholder. There were some limitations. It needs to be contained within a product, which can be portrayed on some kind of website or mobile app.

Then, I had no idea how to build a bridge to connect these. Later, I learn about APIs (in Django/Flask) that can link my machine learning API with a web application so that users may use my API in a real sense.

But that approach seems to be lengthy as well as costly (you need to host the Python API on a cloud server).

But thanks to PYSCRIPT... 🙌

The pyscript team had brought a revolution in cross-platform connection technology.

With the help of Pyscript, you can run Python in HTML. Just you need to import a JS script via CDN. And that's it. You are ready to rock.

Get Started

The process to set up and run pyscript is very simple. Create an index.html file and paste the below code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Python in HTML : Pyscript</title>
        <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    </head>
    <body>
        <h1>Python in HTML : Pyscript</h1>
        <py-script>
            print("This hello world is written in Python and rendered in HTML using Python's print()")
        </py-script>
        <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    </body>
</html>

In the above code snippet you can see that, apart from the basic HTML boilerplate, we have added CSS and JS script of pyscript. And a special tag is provided by Pyscript. In which you can run Python commands.
When you will open the index.html file in the browser, you can see something similar to this:

Pyscript in HTML

Pre-cooked examples

Pyscript has the ability to leverage HTML benefits along with the power of Python. So you can dig deep via Pyscript Example.
Above website contains almost every segment of Pyscript from bottom to top. Starting from basic print functions to using Matplotlib and Numpy for Data Visualization.
You check each example available on the above-mentioned link. (TIP: Run Ctrl+U or Right click -> View Page Source to check the HTML and pyscript code used in the respective example). Here are some snaps of a couple of demo examples.

Data visualization

Pyscript Charts

How extensible is Pyscript?

When Pyscript was launched, initially they have limited functionalities of Python integrated. Like REPL (Read, Eval, Print, Loop) and like that.
But today, the horizon of Pyscript is way too big. You can use many Python libraries like Time, Numpy, Matplotlib, and many others.
One of the most fascinating features which I like is you can Import external python files. It is just like importing a normal JS file in HTML and using the interwoven function of that.
Similarly, you can also write complex python logic, ML APIs, and much more in a separate file. Import them in HTML, and leverage the benefit of Python via HTML.

Closing comments 🙋‍♂️

Thank you for reading along with me. If you find any queries on the topic mentioned above, please ping me in the comments. 💬
Knowledge spreads by sharing. So please share this article with your concerned friends. 📱
PS: Also, I humbly request you to write which topic you want in my next blog. I will include that in my target list. 🎯

Tirth Patel, signing off! 🫡

pyscript: Run python in HTML

Table of contents

Get Started

Pre-cooked examples

How extensible is Pyscript?

Closing comments 🙋‍♂️

Subscribe to my newsletter

Tirth Patel

Tirth Patel