Bundle Minifier
LiveMinify HTML, CSS, and JavaScript together in one shot.
<div class="container"><h1>Hello World</h1><p>Welcome to my site.</p></div>
Understanding Code Formatting & Quality
Web performance depends on minimizing the total transfer size of HTML, CSS, and JavaScript delivered to the browser. While individual file minifiers handle one language at a time, many pages contain inline CSS and JavaScript embedded directly in the HTML document — style tags, script blocks, event handlers, and inline styles that also benefit from minification. A bundle minifier processes the complete HTML document, compressing the HTML structure, embedded CSS, and inline JavaScript simultaneously.
Paste your HTML page (with embedded CSS and JavaScript) or individual code blocks and minify everything at once. Removes whitespace, comments, shortens variable names in JS, and optimizes CSS selectors. Shows individual and total size savings with compression ratios. Perfect for optimizing single-page apps and email templates.
The Devkitr Bundle Minifier processes an entire HTML document and minifies all components — the HTML markup, any <style> blocks, any <script> blocks, and attribute values — in a single pass. Paste a complete HTML page to get a fully compressed version where every component is optimized, with a combined size reduction report.
In a typical development workflow, Bundle Minifier becomes valuable whenever you need to minify html, css, and javascript together in one shot. Whether you are working on a personal side project, maintaining production applications for a company, or collaborating with a distributed team across time zones, having a reliable browser-based formatting tool eliminates the need to install desktop software, write one-off scripts, or send data to third-party services that may log or retain your information. Since Bundle Minifier processes everything locally on your device, your data stays private and your workflow stays uninterrupted — open a browser tab, paste your input, get your result.
Key Features
Combined HTML+CSS+JS Minification
Processes the entire document in one pass, minifying HTML structure, inline CSS within <style> tags, and JavaScript within <script> tags.
Attribute Optimization
Removes unnecessary attribute quotes, collapses boolean attributes (disabled, checked, readonly), and shortens event handler attribute values.
Whitespace Intelligence
Removes insignificant whitespace between HTML tags while preserving whitespace inside <pre>, <code>, <textarea>, and inline text content.
Per-Component Size Report
Shows individual size reductions for HTML, CSS, and JavaScript portions, plus the total document size savings.
How to Use Bundle Minifier
Paste Your HTML Document
Copy a complete HTML page including its <style> and <script> sections.
Run Bundle Minification
The tool processes HTML, CSS, and JavaScript components simultaneously, applying language-appropriate minification to each.
Review the Compression Report
Check the per-component and total size savings to evaluate whether the compression meets your performance requirements.
Deploy the Minified Page
Copy the fully minified HTML document for production deployment — every component is compressed and production-ready.
Use Cases
Compressing Single-Page Landing Pages
Landing pages with inline styles and scripts benefit most from bundle minification — all resources are compressed in one optimized document.
Optimizing HTML Email Templates
Email templates require inline CSS and cannot use external resources. Minify everything together to stay under email provider size limits.
Preparing AMP Pages
AMP pages require inline CSS (< 75KB) and no external scripts. Bundle minification ensures the single-document AMP page is as small as possible.
Embedding Web Components
Web components with <template> elements containing style and script blocks benefit from bundle minification to reduce component size.
Pro Tips
Process single-page HTML documents through the bundle minifier rather than running separate HTML, CSS, and JS minifiers — the combined pass is more efficient.
Use this tool for HTML pages with inline resources. Pages with external CSS/JS files benefit more from individual file minification in a build pipeline.
Check that conditional comments and IE-specific blocks are preserved correctly if you need legacy browser support.
Combine bundle minification with Brotli or gzip compression at the server level for maximum total size reduction.
Common Pitfalls
Minifying HTML pages that contain server-side template syntax
Fix: Template directives ({{ }}, <% %>, @{}) may be mangled by the minifier. Process pages after server-side rendering, not before.
Removing all whitespace including space between inline elements
Fix: Space between inline elements like <strong>bold</strong> <em>italic</em> is significant. The minifier should preserve inter-element whitespace.
Not testing minified HTML emails across email clients
Fix: Email clients parse HTML differently than browsers. Test minified emails in Gmail, Outlook, Apple Mail, and Yahoo to catch rendering issues.
Frequently Asked Questions
QCan I minify each language separately?
Yes. Switch between HTML, CSS, and JS tabs to minify each one individually, or use the Bundle tab to minify an entire HTML page with embedded styles and scripts.
QDoes it remove console.log statements?
In the JavaScript minifier, you can optionally enable removal of console.log and console.debug statements.
QHow much size reduction can I expect?
Typically 30-70% depending on code formatting and comment density. Heavily commented code sees the largest reductions.
Related Articles
Related Tools
SQL Formatter
SQL beautifier — format and beautify SQL queries with proper indentation online.
HTML Formatter
Beautify HTML code with proper indentation, nesting, and readability.
CSS Beautifier
Beautify minified or messy CSS with consistent formatting and indentation.
XML Formatter
Format and beautify XML documents with proper indentation and structure.