Repository navigation
Implement in-browser code playground with live execution #5024
Description
Problem
Code examples on CodeHarborHub are static. Readers cannot experiment with code inline — they must copy snippets to an external IDE, breaking their learning flow.
Proposed Solution
For JavaScript: run code in a sandboxed <iframe> with srcdoc:
function runCode(code) {
const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-scripts';
iframe.srcdoc = `<script>${code}<\/script>`;
}For Python: use Pyodide (WebAssembly Python runtime) loaded lazily on first interaction:
<script type="module">
const { loadPyodide } = await import('https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.mjs');
const pyodide = await loadPyodide();
const result = await pyodide.runPythonAsync(code);
</script>The playground renders below code blocks with a "Run" button and an output console area.
Additional Context
Level 3 feature. Execution must be sandboxed (no network access, no filesystem). A loading spinner is shown while Pyodide initializes.
Activity
github-actions commentedon Jul 2, 2026
Hi @anshul23102! Thanks for opening this issue. We appreciate your contribution to this open-source project. Your input is valuable and we aim to respond or assign your issue as soon as possible. Thanks again!
anshul23102 commentedon Jul 2, 2026
@codeharborhub Could you please assign/ this issue to me? I would like to work on it under GSSOC '26.
Implement in-browser code playground with live execution (issue #5024)
github-actions commentedon Jul 30, 2026
Hello @anshul23102! Your issue #5024 has been closed. Thank you for your contribution!