May 10
PyScript (Pt.2) — Building Wordle with PyScript + Other Examples
Overview
Last week we did a brief overview of PyScript, a project allowing Python and CPython based packages like Numpy and Pands to run in the browser. This week we continue exploring PyScript with some examples of specific uses including a Wordle implementation with PyScript. The following examples are not comprehensive but cover issues i ran into while diving into PyScript for small projects. In the future I have other ideas for this framework and may write more about those explorations if they pan out with interesting discoveries or learning's to share.
All Examples below can be found on this github repo:
Other Examples can be found on the PyScript Website:
Building Wordle
This was a short weekend project and only a few hundred lines of code all self contained in a single HTML file. It utilizes concepts and examples listed below. While this app does not utilize many data science packages (maybe a later project will emerge…) it does show the basics of building apps with PyScript.
Printing
With PyScript it is possible to print to console in two main ways. Python’s builtin print does work but shows alot of extra output compared to the console.log function from pyodide. The tricky thing about console.log however is that to properly print objects and collections like lists or dictionaries, it is important to first convert the object to a string.
Making HTTP Requests
A common task of many apps is API calls to get data or state from various services. One problem you might encounter working with PyScript is attempting to import requests for HTTP requests. This is because Pyodide (the engine beneath PyScript) does not currently support requests .
instead you can use the XMLHttpRequest package included in pyodide. It works pretty well.
Buttons
Regular HTML buttons are compatible with PyScript. Simply define a python function in a <py-script> tag and then reference that function as the value for a pys-onClick attribute to a button element.
If you forget to include *args, **kwargs in the function’s input you may see an error like the following.
Write to HTML Elements
Writing data to HTML elements is also fairly straight forward. Use the Element object available by default with pyodide to access elements on the DOM. One key thing to remember is to use <variable>.element as seen below before attempting to access attributes like innerText, innerHTML, style.display, value, etc…
Another simple way to write output to elements which can be more stable I found is using the builtin pyscript.write(<label id>, <value>) function. Simply give a label element an id, then use .write to assign a python value to that element.
Inputs
Inputs are similar to other HTML elements; they just need ID’s and then their values can be accessed via <variable>.element.value .
Other Pyodide References
Because PyScript is built on Pyodide, much of Pyodide’s Python API will work in your PyScript apps (to my understanding). For a full overview of Pyodide functions available from python, check out the reference page!
More To Come
PyScript is an interesting project. It could be a candidate for data science reports or small apps in the future and is definitely going to be a project I continue following and possibly using more.
