What is PyScript? And Why Should You Care?

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>

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 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>

Live Example: here

Thank you for reading 😊

Got any questions or additional? please leave a comment.

Blog

What is PyScript? And Why Should You Care?

Rahul Sharma

PyScript is currently in the alpha stage. It is not yet ready for use. You can find the source code on GitHub.

Live Example: here

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 YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot.

Join Our Newsletter. No Spam, Only the good stuff.

Related