Build QuickJS code executor with live results

[simonw]

A UI that lets users enter JavaScript code in a textarea and execute it using quickjs-emscripten. Features:

• Sandboxed execution via QuickJS running in WebAssembly
• Console.log/warn/error/info support
• URL hash state persistence (code saved as #url-encoded-javascript)
• Auto-execute when loading page with hash
• Keyboard shortcut (Ctrl/Cmd + Enter) to run code
• Tab key support for indentation
• Copy output to clipboard
• Execution time display

---

Build quickjs.html - a UI that lets me enter code in a textarea and click to execute, and that code is then executed using quickjs-emscripten and the results displayed below. The URL to the page is updated with #url-encoded-javascript-code - loading that page in the future with that # populated will populate the form and execute the code directly

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

I've thoroughly reviewed the QuickJS code executor implementation. Here's my detailed feedback:

Todo List

• Read and analyze quickjs.html implementation
• Read quickjs.docs.md documentation
• Check for repo-specific guidelines (CLAUDE.md)
• Review code quality and best practices
• Identify potential bugs or issues
• Assess performance considerations
• Evaluate security concerns
• Check test coverage
• Provide comprehensive feedback

---

Overall Assessment

This is a well-structured, feature-complete implementation of a browser-based JavaScript executor using QuickJS WebAssembly. The code demonstrates good practices and thoughtful UX design.

✅ Strengths

Code Quality & Best Practices

• Clean HTML structure: Semantic markup with proper accessibility considerations
• Modern CSS: Good use of CSS variables, responsive design, and modern layout techniques
• ES6 modules: Proper use of ES6 imports from CDN
• Memory management: Excellent disposal of QuickJS handles (lines 291-292, 302, 312-313)
• Error handling: Comprehensive try-catch blocks with user-friendly error messages
• UI/UX: Thoughtful loading states, disabled buttons, and clear feedback

Security Considerations

• Sandboxed execution: QuickJS provides proper sandboxing - code cannot access DOM or browser APIs
• No eval() usage: Uses QuickJS's evalCode() instead of browser's eval()
• CDN integrity: Uses esm.sh which provides integrity checking

Performance

• Lazy initialization: QuickJS loads only when needed
• Efficient DOM updates: Minimal DOM manipulation, good separation of concerns
• Memory cleanup: Proper disposal of QuickJS contexts and handles

⚠️ Areas for Improvement

Potential Bugs/Issues

1. URL encoding edge case (lines 233-246):

   // Could fail with very long code or special characters
   const encoded = encodeURIComponent(code);
   window.history.replaceState(null, null, '#' + encoded);

   Recommendation: Add URL length validation (browsers have ~2000 char limits)

2. Memory leak potential (lines 300-313):

   if (result.error) {
       const error = vm.dump(result.error);
       result.error.dispose();
       vm.dispose(); // VM disposed here
   } else {
       const value = vm.dump(result.value);
       result.value.dispose();
       vm.dispose(); // VM disposed here too - good
   }

   Status: Actually well-handled ✅

3. Race condition possibility (lines 417-425):

   window.addEventListener('hashchange', () => {
       const hashCode = loadFromHash();
       if (hashCode && hashCode !== codeInput.value) {
           codeInput.value = hashCode;
           if (QuickJS) { // Could be null during initialization
               executeCode(hashCode);
           }
       }
   });

   Recommendation: Check runBtn.disabled state to prevent execution during other operations

Performance Considerations

1. CDN dependency: Using esm.sh introduces external dependency and potential latency

   • Recommendation: Consider self-hosting or adding integrity hashes

2. No execution timeout: Long-running code could freeze the UI

   • Recommendation: Add configurable timeout for code execution

3. Large output handling: No limits on console.log output size

   • Recommendation: Truncate very large outputs or add pagination

Missing Features

1. No test coverage: No automated tests for the JavaScript functionality

   • Recommendation: Add unit tests for core functions (URL encoding/decoding, console capture, etc.)

2. Limited error details: Generic error handling could be more specific

   • Recommendation: Categorize errors (syntax, runtime, timeout, etc.)

3. No code persistence: Only URL hash storage

   • Recommendation: Consider localStorage backup for large code snippets

🔒 Security Assessment

Overall Security: Good ✅

• QuickJS provides effective sandboxing
• No access to DOM/browser APIs from executed code
• No direct eval() usage
• Input sanitization through QuickJS parsing

Potential concerns:

• Large code inputs could potentially cause DoS (no input size limits)
• No rate limiting on code execution

📊 Test Coverage

Current: None identified
Recommendation: Add tests for:

• URL hash encoding/decoding (lines 233-246)
• Console output capturing (lines 272-288)
• Error handling scenarios
• Keyboard shortcuts functionality

🎯 Minor Suggestions

1. Line 199: Pin specific version for better reproducibility

   // Current
   import { getQuickJS } from "https://esm.sh/quickjs-emscripten@0.31.1";
   
   // Suggestion: Add integrity hash or consider self-hosting for production

2. Lines 407-413: Tab handling could support shift-tab for un-indenting

3. Line 170: Consider adding more diverse placeholder examples

Summary

This is a high-quality implementation that demonstrates good software engineering practices. The code is clean, well-structured, and handles edge cases thoughtfully. The main areas for improvement are around testing, performance limits, and enhanced error handling. The security model is sound thanks to QuickJS sandboxing.

Recommendation: Approve with suggested minor improvements for production hardening.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	e6727bb
Status:	✅  Deploy successful!
Preview URL:	https://0b695817.tools-b1q.pages.dev
Branch Preview URL:	https://claude-quickjs-code-executor.tools-b1q.pages.dev

View logs

[simonw]

test it with playwright and fix this bug

[claude]

Claude Code is working…

I'll analyze this and get back to you.

View job run

[simonw]

Add some illustrative examples with a neat little UI thing for loading the examples

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

Todo List

• Read repository guidelines (CLAUDE.md - not found)
• Read and analyze quickjs.html implementation
• Read quickjs.docs.md documentation
• Review test files (conftest.py and test_quickjs.py)
• Check code quality and best practices
• Identify potential bugs or issues
• Assess performance considerations
• Evaluate security concerns
• Check test coverage adequacy
• Provide comprehensive feedback

---

Overall Assessment

This is an excellent implementation of a browser-based JavaScript executor using QuickJS WebAssembly. The code demonstrates strong engineering practices, comprehensive testing, and thoughtful UX design. The PR introduces a feature-complete tool with proper security sandboxing and robust error handling.

✅ Strengths

Code Quality & Architecture

• Clean, semantic HTML: Well-structured markup with proper accessibility considerations
• Modern CSS practices: Excellent use of CSS custom properties, responsive design, and intuitive UI patterns
• ES6+ JavaScript: Clean, readable code with proper async/await usage and modern JavaScript patterns
• Separation of concerns: Clear distinction between UI logic, QuickJS integration, and utility functions

Security & Sandboxing

• Proper sandboxing: QuickJS provides effective isolation - executed code cannot access DOM, browser APIs, or make network requests
• No dangerous eval(): Uses QuickJS's evalCode() instead of browser's eval()
• CDN security: Uses versioned CDN with integrity checking via cdn.jsdelivr.net

User Experience

• Intuitive interface: Clean, responsive design with excellent visual feedback
• Rich examples: 10 well-chosen examples covering common JavaScript patterns (quickjs.html:230-345)
• State persistence: URL hash persistence allows easy sharing and bookmarking
• Keyboard shortcuts: Ctrl/Cmd+Enter for execution, Tab for indentation
• Loading states: Proper disabled states and progress indicators
• Copy functionality: One-click output copying with visual feedback

Test Coverage - Exceptional ✨

• Comprehensive Playwright tests: 15 test cases covering all major functionality
• Smart CDN handling: Tests gracefully skip when network unavailable (test_quickjs.py:26-30)
• Full feature coverage: Tests initialization, execution, error handling, UI interactions, keyboard shortcuts, mobile responsiveness
• Proper setup/teardown: Clean server management with automatic port allocation

⚠️ Areas for Improvement

Minor Code Issues

1. CDN Version Consistency (quickjs.html:227):

   <script src="https://cdn.jsdelivr.net/npm/quickjs-emscripten@0.31.0/dist/index.global.js"></script>

   Different version than mentioned in original implementation (0.31.1 vs 0.31.0). Consider standardizing.

2. Error Handling Edge Case (quickjs.html:463-470):

   const errorMessage = typeof error === 'object' ?
       (error.message || JSON.stringify(error)) : String(error);

   Could potentially fail with circular references in error objects. Consider adding try-catch around JSON.stringify().

3. URL Length Limits (quickjs.html:396-399):

   function updateUrlHash(code) {
       const encoded = encodeURIComponent(code);
       window.history.replaceState(null, null, '#' + encoded);
   }

   No validation for URL length limits (~2000 chars in some browsers). Long code snippets could cause issues.

Performance Considerations

1. No execution timeout: Long-running or infinite loops could freeze the UI
2. Large output handling: No limits on console.log output size
3. Memory management: While QuickJS handles are properly disposed, no protection against excessive memory allocation in user code

Missing Features (Minor)

1. Shift+Tab support: Tab indentation works, but no shift+tab un-indenting (quickjs.html:572-578)
2. Code formatting: No built-in code prettification or syntax highlighting
3. Error line numbers: Error messages could be more specific about location

🔒 Security Assessment

Status: Secure ✅

• QuickJS provides robust sandboxing - no access to DOM, localStorage, fetch, or other browser APIs
• Code execution is properly isolated from the host environment
• No eval() usage that could escape sandbox
• Input validation prevents basic injection attacks
• CDN dependency is versioned and from reputable source

Potential concerns (very low risk):

• Large code inputs could cause client-side DoS (no input size limits)
• No rate limiting on code execution

📊 Test Analysis

Coverage: Excellent (15 comprehensive tests)

Covered scenarios:

• ✅ Page loading and initialization
• ✅ Basic code execution and return values
• ✅ Console.log output (single and multiple)
• ✅ Error handling and display
• ✅ URL hash persistence and loading
• ✅ UI interactions (clear, copy, keyboard shortcuts)
• ✅ Mobile responsiveness
• ✅ Input validation

Test infrastructure:

• ✅ Proper server setup with automatic port allocation
• ✅ CDN availability checking with graceful skips
• ✅ Clean setup/teardown patterns
• ✅ Realistic user interaction simulation

🎯 Recommendations

High Priority

1. Add URL length validation in updateUrlHash() function
2. Consider adding execution timeout (e.g., 5-10 seconds) to prevent infinite loops

Medium Priority

1. Add try-catch around JSON.stringify() in error handling
2. Implement output size limits (e.g., truncate after 10,000 characters)
3. Add shift+tab support for un-indenting

Low Priority

1. Consider localStorage backup for large code snippets
2. Add syntax highlighting for better developer experience
3. Include line numbers in error messages

Summary

This is a high-quality implementation that exceeds expectations for a code executor tool. The code demonstrates excellent software engineering practices with:

• Security: Proper sandboxing via QuickJS
• Reliability: Comprehensive error handling and edge case management
• Usability: Intuitive UI with thoughtful UX details
• Maintainability: Clean, well-structured code
• Testing: Exceptional test coverage with Playwright

The implementation is production-ready with only minor improvements suggested. The comprehensive test suite gives high confidence in the implementation's robustness.

Recommendation: ✅ Approve - This is exemplary work that can serve as a model for similar implementations.

---