Run Python Directly in the Browser with PyScript: A Step‑by‑Step Guide
Learn how to embed and execute Python code within HTML using PyScript, covering its background, core features, basic visualization, and a complete Hello World example that displays the host’s IP address, while showcasing code snippets and practical use cases for web development.
21CTO导读：本文讲述将Python搬到网页里运行，希望对大家的实际工作有价值。
Background
In the rapidly evolving web development landscape, integrating different programming languages has become a hallmark of innovation. Python, known for its versatility and ease of use, has moved beyond its traditional domains into web development.
Imagine a scenario where Python’s powerful capabilities seamlessly merge with HTML’s dynamic features, enriching web projects with interactive functionality and dynamic content.
This article explores the concept of running Python code inside HTML, revealing its potential and the steps to achieve this collaboration. Whether you are an experienced developer looking to sharpen your skills or a newcomer curious about the possibilities, you can explore Python‑HTML integration and see how it can transform web application development.
PyScript
PyScript is a framework that allows developers to use an HTML interface together with Pyodide and WebAssembly, leveraging modern web technologies to create powerful Python applications that run directly in the browser.
PyScript was announced by Anaconda, the makers of the scientific‑computing Python distribution, at PyCon US 2022.
Basic Visualization of How PyScript Works
PyScript works by compiling Python code to WebAssembly, a low‑level language that can run in browsers.
This means PyScript code can execute directly in the browser without a server or a JavaScript interpreter.
PyScript offers many features that make it a powerful tool for creating web applications, including:
Full access to the Python standard library, including modules such as NumPy, Pandas, and SciPy, enabling complex, data‑intensive web apps.
Ease of learning and use; its syntax is very similar to regular Python and requires no complex build or deployment steps.
Compatibility with existing web technologies like HTML, CSS, and JavaScript, allowing PyScript apps to look and feel like any other web application.
PyScript Hello World
Let’s get started with a classic “Hello, World” example.
Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PyScript | Hello, World!</title>
</head>
<body>
</body>
</html>Link PyScript Files
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>Print “Hello World!” and Show IP Address
Hello, world! <br>
Hostname and IP Address:
<py-script>
import socket
hostname = socket.gethostname()
display(hostname)
ip_address = socket.gethostbyname(hostname)
display(ip_address)
</py-script>Explanation of the code:
Hello, world! <br> – Displays the text “Hello, world!” followed by a line break.
Hostname and IP Address: – Plain text indicating that the following output will show the host name and IP address.
<py-script> block: import socket – Imports the socket module for network operations. hostname = socket.gethostname() – Retrieves the current host’s name. display(hostname) – Shows the host name in the browser. ip_address = socket.gethostbyname(hostname) – Resolves the IP address associated with the host name. display(ip_address) – Displays the IP address.
When you run the HTML file, you will see a result similar to the image below.
PyScript is still under development, but it has the potential to fundamentally change how we create web applications.
It enables us to build rich, interactive web apps that run in any browser using Python.
Here are some example use cases for PyScript:
Creating data‑visualization apps with NumPy and Pandas.
Building machine‑learning models with scikit‑learn.
Developing interactive web mini‑games.
Creating custom web widgets and components.
Writing engaging educational content.
The possibilities are endless!
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.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
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.