HTML / CSS / JS Minifier | Optimize Your Code

HTML / CSS / JS Minifier

Minify your code to reduce file size and optimize web performance.

Minify Your Code

Code Set Name

Code Type

HTML CSS JavaScript

Code Input

Input Size: 0 bytes</p>
          </div>
          <div class="mb-6">
            <label class="block text-lg font-poppins font-semibold text-text-heading mb-2">Minified Output</label>
            <div id="code-result" class="result-box text-sm">–</div>
            <p id="output-size" class="text-sm mt-1 font-inter">Output Size: 0 bytes | Reduction: 0%</p>
          </div>
          <p id="input-error" class="text-error text-sm mt-2 hidden">Please fill out the set name and code input.</p>
          <div class="flex flex-col sm:flex-row justify-between gap-4">
            <button onclick="minifyCode()" class="btn-3d bg-gradient-to-r from-primary-start to-primary-end text-white font-poppins font-semibold py-3 px-6 rounded-lg flex items-center relative">
              <i class="fas fa-compress-alt mr-2"></i> Minify Code
              <div id="minify-spinner" class="spinner absolute right-4 hidden"></div>
            </button>
            <button onclick="copyResults()" class="btn-3d bg-success text-white font-poppins font-semibold py-3 px-6 rounded-lg flex items-center">
              <i class="fas fa-copy mr-2"></i> Copy Results
            </button>
            <button onclick="saveCodeSet()" class="btn-3d bg-secondary text-white font-poppins font-semibold py-3 px-6 rounded-lg flex items-center relative">
              <i class="fas fa-save mr-2"></i> Save Code Set
              <div id="save-spinner" class="spinner absolute right-4 hidden"></div>
            </button>
            <button onclick="clearForm()" class="btn-3d bg-error text-white font-poppins font-semibold py-3 px-6 rounded-lg flex items-center">
              <i class="fas fa-trash mr-2"></i> Clear
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="code-sets" class="py-16 px-4 sm:px-6 lg:px-8 bg-bg-light parallax bg-[url('data:image/svg+xml,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"%23F8FAFC\" fill-opacity=\"0.4\"%3E%3Ccircle cx=\"3\" cy=\"3\" r=\"1\"/%3E%3Ccircle cx=\"17\" cy=\"17\" r=\"1\"/%3E%3C/g%3E%3C/svg%3E')]">
    <div class="container mx-auto max-w-5xl">
      <h2 class="text-3xl sm:text-4xl font-poppins font-bold text-center text-text-heading mb-8 fade-in">Your Saved Code Sets</h2>
      <div id="code-sets-grid" class="grid sm:grid-cols-2 md:grid-cols-3 gap-6 fade-in fade-in-delay-1"></div>
    </div>
  </section>

<section class="py-16 px-4 sm:px-6 lg:px-8">
    <div class="container mx-auto max-w-5xl">
      <h2 class="text-3xl sm:text-4xl font-poppins font-bold text-center text-text-heading mb-12 fade-in">How to Use the HTML / CSS / JS Minifier</h2>
      <div class="grid sm:grid-cols-2 gap-8">
        <div class="gradient-border">
          <div class="card-3d bg-white p-6 rounded-lg text-center fade-in fade-in-delay-1">
            <div class="w-14 h-14 bg-gradient-to-r from-primary-start to-primary-end rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-2xl font-bold text-white">1</span>
            </div>
            <h3 class="text-xl font-poppins font-semibold text-text-heading mb-2">Enter Code</h3>
            <p class="text-text-body font-inter">Provide a set name, select code type, and paste your HTML, CSS, or JS code.</p>
          </div>
        </div>
        <div class="gradient-border">
          <div class="card-3d bg-white p-6 rounded-lg text-center fade-in fade-in-delay-2">
            <div class="w-14 h-14 bg-gradient-to-r from-primary-start to-primary-end rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-2xl font-bold text-white">2</span>
            </div>
            <h3 class="text-xl font-poppins font-semibold text-text-heading mb-2">Minify & Save</h3>
            <p class="text-text-body font-inter">Minify the code, view results with size reduction, and save or copy the set.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="py-16 px-4 sm:px-6 lg:px-8 bg-bg-light">
    <div class="container mx-auto max-w-5xl">
      <h2 class="text-3xl sm:text-4xl font-poppins font-bold text-center text-text-heading mb-12 fade-in">Why Use Our HTML / CSS / JS Minifier?</h2>
      <div class="gradient-border">
        <div class="card-3d bg-white rounded-lg p-8">
          <div class="fade-in fade-in-delay-1">
            <h3 class="text-xl font-poppins font-semibold bg-clip-text text-transparent bg-gradient-to-r from-primary-start to-primary-end mb-3">Key Benefits</h3>
            <ul class="space-y-2 text-text-body font-inter">
              <li class="flex items-start">
                <i class="fas fa-compress-alt text-primary-start mt-1 mr-2"></i>
                <span>Reduce file size for faster page load times.</span>
              </li>
              <li class="flex items-start">
                <i class="fas fa-copy text-primary-start mt-1 mr-2"></i>
                <span>Copy minified code with a single click.</span>
              </li>
              <li class="flex items-start">
                <i class="fas fa-save text-primary-start mt-1 mr-2"></i>
                <span>Save and manage minified code sets for multiple projects.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

