HTML Minifier

RAW HTML INPUT

SamplesSimple PageData TableDeep Nesting IDLE

Chars: 0 Lines: 0

PROCESSED OUTPUT

INDENT: 2 SPACES4 SPACESTAB

Recent

Beautify HTML Minify HTML

AVIANCE Technologies

Recent Tasks

CLEAR ALL HISTORY

AVIANCE Technologies

Clear All Data?

This will permanently delete both your raw input and the processed output. Are you sure?

Cancel Yes, Clear

`, table: ``, complex: `

Post Title

Lorem ipsum dolor sit amet.

` };// Listeners htmlInput.addEventListener('input', () => { updateStats(); if (htmlInput.value.trim()) { updateStatus('READY', 'text-slate-400 border-slate-200 bg-slate-50'); } else { statusBadge.classList.add('hidden'); errorMessage.classList.add('hidden'); } });sampleSelect.addEventListener('change', () => { if (sampleSelect.value) { htmlInput.value = SAMPLES[sampleSelect.value]; beautifyHtml(); sampleSelect.value = ''; } });historyBtn.addEventListener('click', openHistory);function updateStats() { const val = htmlInput.value; charCount.textContent = val.length; lineCount.textContent = val ? val.split('\n').length : 0; }function updateStatus(text, className) { statusBadge.classList.remove('hidden'); statusBadge.innerText = text; statusBadge.className = 'status-badge ' + className; errorMessage.classList.add('hidden'); }function showError(msg) { statusBadge.innerText = 'ERROR'; statusBadge.className = 'status-badge text-red-500 border-red-100 bg-red-50'; errorMessage.classList.remove('hidden'); errorText.innerText = msg; }function beautifyHtml() { const raw = htmlInput.value.trim(); if (!raw) return;try { const indent = indentSelect.value === 'tab' ? '\t' : ' '.repeat(parseInt(indentSelect.value)); const formatted = html_beautify(raw, { indent_size: indentSelect.value === 'tab' ? 1 : parseInt(indentSelect.value), indent_char: indentSelect.value === 'tab' ? '\t' : ' ', max_preserve_newlines: 2, preserve_newlines: true, keep_array_indentation: false, break_chained_methods: false, indent_scripts: 'normal', brace_style: 'collapse', space_before_conditional: true, unescape_strings: false, jslint_happy: false, end_with_newline: false, wrap_line_length: 0, indent_inner_html: true, comma_first: false, e4x: false, indent_empty_lines: false });htmlOutput.value = formatted; updateStatus('BEAUTIFIED', 'text-accent border-accent/20 bg-accent/5'); addToHistory(raw); htmlOutput.classList.add('animate-pulse-once'); setTimeout(() => htmlOutput.classList.remove('animate-pulse-once'), 400); } catch (e) { showError(e.message); } }function minifyHtml() { const raw = htmlInput.value.trim(); if (!raw) return;try { const minified = raw .replace(//g, '') .replace(/>\s+<') .replace(/\s{2,}/g, ' ') .trim();htmlOutput.value = minified; updateStatus('MINIFIED', 'text-accent border-accent/20 bg-accent/5'); addToHistory(raw);htmlOutput.classList.add('animate-pulse-once'); setTimeout(() => htmlOutput.classList.remove('animate-pulse-once'), 400); } catch (e) { showError(e.message); } }function addToHistory(raw) { if (historyArr.length > 0 && historyArr[0] === raw) return; historyArr = [raw, ...historyArr.filter(item => item !== raw)].slice(0, 10); localStorage.setItem(STORAGE_KEY, JSON.stringify(historyArr)); }function openHistory() { historyList.innerHTML = historyArr.length > 0 ? historyArr.map((item, i) => ` `).join('') : '

No recent tasks

'; historyOverlay.classList.remove('hidden'); historyOverlay.classList.add('flex'); }function closeHistory() { historyOverlay.classList.add('hidden'); historyOverlay.classList.remove('flex'); }function clearHistory() { historyArr = []; localStorage.setItem(STORAGE_KEY, '[]'); openHistory(); }function loadHistory(index) { htmlInput.value = historyArr[index]; updateStats(); closeHistory(); }function clearAll() { confirmOverlay.classList.remove('hidden'); confirmOverlay.classList.add('flex'); confirmClearBtn.onclick = () => { htmlInput.value = ''; htmlOutput.value = ''; statusBadge.classList.add('hidden'); errorMessage.classList.add('hidden'); updateStats(); closeConfirm(); }; }function closeConfirm() { confirmOverlay.classList.add('hidden'); confirmOverlay.classList.remove('flex'); }function copyToClipboard() { if (!htmlOutput.value) return; navigator.clipboard.writeText(htmlOutput.value); const btn = document.querySelector('button[title="Copy"] i'); btn.className = 'fas fa-check text-accent'; setTimeout(() => { btn.className = 'fas fa-copy'; }, 2000); }function downloadHtml() { if (!htmlOutput.value) return; const blob = new Blob([htmlOutput.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'cleaned_markup.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }document.addEventListener('DOMContentLoaded', () => { if (!htmlInput.value) { htmlInput.value = SAMPLES.basic; } beautifyHtml(); updateStats(); });

About the HTML Minifier

A free HTML minifier and beautifier. Shrink markup for a faster page, or expand it so the structure is easy to read.

How to use the HTML Minifier

1. Paste the HTML.
2. Choose minify or beautify.
3. Copy the result.

What to check

Minifying removes comments and spare space. It does not change the meaning of the tags.

Will minified HTML look the same in the browser?

Yes, if the markup was valid. The visitor sees the same page with a smaller file.

Can I beautify a single long line of HTML?

Yes. Beautify adds line breaks and indents so you can read the structure.

Enterprise Grade HTML Processing • Client-side Security Secured • Version 1.0.0