Implement in-browser code playground with live execution

[anshul23102]

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.

[github-actions]

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]

@codeharborhub Could you please assign/ this issue to me? I would like to work on it under GSSOC '26.