JavaScript? Start PyScript now in your HTML

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.

2 min readJul 22, 2022

Try PyScript

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

<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

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

PyScript

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

Just put this in to your <head> in HTML

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="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

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

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

JavaScript? Start PyScript now in your HTML

Try PyScript

New Version Has a Better Initialization EX

HTML

PyScript

Written by 洪健翔 Hung, Chien-hsiang