PyScript is a python script that can be run in the browser using a mix of Python and standard HTML. This could be a powerful tool for creating web applications.
How does it work?
PyScript is dependent on Pyodide. So it is a Python distribution (port of CPython) for the browser and Node.js based on WebAssembly.
WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web.
You can check more about WebAssembly here.
The key things to know about PyScript are:
- Python in the browser: Enable drop-in content, external file hosting (made possible by the Pyodide project, thank you!), and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
PyScript is currently in the alpha stage. It is not yet ready for use. You can find the source code on GitHub.
Let's get started with simple examples.
First, you have to add py-script dependency in the HTML file.
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
Now you can use PyScript in your HTML file. PyScript currently implements the following elements:
<py-script>: The main PyScript element. Here you can add your python code that is executable within the web page. The element itself is not rendered to the page.<py-repl>: This is a REPL that can be used to interactively run python code.
Python Hello There example:
<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, Friends!') </py-script>
<py-script> print( 1 + 1 ) </py-script>
</body>
</html>
Python real example:
<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-repl id="my-repl" auto-generate="true"> </py-repl>
</body>
</html>
