Run Python Directly in Your Browser with PyScript: Quick Hands‑On Guide
This article introduces PyScript, a framework that lets you embed and run Python code inside standard HTML, walks through a simple Hello World example and a data‑visualization demo, and shares practical insights on its current capabilities and limitations.
Hello, I'm DD. Recently I've been focusing on Java features and IDEA tips, and I discovered a fascinating tool that lets you run Python code directly in HTML.
The framework, called PyScript , aims to enable developers to embed Python in standard HTML, call JavaScript libraries from Python, and build web applications using Python.
PyScript Quick Experience
The official example demonstrates the core steps. Below are two sample cases you can try.
First case: Hello World
Create an HTML file and paste the following code:
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
print('Hello, World!')
</py-script>
</body>
</html>Open the file in a browser to see the output.
The three essential parts are:
Include the PyScript stylesheet:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />Include the PyScript script file:
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>Write Python code inside the <py-script> tag.
Second case: Data definition + visualization
Create a data.py file with the following content:
import numpy as np
def make_x_and_y(n):
x = np.random.randn(n)
y = np.random.randn(n)
return x, yThen create an HTML file containing:
<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
- matplotlib
- paths:
- /data.py
</py-env>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-script output="plot">
import matplotlib.pyplot as plt
from data import make_x_and_y
x, y = make_x_and_y(n=1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>Key points for this example:
The <py-env> tag declares required packages and files (e.g., data.py).
The <py-script output="plot"> tag directs the generated plot to the <div id="plot"> element.
Conclusion
My takeaways from experimenting with PyScript:
The development experience is highly unified, lowering the barrier for Python developers to create web applications.
Performance can be lacking; complex examples run slowly, even after moving resources locally, indicating room for optimization.
Although still in alpha, PyScript shows great promise, especially for beginners who know Python but want to quickly build web apps.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Programmer DD
A tinkering programmer and author of "Spring Cloud Microservices in Action"
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.