✨ HTML · CSS · JS Formatter

Beautify & minify code instantly · works entirely in your browser
Input
Output

Share this tool

\n\n', css: '/* Main styles */\nbody{margin:0;font-family:Arial,sans-serif;background:#f5f5f5;color:#333}\n.container{max-width:960px;margin:0 auto;padding:20px}\n.btn{display:inline-block;padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}\n.btn:hover{background:#0056b3}', js: '// Sample code\nfunction fibonacci(n){if(n<=1)return n;let a=0,b=1;for(let i=2;i<=n;i++){let temp=a+b;a=b;b=temp;}return b;}\nconst data=[1,2,3,4,5];const doubled=data.map(x=>x*2);console.log(doubled);\nif(true){/* block comment */console.log("yes");}else{console.log("no");}' }; /* ================================================================ UI actions ================================================================ */ function getOpts() { return { indent: getIndentStr(), comments: keepComments(), empty: keepEmpty() }; } function doBeautify() { var input = document.getElementById('input').value; if (!input.trim()) { showToast(i18n.t('toast.empty')); return; } var opts = getOpts(); var output; if (currentMode === 'html') output = beautifyHTML(input, opts); else if (currentMode === 'css') output = beautifyCSS(input, opts); else output = beautifyJS(input, opts); document.getElementById('output').value = output; updateStats(); } function doMinify() { var input = document.getElementById('input').value; if (!input.trim()) { showToast(i18n.t('toast.empty')); return; } var opts = getOpts(); var output; if (currentMode === 'html') output = minifyHTML(input, opts); else if (currentMode === 'css') output = minifyCSS(input, opts); else output = minifyJS(input, opts); document.getElementById('output').value = output; updateStats(); } function swapPanels() { var inp = document.getElementById('input'); var out = document.getElementById('output'); var tmp = inp.value; inp.value = out.value; out.value = tmp; updateStats(); } function clearAll() { document.getElementById('input').value = ''; document.getElementById('output').value = ''; updateStats(); showToast(i18n.t('toast.cleared')); } function copyOutput() { var out = document.getElementById('output').value; if (!out) { showToast(i18n.t('toast.noOutput')); return; } copyToClipboard(out); showToast(i18n.t('toast.copied')); } function downloadOutput() { var out = document.getElementById('output').value; if (!out) { showToast(i18n.t('toast.noOutput')); return; } var ext = currentMode === 'html' ? 'html' : currentMode === 'css' ? 'css' : 'js'; var blob = new Blob([out], { type: 'text/plain' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'formatted.' + ext; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } function loadExample() { document.getElementById('input').value = EXAMPLES[currentMode]; document.getElementById('output').value = ''; updateStats(); } function updateStats() { var inp = document.getElementById('input').value; var out = document.getElementById('output').value; var inLines = inp ? inp.split('\n').length : 0; var outLines = out ? out.split('\n').length : 0; document.getElementById('input-stats').textContent = inp.length + ' ' + i18n.t('stats.chars') + ' · ' + inLines + ' ' + i18n.t('stats.lines'); var outStat = out.length + ' ' + i18n.t('stats.chars') + ' · ' + outLines + ' ' + i18n.t('stats.lines'); if (inp && out && out.length < inp.length) { var saved = inp.length - out.length; var pct = Math.round((saved / inp.length) * 100); outStat += ' · ' + i18n.t('stats.saved') + ' ' + saved + ' (' + pct + '%)'; } document.getElementById('output-stats').textContent = outStat; } /* ================================================================ Mode switching ================================================================ */ document.getElementById('mode-tabs').addEventListener('click', function (e) { var btn = e.target.closest('button'); if (!btn) return; var mode = btn.getAttribute('data-mode'); if (mode === currentMode) return; document.querySelectorAll('#mode-tabs button').forEach(function (b) { b.classList.remove('active'); }); btn.classList.add('active'); currentMode = mode; updatePlaceholder(); }); function updatePlaceholder() { var inp = document.getElementById('input'); inp.setAttribute('placeholder', i18n.t('input.placeholder.' + currentMode)); } /* ================================================================ Clipboard / share / toast ================================================================ */ function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).catch(function () { legacyCopy(text); }); } else { legacyCopy(text); } } function legacyCopy(text) { var ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (e) {} document.body.removeChild(ta); } function shareTo(kind) { var url = 'https://formatter.zaerp.com/'; var txt = 'HTML CSS JS Formatter & Minifier - beautify and minify code online'; if (kind === 'x') { openUrl('https://twitter.com/intent/tweet?text=' + encodeURIComponent(txt) + '&url=' + encodeURIComponent(url)); } else if (kind === 'fb') { openUrl('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url)); } else if (kind === 'wa') { openUrl('https://wa.me/?text=' + encodeURIComponent(txt + ' ' + url)); } else if (kind === 'tg') { openUrl('https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(txt)); } else if (kind === 'copy') { copyToClipboard(url); showToast(i18n.t('copied')); } } function openUrl(u) { window.open(u, '_blank', 'noopener,noreferrer'); } var toastTimer = null; function showToast(msg) { var t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(function () { t.classList.remove('show'); }, 1800); } /* ================================================================ Init ================================================================ */ i18n.init(function () { updatePlaceholder(); updateStats(); }); document.getElementById('input').addEventListener('input', updateStats);