Integrate More Python in the Browser with WebAssembly
In the “Run Basic Python in the Browser with WebAssembly” Shortcut, I showed you some basic examples of running Python in the browser with PyScript and WebAssembly. In this Shortcut, I am going to introduce you to some additional fundamental features that you will want to be able to take advantage of. We’ll then look at more advanced techniques and details in subsequent Shortcuts.
Let’s jump right in. In the GitHub repository for this Shortcut, you should enter the directory 30-More-Python-in-Browser. From there, please enter the dependencies directory, in which you will find a few files. Some will be familiar, some will be new.
First, let’s look at index.html:
<!DOCTYPE html> <html> <head> <script src="./mini-coi.js"></script> <meta charset="utf-8" /> <title>Emoji Translator</title> <link rel="stylesheet" href="https://pyscript.net/releases/2024.8.2/core.css"> <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script> </head> <body> <h1>Translate Emoji....</h1> <input type="text" name="input" id="input-from" value="Hello 🐍"/> <button py-click="convert_from_emoji">Convert From Emoji</button> <div id="output-from"></div> <input type="text" name="input" id="input-to" value="Hello :snake:..."/> <button py-click="convert_to_emoji">Convert To Emoji</button> <div id="output-to"></div> <script type="py" src="./convert.py" config="./pyscript.json"></script> ...
Get Integrate More Python in the Browser with WebAssembly now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
