Try it!
Description
Challenges: Making Python run in the browser without a backend. PyScript solved this, but required careful structuring of the code to avoid indentation errors and ensuring each tool was self-contained enough to work in a terminal widget.
Result: A set of browser-playable Python tools covering math and physics topics — all running client-side via PyScript. No server, no install.
How PyScript Works
PyScript — Python Execution in the Browser
════════════════════════════════════════════
┌──────────────────────────────────────────────┐
│ Browser │
│ │
│ page loads <script type="module" │
│ src="core.js"> │
│ │ │
│ ▼ │
│ ┌────────────────────────┐ │
│ │ Pyodide │ │
│ │ CPython compiled to │ │
│ │ WebAssembly (WASM) │ │
│ └────────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────┐ │
│ │ <script type="py" │ │
│ │ terminal> │ │
│ │ your Python runs │ │
│ │ inside the WASM VM │ │
│ └────────────┬───────────┘ │
│ │ stdout / stdin │
│ ▼ │
│ ┌────────────────────────┐ │
│ │ <py-terminal> │ │
│ │ DOM widget wired to │ │
│ │ Python stdin/stdout │ │
│ └────────────────────────┘ │
└──────────────────────────────────────────────┘
Sandbox — what WASM blocks: What works fine:
────────────────────────────── ──────────────────────────
✗ requests / urllib ✓ math, random, statistics
✗ subprocess ✓ input() with terminal attr
✗ open() / file I/O ✓ print, loops, classes
✗ os.system() ✓ js module (call browser APIs)
Pyodide compiles CPython to WASM — real Python in the browser, no server required.
Prettier + PyScript — The Indentation Trap
═════════════════════════════════════════════
BEFORE Prettier: AFTER Prettier (broken):
───────────────── ────────────────────────
<script type="py" <script type="py"
terminal> terminal>
x = int(input()) x = int(input())
print(x * 2) print(x * 2)
</script> </script>
Python sees leading spaces → IndentationError at runtime.
Fix: add <!-- prettier-ignore --> immediately before
every <script type="py"> tag.
Closing </script> must also be at column zero.
Hardest bug to diagnose — code looked fine in the editor but crashed at runtime with no obvious cause.
In Action
Browser Python proof points
- Pyodide runs real Python calculations in the browser with no server process.
- PyScript terminal mode supports interactive input() workflows.
- Formatting guards keep Python indentation intact inside the HTML page.
Dev Notes
Problems Solved
Standard textbooks and flashcards don't let you practice by doing. I needed interactive tools where I could run actual calculations and get instant feedback — and ideally ones that worked in the browser with no install, so I could use them anywhere.
Errors & Fixes
Prettier auto-indented the PyScript code blocks, which caused IndentationError at runtime — fixed with a comment before every script tag. PyScript's input() also blocked silently without the terminal attribute on the script tag.
What I Learned
PyScript's execution model and its browser constraints — no requests, no subprocess, no file I/O. The py-terminal widget for interactive input, how browser-native Python sandboxing works, and why Prettier's auto-formatting and Python's indentation rules don't mix without guards.
Back to top