How to Use PyScript Within VS Code
And know how to integrate Python packages in PyScript
You can’t even imagine what we are going to experience. Anaconda’s CEO Peter Wang unveiled quite a surprising project — PyScript, at the PyCon event 2022. The developers at Anaconda have developed a new way to run python scripts on a web browser within HTML.
PyScript is a framework for building powerful Python programs in the browser using the HTML interface. To read the complete guide, head over to their official blog.
Installation and Setup
There is no such installation of any packages to use PyScript.
There are two ways to install and use PyScript
- You can either download the zip file and include the following lines of code in
<head>tag in your HTML file after unzipping
...
<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>
...Please make sure to move the extracted files to the root of your main HTML file
2. Or you can just include these lines directly in your <head>tag:
...
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
...Now, let's move to the next part.
Setting Up VS Code
I will recommend using VS Code as an editor as it provides extensions, the best syntax highlighting, and much more stuff. After installing VS Code go to the extension tab and install the following extensions —
- pyscript : Beautiful syntax and scoped snippets for PyScript.
After that, there is a setting that you need to change in VS Code so that we don't get any errors like “Indentation Error”. To do that Go to File > Preferences > Settings. And in the search bar type, “Format on save” and uncheck the following:
The reason to do this is,— when VS Code saves a file it formats the text and adds/removes spaces which can cause errors in Python.
We have done with all the setup, now it’s time to write our code.
Let’s create a new HTML file and paste the following code in it:
Hit save and click the Go Live option on the bottom right:
These will open a link http://127.0.0.1:5500/index.html in your default browser. Here’s the result:
As you can see in the code we write our python code in <py-script></py-script> tag. The code should be written as we write our python code normally without any spaces at the left unless needed.
Let’s play with a little CSS and make the code a little more complex —
In the above code as you can see, we have used pyscript.write() method instead of just print() method — this is because plain text as an output is not always good.
To apply CSS we created an empty <div> and assign a id to it. Add respective css styling for the id. Then, in the write() method, it takes id as an argument and with f formatting specifies the text that needs to be printed.
Here’s the output in action:
Working With Libraries
Yes, you can also work with Python modules with PyScript. We use <py-env></py-env> in the <head> tag.
You can specify the .whl file with the full path of your local system like this:
...
<py-env>
- './static/wheels/travertino-0.1.3-py3-none-any.whl'
</py-env>
...Or you can directly include modules that are built-in Pyodide in the <head> tag like this:
...
<py-env>
- numpy
- matplotlib
- another module here
</py-env>
...Here’s an example:
Running the page gives the following output:
Alas! We can run Python scripts in our HTML.
If you are looking for more features you can go through the examples in the above repository. There will be official documentation out soon for PyScript. As of now, you can refer to the Getting-Started.MD template on Github.
Want to Connect?Follow me LinkedIn.