// Update input size
    function updateInputSize() {
      const codeInput = document.getElementById('code-input').value;
      const inputSize = new Blob([codeInput]).size;
      document.getElementById('input-size').textContent = `Input Size: ${inputSize} bytes`;
    }

// Minify code
    function minifyCode() {
      const name = document.getElementById('code-set-name').value.trim();
      const codeType = document.querySelector('input[name="code-type"]:checked').value;
      const codeInput = document.getElementById('code-input').value.trim();
      const errorElement = document.getElementById('input-error');
      const spinner = document.getElementById('minify-spinner');
      const resultElement = document.getElementById('code-result');
      const outputSizeElement = document.getElementById('output-size');

if (!name || !codeInput) {
        errorElement.textContent = 'Please fill out the set name and code input.';
        errorElement.classList.remove('hidden');
        return;
      }

errorElement.classList.add('hidden');
      spinner.classList.remove('hidden');

setTimeout(() => {
        let minified = '';
        let status = 'Success';
        let errorMessage = '';

try {
          if (codeType === 'html') {
            minified = codeInput
              .replace(//g, '') // Remove HTML comments
              .replace(/\s+/g, ' ') // Collapse whitespace
              .replace(/>\s+</g, '><') // Remove spaces between tags
              .trim();
          } else if (codeType === 'css') {
            minified = codeInput
              .replace(/\/\*[\s\S]*?\*\//g, '') // Remove CSS comments
              .replace(/\s+/g, ' ') // Collapse whitespace
              .replace(/\s*([{:;,}])\s*/g, '$1') // Remove spaces around selectors and rules
              .replace(/;}/g, '}') // Remove unnecessary semicolons
              .trim();
          } else if (codeType === 'js') {
            minified = codeInput
              .replace(/\/\/.*$/gm, '') // Remove single-line comments
              .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
              .replace(/\s+/g, ' ') // Collapse whitespace
              .replace(/\s*([=+\-*/(){};,])\s*/g, '$1') // Remove spaces around operators
              .trim();
          }

const inputSize = new Blob([codeInput]).size;
          const outputSize = new Blob([minified]).size;
          const reduction = inputSize > 0 ? ((inputSize - outputSize) / inputSize * 100).toFixed(2) : 0;

currentResults = {
            input: codeInput,
            output: minified,
            status: status,
            inputSize: inputSize,
            outputSize: outputSize,
            reduction: reduction
          };

resultElement.textContent = minified || 'No output generated.';
          resultElement.className = 'result-box text-sm status-success';
          outputSizeElement.textContent = `Output Size: ${outputSize} bytes | Reduction: ${reduction}%`;
        } catch (e) {
          status = 'Error';
          errorMessage = `Minification failed: ${e.message}`;
          currentResults = { input: codeInput, output: errorMessage, status: status, inputSize: new Blob([codeInput]).size, outputSize: 0, reduction: 0 };
          resultElement.textContent = errorMessage;
          resultElement.className = 'result-box text-sm status-error';
          outputSizeElement.textContent = `Output Size: 0 bytes | Reduction: 0%`;
        }

spinner.classList.add('hidden');
      }, 500); // Simulate brief processing delay
    }

// Copy results
    function copyResults() {
      if (currentResults) {
        navigator.clipboard.writeText(currentResults.output).then(() => {
          alert(currentResults.status === 'Success' ? 'Minified code copied to clipboard!' : 'Error message copied to clipboard!');
        });
      } else {
        document.getElementById('input-error').textContent = 'Please minify code first.';
        document.getElementById('input-error').classList.remove('hidden');
      }
    }

// Save code set
    function saveCodeSet() {
      const name = document.getElementById('code-set-name').value.trim();
      const codeType = document.querySelector('input[name="code-type"]:checked').value;
      const codeInput = document.getElementById('code-input').value.trim();
      const errorElement = document.getElementById('input-error');
      const spinner = document.getElementById('save-spinner');

if (!name || !codeInput) {
        errorElement.textContent = 'Please fill out the set name and code input.';
        errorElement.classList.remove('hidden');
        return;
      }

if (!currentResults) {
        errorElement.textContent = 'Please minify code first.';
        errorElement.classList.remove('hidden');
        return;
      }

errorElement.classList.add('hidden');
      spinner.classList.remove('hidden');

data.codeSets.push({
        id: Date.now().toString(),
        name,
        codeType,
        codeInput,
        results: currentResults,
        createdAt: new Date().toISOString(),
        lastModified: new Date().toISOString()
      });
      localStorage.setItem('codeMinifierData', JSON.stringify(data));
      renderCodeSets();
      clearForm();
      document.getElementById('code-sets').scrollIntoView({ behavior: 'smooth' });
      spinner.classList.add('hidden');
    }

// Clear form
    function clearForm() {
      document.getElementById('code-set-name').value = '';
      document.getElementById('code-input').value = '';
      document.getElementById('code-result').textContent = '-';
      document.getElementById('code-result').className = 'result-box text-sm';
      document.getElementById('input-size').textContent = 'Input Size: 0 bytes';
      document.getElementById('output-size').textContent = 'Output Size: 0 bytes | Reduction: 0%';
      document.getElementById('input-error').classList.add('hidden');
      document.querySelector('input[name="code-type"][value="html"]').checked = true;
      currentResults = null;
    }

// Render saved code sets
    function renderCodeSets() {
      const grid = document.getElementById('code-sets-grid');
      grid.innerHTML = '';
      data.codeSets.forEach(set => {
        const setElement = document.createElement('div');
        setElement.className = 'gradient-border';
        setElement.innerHTML = `
          <div class="card-3d bg-white rounded-lg p-4">
            <p class="text-sm font-inter text-gray-500">${set.name}</p>
            <p class="text-sm font-inter truncate">${set.codeInput.substring(0, 50)}${set.codeInput.length > 50 ? '...' : ''}</p>
            <p class="text-sm font-inter">${set.codeType.toUpperCase()}</p>
            <p class="text-sm font-inter ${set.results.status === 'Success' ? 'status-success' : 'status-error'}">${set.results.status}</p>
            <div class="flex justify-between mt-2">
              <button onclick="copyCodeSet('${set.id}')" class="text-success"><i class="fas fa-copy"></i></button>
              <button onclick="deleteCodeSet('${set.id}')" class="text-error"><i class="fas fa-trash"></i></button>
            </div>
          </div>
        `;
        grid.appendChild(setElement);
      });
    }

// Copy code set results
    function copyCodeSet(setId) {
      const set = data.codeSets.find(s => s.id === setId);
      if (set) {
        navigator.clipboard.writeText(set.results.output).then(() => {
          alert(set.results.status === 'Success' ? 'Minified code copied to clipboard!' : 'Error message copied to clipboard!');
        });
      }
    }

// Delete code set
    function deleteCodeSet(setId) {
      const spinner = document.getElementById('save-spinner');
      spinner.classList.remove('hidden');
      data.codeSets = data.codeSets.filter(s => s.id !== setId);
      localStorage.setItem('codeMinifierData', JSON.stringify(data));
      renderCodeSets();
      spinner.classList.add('hidden');
    }

// Smooth scroll to tool section
    function scrollToTool() {
      document.getElementById('tool-box').scrollIntoView({ behavior: 'smooth' });
    }

// Initialize page
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector('.hero-section').classList.add('fade-in');
      renderCodeSets();
      document.getElementById('code-input').addEventListener('input', updateInputSize);
      updateInputSize();
    });
  </script>
</body>
</html>

</div>

</article>

</main>
			
		
	</div>

</div> 
	</div>
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2025 Toolify Worlds | Powered by [Ameer Moavia]</p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer>
	</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/astra\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="ast-img-color-filter"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.97647058823529 0.97647058823529" /><feFuncG type="table" tableValues="0.96470588235294 0.96470588235294" /><feFuncB type="table" tableValues="0.99607843137255 0.99607843137255" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">Scroll to Top</span>
</div>
			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""};
</script>
<script src="https://toolifyworlds.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.11.12" id="astra-theme-js-js"></script>
<script id="hostinger-reach-subscription-block-view-js-extra">
var hostinger_reach_subscription_block_data = {"endpoint":"https:\/\/toolifyworlds.com\/wp-json\/hostinger-reach\/v1\/contact","nonce":"9f216bbbac","translations":{"thanks":"Thanks for subscribing.","error":"Something went wrong. Please try again."}};
</script>
<script src="https://toolifyworlds.com/wp-content/plugins/hostinger-reach/frontend/dist/blocks/subscription-view.js?ver=1759742184" id="hostinger-reach-subscription-block-view-js"></script>
			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
				</body>
</html>