OLV Basiliek Zwolle

Main Menu

  • Home
  • Browser list
  • Browser software
  • Browser types
  • Browser news

OLV Basiliek Zwolle

Header Banner

OLV Basiliek Zwolle

  • Home
  • Browser list
  • Browser software
  • Browser types
  • Browser news
Browser list
Home›Browser list›PyScript Beta lets you run Python in the browser

PyScript Beta lets you run Python in the browser

By Ronnie A. Huntsman
May 12, 2022
0
0

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>

USE VIDEO OF THE DAY

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.


Woman holding a book titled Python

What to expect in the next version of Python 3.11

Read more


About the Author

Idowu Omisola
(147 articles published)

Idowu is passionate about all things smart technology and productivity. In his spare time, he plays with coding and switches to the chessboard when he’s bored, but he also likes to break the routine once in a while. His passion for showing people the way to modern technology motivates him to write more.

More from Idowu Omisola

Subscribe to our newsletter

Join our newsletter for tech tips, reviews, free ebooks and exclusive offers!

Click here to subscribe

Categories

  • Browser list
  • Browser news
  • Browser software
  • Browser types

Recent Posts

  • Best Browser-Based Image Editors of May 2022
  • DuckDuckGo Privacy Browser app does not block Microsoft trackers
  • Best Maps and Navigation Extension for Chrome Browser of 2022 May
  • Best Sports Extension for Chrome Browser of May 2022
  • DuckDuckGo’s supposedly private browser caught allowing ad tracking

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • Privacy Policy
  • Terms and Conditions