Skip to content

Build JavaScript debugging playground with micropip #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
simonw merged 3 commits into from
Dec 27, 2025
Merged

Build JavaScript debugging playground with micropip #17

simonw merged 3 commits into from
Dec 27, 2025

Conversation

@simonw
Copy link
Owner

@simonw simonw commented Dec 27, 2025 •
edited
Loading

Checkout github.com/simonw/tools to /tmp for reference

Build a playground.html HTML page which uses micropip to install micro-javascript from PiPI and then implements a comprehensive explanatory debugging interface. You can enter javaScript code (or click to load a demo script) in a textarea and the tool then runs the lexer and parser and shows you their outputs in a visually useful way on the page - it does this as you modify the textarea including showing parse errors live if there are any.

https://gistpreview.github.io/?b5281b5cdcc09a1cad1afed3101260fe/index.html

claude and others added 3 commits December 27, 2025 17:49
@claude
Add interactive debugging playground
8923400 
HTML page using Pyodide/micropip to load micro-javascript from PyPI.
Features:
- Live lexer output with color-coded tokens by type
- Live parser output with collapsible AST tree view
- 10 demo scripts showcasing various JavaScript features
- Real-time error display with line/column indicators
- Debounced updates as you type
@claude
Add light/dark theme toggle with system preference support
c51d79b 
- Default to system preference via prefers-color-scheme
- Add theme toggle button cycling: auto -> light -> dark -> auto
- Persist theme choice in localStorage
- Use CSS variables for all theme-dependent colors
- Include accessible SVG icons for each theme state
@simonw
Rename to parser-playground.html
b158a5d
@simonw simonw merged commit 963784a into main Dec 27, 2025
10 checks passed
@simonw simonw deleted the claude/js-debugging-playground-LzrCk branch December 27, 2025 18:04
simonw added a commit that referenced this pull request Dec 27, 2025
@simonw
Link to the playgrounds from the README
426f169 
Refs #17, #18
simonw added a commit that referenced this pull request Dec 27, 2025
@simonw
Release 0.1a3
6883f90 
Refs #9, #10, #14, #16, #17, #18, #19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@simonw @claude