paper.md (5858B)
1 --- 2 title: 'Pytml: Running Python in the Browser Using Pyodide' 3 tags: 4 - Python 5 - JavaScript 6 - WebAssembly 7 - Education 8 - Pyodide 9 authors: 10 - name: Aswanth R 11 orcid: 0009-0007-1619-374X 12 affiliation: 1 13 affiliations: 14 - name: Independent Researcher 15 index: 1 16 date: 21 June 2026 17 bibliography: paper.bib 18 --- 19 20 # Summary 21 22 Pytml is an open-source JavaScript library that enables developers to embed and execute Python code directly inside HTML web pages. It uses Pyodide—a port of CPython to WebAssembly—to run Python entirely in the browser without requiring a backend server (Pyodide, 2026). 23 24 The library allows Python to be written directly in HTML using either `<py>` tags or `<script type="text/python">` elements. Pytml automatically handles Pyodide initialization, captures Python's standard output and input streams, and renders them in the browser's DOM, providing a seamless experience for developers (NodeX-AR, 2026). 25 26 # Statement of Need 27 28 Embedding Python in web pages traditionally requires manual loading of Pyodide, creating output containers, binding events, and converting data types—often requiring 10 or more lines of JavaScript boilerplate code for a simple "print hello" example. Pytml reduces this to a single HTML tag, making Python-in-the-browser accessible to educators, students, and developers who may not be familiar with WebAssembly or JavaScript toolchains. 29 30 The library is particularly valuable for: 31 - **Educational settings**: Teachers can embed interactive Python examples directly in course materials 32 - **Prototyping**: Developers can quickly test Python code in a browser environment 33 - **Interactive documentation**: Create web pages with live Python code execution 34 35 # Use Cases 36 37 ## Educational Applications 38 Pytml enables interactive coding exercises for Python education. Students can experiment with code examples directly in their browser without installing Python or configuring a development environment. This lowers the barrier to entry for learning programming. 39 40 ## Technical Documentation 41 Technical writers and open-source maintainers can embed executable Python examples in documentation, allowing users to test code snippets immediately. 42 43 ## State of the field 44 45 Several tools exist for running Python in web browsers. Pyodide provides CPython compiled to WebAssembly but requires JavaScript boilerplate for integration. Brython implements Python in JavaScript, offering similar functionality with different tradeoffs. Skulpt provides a lightweight Python-in-JavaScript implementation suitable for educational contexts. Pytml differs by providing a zero-boilerplate wrapper around Pyodide that handles DOM I/O automatically. 46 47 ## Software design 48 49 Pytml is a JavaScript library that wraps Pyodide. On page load, it initializes Pyodide from a CDN, redirects Python's print() and input() to DOM elements, scans for `<py>` tags, and executes Python code in the browser. It transforms blocking input() calls into async JavaScript Promises. 50 51 ## Research impact 52 53 Pytml enables educational Python use on any device with a browser, removing infrastructure barriers in resource-constrained environments. It supports rapid prototyping and interactive documentation. 54 55 ## AI usage disclosure 56 57 GitHub Copilot was used as a coding assistant during the development of Pytml. The AI provided code comments and suggestions, particularly for boilerplate code and for official website. All code was reviewed, tested, and validated by the author before integration. No AI tools were used in the writing of this paper or its supporting documentation. 58 59 ## Rapid Prototyping 60 Developers can quickly prototype Python-based web applications without setting up a backend server, making it ideal for early-stage development and testing. 61 62 # Implementation 63 64 Pytml consists of three primary components: 65 66 1. **JavaScript Core**: Dynamically loads and initializes Pyodide (CPython compiled to WebAssembly) when the page loads. The core handles version management and ensures a single instance of Pyodide is shared across all Python blocks on the page (Drake, 2025). 67 68 2. **Custom Parser**: Scans the HTML document for `<py>` tags and `<script type="text/python">` elements, extracting Python code for execution. 69 70 3. **I/O Bridging Layer**: Intercepts Python's `sys.stdout` and `sys.stdin` streams and redirects them to DOM elements, enabling `print()` and `input()` to work natively in the browser. 71 72 The library is distributed under the Apache License 2.0 and is available on GitHub (NodeX-AR, 2026). It has been released with persistent identifiers via Zenodo (10.5281/zenodo.20772922) and Software Heritage (swh:1:dir:f92a1f52bf3898ba006e009e4cbde4d9c40b9d73). 73 74 # Limitations and Future Work 75 76 While Pytml simplifies Python execution in the browser, it has some limitations: 77 - **Large initial download**: Pyodide is approximately 6–7 MB, making Pytml unsuitable for lightweight pages 78 - **Startup latency**: First execution can take several seconds while WebAssembly initializes 79 - **Limited library support**: Only pure-Python packages are supported; C-extensions must be recompiled to WebAssembly 80 81 Future development plans include: 82 - Replacing Pyodide with a custom WebAssembly-compiled Python interpreter for faster loading 83 - Support for scientific Python packages such as NumPy and Matplotlib 84 - Enhanced debugging and error reporting capabilities 85 86 # Acknowledgements 87 88 The author acknowledges the Pyodide project (Drake, 2025) for making Python-in-the-browser possible. 89 90 # References 91 92 Pyodide. (2026). Pyodide: Python in the browser. Retrieved from https://pyodide.org 93 94 NodeX-AR. (2026). Pytml GitHub repository. Retrieved from https://github.com/NodeX-AR/Pytml 95 96 Drake, M. (2025). Pyodide: Bringing the scientific Python stack to the browser. *Journal of Open Source Software*, 10(108), 7890. https://doi.org/10.21105/joss.07890