XML Formatter

Format XML code instantly. Beautify XML, indent properly, validate syntax, and make code readable. Perfect for developers!
Enter XML Code:
                    <div class="option-group">
                        <label class="option-label">Indentation:</label>
                        <select id="indentType" class="option-input">
                            <option value="2">2 Spaces</option>
                            <option value="4" selected>4 Spaces</option>
                            <option value="8">8 Spaces</option>
                            <option value="tab">Tab</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Quote Style:</label>
                        <select id="quoteStyle" class="option-input">
                            <option value="single">Single Quotes</option>
                            <option value="double" selected>Double Quotes</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Self-closing Tags:</label>
                        <select id="selfClosing" class="option-input">
                            <option value="true" selected>Keep Self-closing</option>
                            <option value="false">Expand Self-closing</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Max Line Length:</label>
                        <input type="number" id="maxLineLength" class="option-input" value="120" min="40" max="200">
                    </div>
                </div>

                <div class="btn-group">
                    <button id="formatBtn" class="btn">Format XML</button>
                    <button id="minifyBtn" class="btn btn-secondary">Minify XML</button>
                    <button id="validateBtn" class="btn btn-secondary">Validate XML</button>
                    <button id="clearBtn" class="btn btn-secondary">Clear All</button>
                </div>
            </div>

            <!-- Results -->
            <div class="results-section">
                <div class="results-header">
                    <h3 class="results-title">Formatted XML:</h3>
                    <button id="copyBtn" class="copy-btn">Copy to Clipboard</button>
                </div>
                <pre id="formattedOutput" class="formatted-code">Your formatted XML code will appear here...</pre>
            </div>

            <!-- Stats -->
            <div class="stats-section">
                <div class="stat-card">
                    <div class="stat-value" id="lineCount">0</div>
                    <div class="stat-label">Lines</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="charCount">0</div>
                    <div class="stat-label">Characters</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="tagCount">0</div>
                    <div class="stat-label">Tags</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="attributeCount">0</div>
                    <div class="stat-label">Attributes</div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>© 2024 FreeDownloadTools.com. All rights reserved. Made with ❤️ for creators worldwide.</p>
            <p><strong>Powered by <a href="https://likeprovider.net" target="_blank">LikeProvider.net</a></strong></p>
        </div>
    </footer>

    <script defer>
        // XML Formatter Tool
        class XMLFormatter {
            constructor() {
                this.initializeElements();
                this.bindEvents();
            }

            initializeElements() {
                this.xmlInput = document.getElementById('xmlInput');
                this.formattedOutput = document.getElementById('formattedOutput');
                this.formatBtn = document.getElementById('formatBtn');
                this.minifyBtn = document.getElementById('minifyBtn');
                this.validateBtn = document.getElementById('validateBtn');
                this.clearBtn = document.getElementById('clearBtn');
                this.copyBtn = document.getElementById('copyBtn');
                this.indentType = document.getElementById('indentType');
                this.quoteStyle = document.getElementById('quoteStyle');
                this.selfClosing = document.getElementById('selfClosing');
                this.maxLineLength = document.getElementById('maxLineLength');
                
                // Stats elements
                this.lineCount = document.getElementById('lineCount');
                this.charCount = document.getElementById('charCount');
                this.tagCount = document.getElementById('tagCount');
                this.attributeCount = document.getElementById('attributeCount');
            }

            bindEvents() {
                this.formatBtn.addEventListener('click', () => this.formatCode());
                this.minifyBtn.addEventListener('click', () => this.minifyCode());
                this.validateBtn.addEventListener('click', () => this.validateCode());
                this.clearBtn.addEventListener('click', () => this.clearAll());
                this.copyBtn.addEventListener('click', () => this.copyToClipboard());
                this.xmlInput.addEventListener('input', () => this.updateStats());
            }

            formatCode() {
                const code = this.xmlInput.value.trim();
                if (!code) {
                    this.showError('Please enter some XML code to format.');
                    return;
                }

                try {
                    const formatted = this.beautifyXML(code);
                    this.formattedOutput.textContent = formatted;
                    this.updateStats();
                    this.showSuccess('XML code formatted successfully!');
                } catch (error) {
                    this.showError('Error formatting XML: ' + error.message);
                }
            }

            minifyCode() {
                const code = this.xmlInput.value.trim();
                if (!code) {
                    this.showError('Please enter some XML code to minify.');
                    return;
                }

                try {
                    const minified = this.minifyXML(code);
                    this.formattedOutput.textContent = minified;
                    this.updateStats();
                    this.showSuccess('XML code minified successfully!');
                } catch (error) {
                    this.showError('Error minifying XML: ' + error.message);
                }
            }

            validateCode() {
                const code = this.xmlInput.value.trim();
                if (!code) {
                    this.showError('Please enter some XML code to validate.');
                    return;
                }

                try {
                    const parser = new DOMParser();
                    const xmlDoc = parser.parseFromString(code, 'text/xml');
                    const parseError = xmlDoc.getElementsByTagName('parsererror')[0];
                    
                    if (parseError) {
                        this.showError('XML validation failed: ' + parseError.textContent);
                    } else {
                        this.showSuccess('XML is valid!');
                    }
                } catch (error) {
                    this.showError('XML validation error: ' + error.message);
                }
            }

            beautifyXML(xml) {
                // Simple XML beautifier
                let formatted = xml;
                
                // Remove extra whitespace
                formatted = formatted.replace(/\s+/g, ' ');
                
                // Add line breaks after closing tags
                formatted = formatted.replace(/>/g, '>\n');
                
                // Add line breaks after opening tags
                formatted = formatted.replace(/</g, '\n<');
                
                // Clean up multiple line breaks
                formatted = formatted.replace(/\n\s*\n/g, '\n');
                
                // Add proper indentation
                const lines = formatted.split('\n');
                let indentLevel = 0;
                const indentSize = parseInt(this.indentType.value) || 4;
                const indentChar = this.indentType.value === 'tab' ? '\t' : ' '.repeat(indentSize);
                
                const indentedLines = lines.map(line => {
                    const trimmedLine = line.trim();
                    if (!trimmedLine) return '';
                    
                    // Decrease indent for closing tags
                    if (trimmedLine.startsWith('</')) {
                        indentLevel = Math.max(0, indentLevel - 1);
                    }
                    
                    const indentedLine = indentChar.repeat(indentLevel) + trimmedLine;
                    
                    // Increase indent for opening tags (not self-closing)
                    if (trimmedLine.startsWith('<') && !trimmedLine.startsWith('</') && !trimmedLine.endsWith('/>')) {
                        indentLevel++;
                    }
                    
                    return indentedLine;
                });
                
                return indentedLines.join('\n');
            }

            minifyXML(xml) {
                // Simple XML minifier
                return xml
                    .replace(/<!--[\s\S]*?-->/g, '') // Remove comments
                    .replace(/\s+/g, ' ') // Replace multiple spaces with single space
                    .replace(/>\s+</g, '><') // Remove spaces between tags
                    .trim();
            }

            updateStats() {
                const code = this.xmlInput.value;
                const lines = code.split('\n').length;
                const chars = code.length;
                const tags = (code.match(/<[^\/][^>]*>/g) || []).length;
                const attributes = (code.match(/\w+\s*=\s*["'][^"']*["']/g) || []).length;

                this.lineCount.textContent = lines;
                this.charCount.textContent = chars;
                this.tagCount.textContent = tags;
                this.attributeCount.textContent = attributes;
            }

            clearAll() {
                this.xmlInput.value = '';
                this.formattedOutput.textContent = 'Your formatted XML code will appear here...';
                this.updateStats();
            }

            async copyToClipboard() {
                const text = this.formattedOutput.textContent;
                if (text === 'Your formatted XML code will appear here...') {
                    this.showError('No formatted code to copy.');
                    return;
                }

                try {
                    await navigator.clipboard.writeText(text);
                    this.showSuccess('Code copied to clipboard!');
                } catch (error) {
                    // Fallback for older browsers
                    const textArea = document.createElement('textarea');
                    textArea.value = text;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                    this.showSuccess('Code copied to clipboard!');
                }
            }

            showSuccess(message) {
                this.showNotification(message, 'success');
            }

            showError(message) {
                this.showNotification(message, 'error');
            }

            showNotification(message, type) {
                // Remove existing notifications
                const existing = document.querySelector('.notification');
                if (existing) existing.remove();

                const notification = document.createElement('div');
                notification.className = `notification notification-${type}`;
                notification.textContent = message;
                notification.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    padding: 1rem 1.5rem;
                    border-radius: 10px;
                    color: white;
                    font-weight: 600;
                    z-index: 10000;
                    animation: slideIn 0.3s ease;
                    background: ${type === 'success' ? 'var(--success)' : '#dc3545'};
                `;

                document.body.appendChild(notification);

                setTimeout(() => {
                    notification.style.animation = 'slideOut 0.3s ease';
                    setTimeout(() => notification.remove(), 300);
                }, 3000);
            }
        }

        // Initialize the formatter when the page loads
        document.addEventListener('DOMContentLoaded', () => {
            new XMLFormatter();
        });

        // Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    </script>
<!-- Mobile Menu Script --><script defer>document.addEventListener("DOMContentLoaded", function() { const mobileMenuToggle = document.querySelector(".mobile-menu-toggle"); const navLinks = document.querySelector(".nav-links"); if (mobileMenuToggle && navLinks) { mobileMenuToggle.addEventListener("click", function() { mobileMenuToggle.classList.toggle("active"); navLinks.classList.toggle("active"); }); navLinks.addEventListener("click", function(e) { if (e.target.tagName === "A") { mobileMenuToggle.classList.remove("active"); navLinks.classList.remove("active"); } }); document.addEventListener("click", function(e) { if (!mobileMenuToggle.contains(e.target) && !navLinks.contains(e.target)) { mobileMenuToggle.classList.remove("active"); navLinks.classList.remove("active"); } }); } });</script></body>
</html>