Interactive Demo

Click the button above…

`; function run() { const html = codeEl.value; const blob = new Blob([html], {type:'text/html'}); frame.src = URL.createObjectURL(blob); } document.getElementById('runBtn').addEventListener('click', run); document.getElementById('sampleBtn').addEventListener('click', () => { codeEl.value = SAMPLE; run(); }); document.getElementById('clearBtn').addEventListener('click', () => { codeEl.value=''; frame.src='about:blank'; }); document.getElementById('downloadBtn').addEventListener('click', () => { if(!codeEl.value)return; downloadFile(new Blob([codeEl.value],{type:'text/html'}),'index.html'); }); document.getElementById('autoToggle').addEventListener('click', function() { autoRun = !autoRun; this.textContent = 'Auto-run: ' + (autoRun ? 'ON' : 'OFF'); this.className = autoRun ? 'btn btn-success' : 'btn btn-secondary'; }); codeEl.addEventListener('input', () => { if (!autoRun) return; clearTimeout(autoTimer); autoTimer = setTimeout(run, 600); }); codeEl.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); run(); } });