Run python in HTML : <pyscript>
Tags: python, webdev, html, programming
Published: 2023-01-18 05:54:56

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.


<hr />

### Get Started

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

```html
<!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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr1tpaivsmanvhapdsfr.png)

<hr />

### 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](https://pyscript.net/examples/).
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wksuzuigik9lb3dow3ve.png)


![Pyscript Charts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xis66sshqjwtgv8jw4cd.png)

<hr />

### 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.

<hr />
### 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! 🫡