Installing the Pyscript Framework
Click here to download the
Copy and paste the following into your
<link rel="stylesheet" href="path/to/pyscript.css" /> <script defer src="path/to/pyscript.js"></script>
- Copy and paste the commands into your
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Yup, it's as easy as that. You can now write Python inside your HTML file!
Writing your first "Program" in HTML
Yes, I just proved you wrong. We're gonna be programming in HTML. Let's write the iconic "Hello World" program into our IDE of choice.
Every IDE has a different shortcut to create the boilerplate code, so you don't end up typing it out every time. For JetBrains IDEs, we can use
Ctrl+J to open the Template Menu and click on one of the many HTML formats available.
<body> tag, insert this little snippet of text. If you know anything about python, you'll be able to decode what this one-liner will do.
<py-script> print('Hello, World!') </py-script>
If it wasn't clear to you, we're "printing" hello world onto the screen. Open this file using a modern browser, and after a couple of seconds of loading, you'll finally have written a program in HTML.
Using Packages in PyScript
To use non-standard packages in Pyscript, we have to declare their use within
<py-env> tags separating them with new lines. The simple format for declaring numpy and pandas into your HTML code would be:
<py-env> - numpy - pandas </py-env>
Remember to declare this in the head tag just below the
<script> tag we used
Pyscript has a lot to offer, and if you look at the GitHub repository for the project, you'll see a bunch of cool examples. One of my favorites was Mario natively in the browser using PyScript. It has the entire first level (1-1) complete with sound, the iconic Mario soundtrack, and even cool fireworks at the end.
PyScript is a cool web utility to help integrate the core values of python into the hands of web developers without using a dedicated framework like Flask or Django. Although, in my experience, it was a tad bit slow, maybe because it is in the alpha stage, or maybe because it isn't optimized to run on Chromium-based browsers (Tested on Brave). The latter seems unlikely because chromium-based browsers are the most commonly found nowadays.
Did you find this article valuable?
Support Aryan Garg by becoming a sponsor. Any amount is appreciated!