How to connect Python to HTML

Question

If you are a python developer, and thinking that how cool if I can write my python code directly into HTML as all the Javascript developers do. Well, there is good news for all the Python developers. Here is the step by step tutorial for how to run python in HTML using PyScript.

Table of Contents Show

Important things about Pyscript
1. Let’s Create our first program with Pyscript
2. Print Current Date Time
3. Bokeh Chart with Pyscript

In a keynote speech at PyCon US 2022, Anaconda company’s CEO Peter Wang revealed a new project named PyScript. Which is a javascript framework. It allows us to create Python applications in web browsers. It will allow us to embed Python code directly into HTML files. Just like we use Javascript code in our HTML files.

Contents

Important things about Pyscript

It allows us to write python code into our HTML file. So we can use Python’s libraries within our browser.
As we use Pyscript, we don’t need to worry about deployments. Everything happens in a web browser. We can share our HTML files with anyone containing fancy dashboards or any chars data. They can directly run it in a web browser without any complex setup.
Run Many popular libraries of Python like pandas, numpy etc.
Pyscript allows us to write python code with the help of 3 main components:
1. Py-env: It defines the python packages list which needs to run your code.
2. Py-script: In this tag, the user will write their python code.
3. Py-repl: It will Create a REPL component. The REPL component executes the code user enters and displays the result of the code in the browser.

1. Let’s Create our first program with Pyscript

You can download the alpha release of PyScript on pyscript.net. We’ll use the CDN of one stylesheet and one script in our HTML file. Add below CDNs to your HTML <head>.

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

Our Hello world program will look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   <title>Python HTML app Hello World</title>
</head>
<body>
   <py-script>  
   print("Hello World!")
   </py-script>
</body>
</html>

When you run this HTML file into your browser, it will print Hello World. Something like this:

2. Print Current Date Time

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   <title>Python HTML app</title>
</head>
<body>
   <py-script>
   from datetime import datetime
  
   print(f"It's now {datetime.now()}")
   </py-script>
</body>
</html>

In the above example, we are using python’s DateTime library for current DateTime.

3. Bokeh Chart with Pyscript

Let’s create a chart to display the number of fruits sells during a month.

<!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">
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
   <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
   <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
   <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
   <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
   <title>Chart Example</title>
   <py-env>
   - bokeh
   </py-env>
</head>
<body>
<h1>Bokeh Chart in PyScript</h1>
   <div id="chart"></div>
 
   <py-script>
       import json
       import pyodide
       from js import Bokeh, console, JSON
       from bokeh.embed import json_item
       from bokeh.plotting import figure
       from bokeh.resources import CDN
 
       fruits = ['Apples', 'Banana', 'Mango', 'Grapes', 'Strawberries']
       counts = [5, 3, 4, 4, 6]
       p = figure(x_range=fruits, height=350, title="Fruit Counts", toolbar_location=None, tools="")
       p.vbar(x=fruits, top=counts, width=0.9)
       p.xgrid.grid_line_color = None
       p.y_range.start = 0
       p_json = json.dumps(json_item(p, "chart"))
       Bokeh.embed.embed_item(JSON.parse(p_json))
   </py-script>
</body>
</html>

When you run this code, you will see a chart like;

As you see how easily we can create a graph into our HTML file only. There is no need to create complex components to display a chart like this. That’s how simply you can use Pyscript to run python in HTML.

Conclusion

This project is still in the alpha stage, so maybe we can see many more new things in the upcoming days. Pyscript looks very promising for python developers, but there might be a lot of security issues. Also, we are running Python libraries into the browser, so execution time is also high.

All these concerns might be resolved in upcoming releases. Comment down your thoughts about this new technology.