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 HTML file.

<head>
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Python repl 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>
Enter fullscreen mode Exit fullscreen mode

Live Example: here


Thank you for reading 😊

Got any questions or additional? please leave a comment.


Must Read If you haven't
React best practices and patterns to reduce code
3 steps to create custom state management library with React and Context API
How to cancel Javascript API request with AbortController
13 Typescript Utility: A Cheat Sheet for Developer

More content at Dev.to.
Catch me on Github, Twitter, LinkedIn, Medium, and Stackblitz.
Logo

学AI,认准AI Studio!GPU算力,限时免费领,邀请好友解锁更多惊喜福利 >>>

更多推荐