PyScript Beta lets you run Python in the browser
PyScript is a framework, built with Pyodide, allowing you to run Python code in a browser. It is still in its infancy, but the development team recently released a beta version.
Using the tool, developers can write Python directly in HTML, without the need for a server backend like Flask or Django.
Although still in beta, PyScript already comes with some awesome features that are worth trying out.
1. Easy to configure
Getting started with PyScript is as simple as linking to its CDN in your HTML header. You can also download its source code and host the project files on your own site. While the latter option has a few small advantages, linking to the CDN is easier.
To start using PyScript, you can include its JavaScript and CSS files as follows:
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
2. Write Python directly in HTML
Your Python code is in a custom file py script tag in the body of a document. The JavaScript PyScript file will then interpret its contents using Python. You can specify an HTML element, such as a div, for PyScript to write the output to.
Here is an example layout:
<body>
<div id="python-container"></div>
<py-script output="python-container">
print("Hello world")
</py-script>
</body>
Remember that indentation is important in your Python code. You will need to be careful to indent correctly to avoid a Python IndentationError.
3. Import and isolate standard Python modules
Another unique feature of PyScript is that it allows you to separate dependencies from the whole. This means that you will list a dependency in your HTML header before you can import it. All dependencies are inside a py-env tag in HTML header section:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- pandas
- openpyxl
- matplotlib
</py-env>
</head>
<body>
<py-script>
import pandas
</py-script>
</body>
</html>
4. Import and use your own local modules and files
You don’t need to write all your Python code directly in your HTML files when using PyScript. You can write custom Python functions or modules in separate files, list them in the py-env tag and import them. This makes it easier to write cleaner, more readable code.
However, you will need to point the py-env tag to your local module paths. Similarly, you will list all the local files that you want to use in your Python code. For example, if you are reading an Excel file with Pandas, you will need to specify its path:
<py-env>
- numpy
- paths:
- /main.py
- /path_to_excel_file.xlsx
</py-env>5. Render visualizations directly in the DOM
Sharing visualizations and dashboards can be tricky. PyScript lets you view your Python storyboards and visualizations directly in the browser without using server-based solutions. You can even write an Excel sheet in the DOM in HTML format.
For example, with the required dependencies in a Python virtual environment, you can plot data from an Excel file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
- matplotlib
- paths:
- /path_to_excel_file.xlsx
</py-env>
</head>
<body>
<div id="python-container"></div>
<py-script output="python-container">
import pandas as pd
import matplotlib.pyplot as plt
df = pd.read_excel("excel_file_name.xlsx")
x = df["Months"]
y = df["growth_rate"]
fig, ax = plt.subplots()
ax.plot(x, y)
fig
</py-script>
</body>
</html>
You can find more information about PyScript via its README on Github or on the official PyScript website.
PyScript gives Python a boost
One of Python’s shortcomings is its inability to work directly in the DOM. And that’s one of the reasons why JavaScript stays ahead of the game in web development. The introduction of PyScript might change that if it can reach the level of functionality of JavaScript. Nevertheless, PyScript is a handy tool, as it will help you easily host and share your Python projects. However, keep in mind that some functionality may break down, as PyScript is still an experimental framework.
Read more
About the Author