HTML
CSS
JavaScript
Console

Want more tools?

All 269 tools on this site are completely free — no account, no subscription. Everything runs locally in your browser.

NexTool on GitHub — free Browse 269 Free Tools →

Related Tools

CSS Box Shadow Generator · Emoji Picker & Search · Favicon Generator · Meta Tag Generator · Free Color Palette Generator

Related Tools

Free Icon Generator · Free Git Diff Viewer · HTTP Status Code Reference

Related Tools

Free Color Palette Generator · Free CSS Gradient Generator · Free JSON to YAML Converter

Related Tools

Free JSON to YAML Converter · Free CSS Gradient Generator · YAML to JSON Converter

`; const blob=new Blob([doc],{type:'text/html'}); preview.src=URL.createObjectURL(blob); } window.addEventListener('message',e=>{ if(e.data&&e.data.source==='preview-console'){ const div=document.createElement('div'); div.className='log-'+e.data.type; div.textContent=(e.data.type==='log'?'':e.data.type.toUpperCase()+': ')+e.data.args.join(' '); consoleOutput.appendChild(div); consoleOutput.scrollTop=consoleOutput.scrollHeight; } }); function clearConsole(){consoleOutput.innerHTML='';} function setLayout(layout){ const ws=document.getElementById('workspace'); ws.classList.toggle('vertical',layout==='vertical'); document.querySelectorAll('[data-layout]').forEach(b=>{ b.classList.toggle('active',b.dataset.layout===layout); }); } function toggleFullscreen(){ isFullscreen=!isFullscreen; document.body.classList.toggle('fullscreen-mode',isFullscreen); if(!isFullscreen) runCode(); } document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&isFullscreen) toggleFullscreen(); if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();runCode();} }); function downloadHTML(){ const html=htmlEditor.value;const css=cssEditor.value;const js=jsEditor.value; const doc=`\n\n\n \n\nMy Page\n\n\n\n${html}\n \n`; const blob=new Blob([doc],{type:'text/html'}); const url=URL.createObjectURL(blob); const a=document.createElement('a');a.href=url;a.download='page.html';document.body.appendChild(a);a.click(); setTimeout(()=>{document.body.removeChild(a);URL.revokeObjectURL(url);},100); } function saveToStorage(){ try{localStorage.setItem('ntool-html',htmlEditor.value);localStorage.setItem('ntool-css',cssEditor.value);localStorage.setItem('ntool-js',jsEditor.value);}catch(e){} } function loadFromStorage(){ try{ const h=localStorage.getItem('ntool-html'); const c=localStorage.getItem('ntool-css'); const j=localStorage.getItem('ntool-js'); if(h!==null){htmlEditor.value=h;cssEditor.value=c||'';jsEditor.value=j||'';return true;} }catch(e){} return false; } // Tab key support in textareas document.querySelectorAll('.editor-panel textarea').forEach(ta=>{ ta.addEventListener('keydown',e=>{ if(e.key==='Tab'){ e.preventDefault(); const start=ta.selectionStart;const end=ta.selectionEnd; ta.value=ta.value.substring(0,start)+' '+ta.value.substring(end); ta.selectionStart=ta.selectionEnd=start+2; scheduleUpdate(); } }); }); if(!loadFromStorage()) loadTemplate('blank'); else runCode();