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.
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>withsrcdoc:For Python: use Pyodide (WebAssembly Python runtime) loaded lazily on first interaction:
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.