← Back to Cognitive Train

🛠️ HTML Previewer

Preview:

Tip: Your code runs in a sandboxed iframe. Some features may be restricted for security.

\n'; return doc; }// Preview in iframe function runPreview(){ var doc = buildDocument(); var blob = new Blob([doc], {type: 'text/html'}); var url = URL.createObjectURL(blob); previewFrame.src = url; }// Clear all function clearAll(){ if(confirm('Clear all code?')){ htmlCode.value = ''; cssCode.value = ''; jsCode.value = ''; previewFrame.src = 'about:blank'; } }// Open in new tab function openNewTab(){ var doc = buildDocument(); var blob = new Blob([doc], {type: 'text/html'}); var url = URL.createObjectURL(blob); window.open(url, '_blank'); }// Open in new window function openNewWindow(){ var doc = buildDocument(); var blob = new Blob([doc], {type: 'text/html'}); var url = URL.createObjectURL(blob); window.open(url, '_blank', 'width=1200,height=800,menubar=no,toolbar=no,location=no,status=no'); }// Device width change function updatePreviewWidth(){ var width = deviceSelect.value; previewWrapper.style.width = width; }// Event listeners previewBtn.addEventListener('click', runPreview); clearBtn.addEventListener('click', clearAll); newTabBtn.addEventListener('click', openNewTab); newWindowBtn.addEventListener('click', openNewWindow); deviceSelect.addEventListener('change', updatePreviewWidth);// Keyboard shortcut: Ctrl+Enter to preview document.addEventListener('keydown', function(e){ if((e.ctrlKey || e.metaKey) && e.key === 'Enter'){ e.preventDefault(); runPreview(); } });})();