What does this code formatter do?

This tool reformats HTML, CSS and JavaScript code to make it more readable (beautify) or smaller (minify). Beautification adds consistent indentation and line breaks; minification removes comments and unnecessary whitespace to reduce file size.

Is my code sent to a server?

No. All formatting and minification happen entirely in your browser. Your code never leaves your device, so it is safe for private or sensitive code.

Does minification change how my code runs?

For CSS and HTML, minification only removes whitespace and comments and does not change behavior. For JavaScript, minification removes comments and redundant whitespace while preserving required spacing, so behavior is preserved.

✨ HTML · CSS · JS Formatter

Beautify & minify code instantly · works entirely in your browser

Input

Output

\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);

Share this tool

🔗 Related Tools

About HTML CSS JS Formatter & Minifier