DEV Community

Cover image for Run python in HTML : <pyscript>
Tirth Patel
Tirth Patel

Posted on

Run python in HTML : <pyscript>

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>

Enter fullscreen mode Exit fullscreen mode
  • 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 the Import of 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! 🫡

Top comments (0)