What is PyScript? And Why Should You Care?
Tags: javascript, python, html, webdev
Published: 2022-05-08 06:31:07

[PyScript](https://pyscript.net/) 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](https://pyodide.org/en/stable/). So it is a Python distribution (port of CPython) for the browser and Node.js based on WebAssembly.

> [WebAssembly](https://developer.mozilla.org/en-US/docs/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](https://developer.mozilla.org/en-US/docs/WebAssembly).

**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](https://github.com/pyscript/pyscript).

---

**Let's get started with simple examples.**

First you have to add py-script dependency in HTML file.

```html
<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
<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
<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](https://stackblitz.com/edit/web-platform-6vzhbp)

---

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](https://dev.to/devsmitra/no-more-redux-action-creators-functions-30j)

###### [3 steps to create custom state management library with React and Context API](https://dev.to/devsmitra/3-steps-to-create-custom-state-management-library-with-react-hooks-and-context-api-1bfh)

###### [How to cancel Javascript API request with AbortController](https://dev.to/devsmitra/how-to-cancel-javascript-api-request-with-abortcontroller-36cm)

###### [13 Typescript Utility: A Cheat Sheet for Developer](https://dev.to/devsmitra/13-typescript-utility-a-cheat-sheet-for-developer-ab3)

---

###### More content at [Dev.to](https://dev.to/devsmitra "Rahul Sharma(DevsMitra)").

###### Catch me on [YouTube](https://www.youtube.com/channel/UCQkvNcHN5vg3jEoeOb9Tdrw?sub_confirmation=1 "Rahul Sharma(DevsMitra)"), [Github](https://github.com/devsmitra "Rahul Sharma(DevsMitra)"), [Twitter](https://twitter.com/devsmitraa "Rahul Sharma(DevsMitra)"), [LinkedIn](https://www.linkedin.com/in/rahul-sharma-18b8b374 "Rahul Sharma(DevsMitra)"), [Medium](https://devsmitra.medium.com "Rahul Sharma(DevsMitra)"), [Stackblitz](https://stackblitz.com/@devsmitra "Rahul Sharma(DevsMitra)"), [Hashnode](https://devsmitra.hashnode.dev "Rahul Sharma(DevsMitra)"), [HackerNoon] (https://hackernoon.com/u/devsmitra "Rahul Sharma(DevsMitra)"), and [Blogspot](https://devsmitra.blogspot.com "Rahul Sharma(DevsMitra)").