HTML / CSS / JS Minifier

Paste your code, minify it instantly, and see exactly how much space you saved. No data leaves your browser.

100% Client-side HTML / CSS / JS Configurable Options Minification History
Minification History
No minifications yet. Paste some code and hit Minify.

Related Tools

CSS Box Shadow Generator · Emoji Picker & Search · Meta Tag Generator · Free Color Palette Generator · Favicon 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

`, css: `/* =================== Global Reset =================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Body styles */ body { font-family: 'Inter', sans-serif; background-color: #050508; color: #e2e8f0; line-height: 1.6; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* ================== Button Component ================== */ .btn { display: inline-flex; align-items: center; padding: 0.65rem 1.5rem; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; background-color: #00d4ff; color: #ffffff; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3); } .btn--secondary { background-color: #1a1a24; color: #e2e8f0; border: 1px solid #2a2a3a; } /* Card Component */ .card { background-color: #111118; border: 1px solid #2a2a3a; border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s ease; } .card:hover { border-color: #00d4ff; }`, js: `// Main application module // Author: NexTool Dev Team // Version: 2.0.0 const app = { // Application state state: { isLoading: false, currentPage: 'home', data: [], filters: {} }, // Initialize the application init: function() { console.log("App initialized"); this.bindEvents(); this.loadData(); this.setupRouter(); }, // Bind DOM events bindEvents: function() { const buttons = document.querySelectorAll('.btn'); buttons.forEach(function(btn) { btn.addEventListener('click', function(e) { // Handle button click console.log("Button clicked:", e.target); app.handleAction(e.target.dataset.action); }); }); // Handle form submissions const forms = document.querySelectorAll('form'); forms.forEach(function(form) { form.addEventListener('submit', function(e) { e.preventDefault(); /* Collect form data */ const formData = new FormData(e.target); app.submitForm(formData); }); }); }, // Load data from API loadData: async function() { this.state.isLoading = true; try { const response = await fetch('/api/data'); const data = await response.json(); // Process the data this.state.data = data; this.render(data); } catch (error) { console.error("Failed to load:", error); this.showError("Failed to load data"); } finally { this.state.isLoading = false; } }, // Handle user actions handleAction: function(action) { switch (action) { case 'save': this.save(); break; case 'delete': this.delete(); break; case 'refresh': this.loadData(); break; default: console.log("Unknown action:", action); } }, // Setup client-side router setupRouter: function() { window.addEventListener('popstate', function(e) { // Handle back/forward navigation app.navigate(window.location.pathname); }); } }; // Start the application when DOM is ready document.addEventListener('DOMContentLoaded', function() { app.init(); });` }; document.getElementById('inputCode').value = samples[currentMode]; updateInputCount(); showToast('Sample ' + currentMode.toUpperCase() + ' loaded!'); } /* ===== HISTORY ===== */ function addToHistory(mode, origBytes, minBytes, savedPct) { const entry = { mode: mode.toUpperCase(), original: formatBytes(origBytes), minified: formatBytes(minBytes), saved: savedPct + '%', time: new Date().toLocaleTimeString(), }; history.unshift(entry); if (history.length > 10) history.pop(); renderHistory(); } function renderHistory() { const container = document.getElementById('historyList'); if (history.length === 0) { container.innerHTML = '
No minifications yet. Paste some code and hit Minify.
'; return; } container.innerHTML = history.map(h => `
${h.mode} ${h.time} ${h.original} → ${h.minified} ${h.saved}
`).join(''); } function clearHistory() { history = []; renderHistory(); showToast('History cleared'); } /* ===== TOAST ===== */ function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2200); } /* ===== KEYBOARD SHORTCUTS ===== */ document.addEventListener('keydown', function(e) { // Ctrl/Cmd + Enter to minify if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); minify(); } // Ctrl/Cmd + Shift + C to copy output if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'C') { e.preventDefault(); copyOutput(); } });