Skip to content

Create interactive playground for tool testing #18

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 2 commits into from
Dec 27, 2025
Merged

Create interactive playground for tool testing #18

simonw merged 2 commits into from
Dec 27, 2025

Conversation

@simonw
Copy link
Owner

@simonw simonw commented Dec 27, 2025 •
edited
Loading

Build a playground.html interactive playground for trying out this tool

Use curl to download https://tools.simonwillison.net/quickjs.html to /tmp for UI inspiration. Then consider parser-playground.html to see how you can load the library with Pyodide and include a light/dark mode switch. Build playground.html as a new file that provides a UI for executing code (ala the quickjs.html demo) but with the same visual style and pyodide loading mechanism as parser-playground.html.

Create playground.html with:

  • Same visual style as parser-playground.html (dark/light mode, CSS variables)
  • Code execution UI inspired by quickjs.html (input, run button, output)
  • Loads micro-javascript via Pyodide for sandboxed JS execution
  • Console.log capture for output display
  • Example code snippets (factorial, fibonacci, arrays, closures, etc.)
  • Keyboard shortcuts (Ctrl+Enter to run, Tab for indent)
  • Execution time display
  • Copy output button

https://gistpreview.github.io/?3525bda987843676860bfdb5d733c14c/index.html

@claude
Add interactive JavaScript execution playground
067992f 
Create playground.html with:
- Same visual style as parser-playground.html (dark/light mode, CSS variables)
- Code execution UI inspired by quickjs.html (input, run button, output)
- Loads micro-javascript via Pyodide for sandboxed JS execution
- Console.log capture for output display
- Example code snippets (factorial, fibonacci, arrays, closures, etc.)
- Keyboard shortcuts (Ctrl+Enter to run, Tab for indent)
- Execution time display
- Copy output button
@simonw
Copy link
Owner Author

simonw commented Dec 27, 2025

Fails with an error:

CleanShot 2025-12-27 at 10 37 02@2x

Failed to initialize: Traceback (most recent call last): File "/lib/python312.zip/_pyodide/_base.py", line 597, in eval_code_async await CodeRunner( File "/lib/python312.zip/_pyodide/_base.py", line 411, in run_async coroutine = eval(self.code, globals, locals) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "", line 4, in ImportError: cannot import name 'JSRuntimeError' from 'microjs.errors' (/lib/python3.12/site-packages/microjs/errors.py). Did you mean: 'JSSyntaxError'?

@simonw
Copy link
Owner Author

simonw commented Dec 27, 2025

Told Claude:

I got this error:

Failed to initialize: Traceback (most recent call last): File "/lib/python312.zip/_pyodide/_base.py", line 597, in eval_code_async await CodeRunner( File "/lib/python312.zip/_pyodide/_base.py", line 411, in run_async coroutine = eval(self.code, globals, locals) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "<exec>", line 4, in <module> ImportError: cannot import name 'JSRuntimeError' from 'microjs.errors' (/lib/python3.12/site-packages/microjs/errors.py). Did you mean: 'JSSyntaxError'?

You should run python -m http.server and then test it yourself using playwright

@claude
Fix playground.html to use correct micro-javascript API
89e360b 
- Use ctx.set() instead of ctx.set_global() (doesn't exist)
- Use dict with callable methods instead of class instance for console
- Import JSArray, JSObject, UNDEFINED, NULL from microjs.values
- Fix format_value to properly format JS arrays and objects
- Format floats as integers when they are whole numbers (e.g., 120 not 120.0)
@simonw
Copy link
Owner Author

simonw commented Dec 27, 2025

Tried it in https://htmledit.squarefree.com/ and it works great!

@simonw simonw merged commit 60487f1 into main Dec 27, 2025
10 checks passed
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