PyScript is a meta project that aims to combine multiple open technologies into a framework that allows users to create sophisticated browser applications with Python. It integrates seamlessly with the way the DOM works in the browser and allows users to add Python logic in a way that feels natural both to web and Python developers.

Try PyScript

To try PyScript, import the appropriate pyscript files to your html page with:

1
2

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

You can then use PyScript components in your html page. PyScript currently implements the following elements:

• <py-script>: can be used to define python code that is executable within the web page. The element itself is not rendered to the page and is only used to add logic
• <py-repl>: creates a REPL component that is rendered to the page as a code editor and allows users to write executable code

From official doc

Check out the pyscriptjs/examples folder for more examples on how to use it, all you need to do is open them in Chrome.

New Version Has a Better Initialization EX

You can do basically everything even import a CSV file and read it with Pandas just like that.

HTML

1
2
3

<div id="temp_test">  
      <h3>wait</h3>  
    </div>

PyScript

1
2
3
4
5

 <py-script output="temp_test">  
import pandas as pd  
a = pd.read_csv('./test.csv')  
a  
    </py-script>

Just put this in to yourin HTML

1
2
3
4
5
6
7

<link rel="stylesheet" href="[https://pyscript.net/alpha/pyscript.css](https://pyscript.net/alpha/pyscript.css)" />  
    <script defer src="[https://pyscript.net/alpha/pyscript.js](https://pyscript.net/alpha/pyscript.js)"></script>  
    <py-env>  
        - pandas  
        - paths:  
          - ./test.csv  
    </py-env>

or you can output just like how you always do in Jupyter Notebook

1
2
3
4
5

<py-script>  
from datetime import datetime  
now = datetime.now()  
now  
    </py-script>

import package from inside <py-script>

All mentioned are done in a demo

Finally you can even have a Python Online IDE for yourself. Use this:

1
2
3

<div>  
        <py-repl id="my-repl" auto-generate="true"></py-repl>  
    </div>

Let’s go try out then!

Contact me: Hung, Chien-Hsiang (chienhsiang-hung.github.io)