{"id":2257,"date":"2026-04-06T13:20:56","date_gmt":"2026-04-06T13:20:56","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=2257"},"modified":"2026-07-04T06:25:45","modified_gmt":"2026-07-04T06:25:45","slug":"html-css-js-code-minifier-pro","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/html-css-js-code-minifier-pro\/","title":{"rendered":"Free HTML, CSS &amp; JS Code Minifier &#8211; Offline Tool"},"content":{"rendered":"<div class=\"pth-hero-section\">\n<div class=\"pth-hero-content\">\n<h2>Code Minifier &#8211; Offline Tool<\/h2>\n<p>Compress and minify your HTML, CSS, and JavaScript code instantly with our 100% offline Code Minifier. Reduce file size and boost page speed securely.<\/p>\n<div id=\"pth-toc-placeholder\"><\/div>\n<\/p>\n<\/div>\n\n<div class=\"pth-hero-image\">\n    <img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/04\/HTML-CSS-JS-Code-Minifier-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"HTML CSS JS Code Minifier\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-why-minifying-code-still-matters-for-page-speed-in-2026\">\ud83d\udd34\u00a0Why Minifying Code Still Matters for PageSpeed in 2026<\/a><\/li><li><a href=\"#\ud83d\udfe1-the-woody-json-extractor-getting-your-code-back-out-of-exports\">\ud83d\udfe1\u00a0The Woody JSON Extractor \u2014 Getting Your Code Back Out of Exports<\/a><ul><li><a href=\"#\ud83d\udfe2-multi-snippet-exports-and-the-batch-workflow\">\ud83d\udfe2\u00a0Multi-Snippet Exports and the Batch Workflow<\/a><\/li><\/ul><\/li><li><a href=\"#\ud83d\udfe1-beautify-mode-reformatting-minified-or-compressed-code\">\ud83d\udfe1\u00a0Beautify Mode \u2014 Reformatting Minified or Compressed Code<\/a><ul><li><a href=\"#\ud83d\udfe2-file-upload-download-and-the-send-to-extractor-button\">\ud83d\udfe2\u00a0File Upload, Download, and the Send to Extractor Button<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n<style>\r\n\/* ============================================================\r\n   PTH CODE MINIFIER PRO STUDIO \u2014 v4.0\r\n   AdSense + PageSpeed + WCAG 2.1 AA + WP\/LiteSpeed Safe\r\n   Features: Minify + Beautify + Woody JSON Extractor\r\n   ============================================================ *\/\r\n\r\n#pth-minifier-wrapper {\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n    width: 100%; max-width: 1400px; margin: 0 auto;\r\n    box-sizing: border-box; background: #f8fafc;\r\n    padding: 20px; border-radius: 16px;\r\n    color: #1e293b; font-weight: 500;\r\n}\r\n#pth-minifier-wrapper * { box-sizing: border-box; min-width: 0; }\r\n#pth-minifier-wrapper h2,\r\n#pth-minifier-wrapper h3,\r\n#pth-minifier-wrapper h4 { color: #0f172a; font-weight: 800; margin-top: 0; }\r\n#pth-minifier-wrapper .pth-tool-title {\r\n    font-size: 26px; font-weight: 800; color: #1d4ed8; margin: 0;\r\n}\r\n\r\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-card {\r\n    background: #fff; border: 1px solid #e2e8f0;\r\n    border-radius: 12px; padding: 24px; margin-bottom: 20px;\r\n    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);\r\n}\r\n#pth-minifier-wrapper .pth-card-header {\r\n    background: #f8fafc; margin: -24px -24px 18px -24px;\r\n    padding: 11px 16px; color: #1d4ed8; font-size: 12px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;\r\n}\r\n\r\n\/* \u2500\u2500 Meta bar \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-tool-meta-bar {\r\n    display: flex; align-items: center; gap: 10px;\r\n    flex-wrap: wrap; margin-bottom: 16px;\r\n}\r\n#pth-minifier-wrapper .pth-version-badge {\r\n    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n#pth-minifier-wrapper .pth-status-offline {\r\n    background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-flex-layout {\r\n    display: grid; grid-template-columns: 1.8fr 1fr;\r\n    gap: 24px; align-items: start;\r\n}\r\n#pth-minifier-wrapper .pth-flex-layout.pth-full-width {\r\n    grid-template-columns: 100%;\r\n}\r\n\r\n\/* \u2500\u2500 Mode Tabs \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-mode-tabs {\r\n    display: flex; gap: 6px; margin-bottom: 20px;\r\n    border-bottom: 2px solid #e2e8f0; padding-bottom: 14px;\r\n    flex-wrap: wrap;\r\n}\r\n#pth-minifier-wrapper .pth-mode-tab {\r\n    background: transparent; border: 1px solid transparent;\r\n    font-size: 13px; font-weight: 700; color: #334155;\r\n    cursor: pointer; padding: 8px 16px; border-radius: 8px;\r\n    transition: 0.2s; font-family: 'Inter', sans-serif;\r\n    display: inline-flex; align-items: center; gap: 6px;\r\n}\r\n#pth-minifier-wrapper .pth-mode-tab:hover { background: #f1f5f9; color: #0f172a; }\r\n#pth-minifier-wrapper .pth-mode-tab.pth-active {\r\n    background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;\r\n}\r\n#pth-minifier-wrapper .pth-mode-tab.pth-json-tab.pth-active {\r\n    background: #faf5ff; color: #5b21b6; border-color: #ddd6fe;\r\n}\r\n\r\n\/* \u2500\u2500 Lang Tabs \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-lang-tabs {\r\n    display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;\r\n}\r\n#pth-minifier-wrapper .pth-lang-tab {\r\n    padding: 6px 14px; border-radius: 8px; font-size: 12px;\r\n    font-weight: 700; cursor: pointer; border: 2px solid #e2e8f0;\r\n    background: #f8fafc; color: #334155; transition: 0.15s;\r\n    font-family: 'Inter', sans-serif;\r\n}\r\n#pth-minifier-wrapper .pth-lang-tab:hover { background: #e2e8f0; }\r\n#pth-minifier-wrapper .pth-lang-tab.pth-active {\r\n    border-color: #2563eb; background: #eff6ff; color: #1d4ed8;\r\n}\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-btn {\r\n    padding: 10px 20px; border-radius: 8px; font-weight: 700;\r\n    cursor: pointer; border: none; font-family: 'Inter', sans-serif;\r\n    font-size: 13px; transition: 0.2s; display: inline-flex;\r\n    align-items: center; justify-content: center; gap: 6px;\r\n}\r\n#pth-minifier-wrapper .pth-btn-primary { background: #2563eb; color: #fff; }\r\n#pth-minifier-wrapper .pth-btn-primary:hover { background: #1d4ed8; }\r\n#pth-minifier-wrapper .pth-btn-secondary {\r\n    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;\r\n}\r\n#pth-minifier-wrapper .pth-btn-secondary:hover { background: #e2e8f0; }\r\n#pth-minifier-wrapper .pth-btn-success { background: #059669; color: #fff; }\r\n#pth-minifier-wrapper .pth-btn-success:hover { background: #047857; }\r\n#pth-minifier-wrapper .pth-btn-purple { background: #5b21b6; color: #fff; }\r\n#pth-minifier-wrapper .pth-btn-purple:hover { background: #4c1d95; }\r\n#pth-minifier-wrapper .pth-btn-danger {\r\n    background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;\r\n}\r\n#pth-minifier-wrapper .pth-btn-danger:hover { background: #fee2e2; }\r\n#pth-minifier-wrapper .pth-sample-btn {\r\n    background: #d1fae5; color: #047857; border: 1px solid #10b981;\r\n    font-size: 0.75rem; padding: 4px 10px; border-radius: 6px;\r\n    font-weight: 700; cursor: pointer; transition: 0.2s;\r\n    display: inline-flex; align-items: center; gap: 4px;\r\n}\r\n#pth-minifier-wrapper .pth-sample-btn:hover { background: #a7f3d0; }\r\n\r\n\/* \u2500\u2500 Action bar \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-action-bar {\r\n    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;\r\n}\r\n\r\n\/* \u2500\u2500 Textarea \/ Code areas \u2500\u2500 *\/\r\n#pth-minifier-wrapper textarea,\r\n#pth-minifier-wrapper .pth-code-display {\r\n    width: 100%; padding: 14px; border: 2px solid #e2e8f0;\r\n    border-radius: 8px; font-family: 'Courier New', monospace;\r\n    font-size: 13px; color: #0f172a; background: #f8fafc;\r\n    transition: 0.2s; resize: vertical; line-height: 1.6;\r\n}\r\n#pth-minifier-wrapper textarea:focus {\r\n    border-color: #3b82f6; outline: none;\r\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);\r\n}\r\n#pth-minifier-wrapper .pth-code-display {\r\n    background: #0f172a; color: #4ade80; min-height: 200px;\r\n    white-space: pre-wrap; word-break: break-all; overflow-y: auto;\r\n    display: none; max-height: 360px;\r\n}\r\n#pth-minifier-wrapper .pth-code-display.pth-visible { display: block; }\r\n#pth-minifier-wrapper label {\r\n    font-weight: 700; color: #0f172a; margin-bottom: 6px;\r\n    display: block; font-size: 12px;\r\n    text-transform: uppercase; letter-spacing: 0.4px;\r\n}\r\n\r\n\/* \u2500\u2500 Stats bar \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-stats-bar {\r\n    display: none; background: #f0fdf4; border: 1px solid #bbf7d0;\r\n    border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;\r\n    flex-wrap: wrap; gap: 20px;\r\n}\r\n#pth-minifier-wrapper .pth-stats-bar.pth-visible { display: flex; }\r\n#pth-minifier-wrapper .pth-stat-item {\r\n    display: flex; flex-direction: column; gap: 2px;\r\n}\r\n#pth-minifier-wrapper .pth-stat-label {\r\n    font-size: 10px; font-weight: 800; color: #334155;\r\n    text-transform: uppercase; letter-spacing: 0.5px;\r\n}\r\n#pth-minifier-wrapper .pth-stat-value {\r\n    font-size: 16px; font-weight: 800; color: #047857;\r\n    font-family: 'Courier New', monospace;\r\n}\r\n#pth-minifier-wrapper .pth-stat-value.pth-savings { color: #1d4ed8; }\r\n\r\n\/* \u2500\u2500 Drop zone (JSON extractor) \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-drop-zone {\r\n    border: 2px dashed #c4b5fd; border-radius: 12px;\r\n    background: #faf5ff; padding: 32px 20px; text-align: center;\r\n    transition: 0.2s; cursor: pointer; margin-bottom: 16px;\r\n}\r\n#pth-minifier-wrapper .pth-drop-zone.pth-drag-over {\r\n    border-color: #7c3aed; background: #ede9fe;\r\n}\r\n#pth-minifier-wrapper .pth-drop-zone.pth-has-file {\r\n    border-color: #059669; background: #f0fdf4;\r\n}\r\n#pth-minifier-wrapper .pth-drop-icon { font-size: 36px; margin-bottom: 10px; display: block; }\r\n#pth-minifier-wrapper .pth-drop-text {\r\n    font-size: 14px; font-weight: 700; color: #5b21b6; margin-bottom: 6px;\r\n}\r\n#pth-minifier-wrapper .pth-drop-sub {\r\n    font-size: 12px; color: #334155; font-weight: 500;\r\n}\r\n\r\n\/* \u2500\u2500 Extracted snippet cards \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-snippet-card {\r\n    background: #faf5ff; border: 1px solid #ddd6fe;\r\n    border-radius: 10px; padding: 16px; margin-bottom: 14px;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-header {\r\n    display: flex; justify-content: space-between;\r\n    align-items: flex-start; gap: 12px; margin-bottom: 12px;\r\n    flex-wrap: wrap;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-title {\r\n    font-size: 14px; font-weight: 800; color: #4c1d95;\r\n    flex: 1;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-meta {\r\n    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-badge {\r\n    font-size: 10px; font-weight: 700; padding: 2px 8px;\r\n    border-radius: 4px; border: 1px solid;\r\n}\r\n#pth-minifier-wrapper .pth-badge-type {\r\n    background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;\r\n}\r\n#pth-minifier-wrapper .pth-badge-loc {\r\n    background: #f0fdf4; color: #14532d; border-color: #bbf7d0;\r\n}\r\n#pth-minifier-wrapper .pth-badge-scope {\r\n    background: #fffbeb; color: #92400e; border-color: #fde68a;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-code-preview {\r\n    background: #0f172a; color: #a78bfa; padding: 12px;\r\n    border-radius: 8px; font-family: 'Courier New', monospace;\r\n    font-size: 11px; max-height: 120px; overflow-y: auto;\r\n    white-space: pre-wrap; word-break: break-all; margin-bottom: 10px;\r\n    border: 1px solid #1e293b; line-height: 1.5;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-actions {\r\n    display: flex; gap: 8px; flex-wrap: wrap;\r\n}\r\n#pth-minifier-wrapper .pth-snippet-count-badge {\r\n    background: #5b21b6; color: #fff; font-size: 12px;\r\n    font-weight: 800; padding: 4px 12px; border-radius: 20px;\r\n    display: inline-block; margin-bottom: 14px;\r\n}\r\n\r\n\/* \u2500\u2500 Error box \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-error-box {\r\n    display: none; background: #fef2f2; border-left: 4px solid #ef4444;\r\n    color: #991b1b; padding: 12px 14px; margin-bottom: 14px;\r\n    border-radius: 8px; font-weight: 700; font-size: 13px;\r\n}\r\n\r\n\/* \u2500\u2500 Sidebar card header \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-sidebar-header {\r\n    background: #f8fafc; margin: -24px -24px 16px -24px;\r\n    padding: 11px 16px; color: #1d4ed8; font-size: 12px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px;\r\n}\r\n#pth-minifier-wrapper .pth-info-row {\r\n    display: flex; justify-content: space-between;\r\n    padding: 7px 0; border-bottom: 1px solid #f1f5f9;\r\n    font-size: 12px; gap: 8px;\r\n}\r\n#pth-minifier-wrapper .pth-info-row:last-child { border-bottom: none; }\r\n#pth-minifier-wrapper .pth-info-label { color: #334155; font-weight: 600; }\r\n#pth-minifier-wrapper .pth-info-val { color: #0f172a; font-weight: 800; }\r\n\r\n\/* \u2500\u2500 Output area min-height (CLS prevention) \u2500\u2500 *\/\r\n#pth-minifier-wrapper .pth-output-area { min-height: 120px; }\r\n#pth-minifier-wrapper .pth-json-output { min-height: 80px; }\r\n\r\n\/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n#pth-minifier-toast {\r\n    position: fixed; bottom: 24px; right: 24px; z-index: 9999;\r\n    display: flex; flex-direction: column; gap: 10px; pointer-events: none;\r\n}\r\n.pth-toast-msg {\r\n    padding: 12px 20px; border-radius: 10px; font-size: 14px;\r\n    font-weight: 600; color: #fff; pointer-events: auto;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n}\r\n.pth-toast-success { background: #059669; }\r\n.pth-toast-error   { background: #dc2626; }\r\n.pth-toast-info    { background: #2563eb; }\r\n\r\n\/* \u2500\u2500 Mobile \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n    #pth-minifier-wrapper {\r\n        padding: 10px; border-radius: 0;\r\n        background: transparent; width: 100% !important;\r\n    }\r\n    #pth-minifier-wrapper .pth-card { padding: 14px; margin-bottom: 14px; }\r\n    #pth-minifier-wrapper .pth-flex-layout {\r\n        grid-template-columns: 100% !important; gap: 14px;\r\n    }\r\n    #pth-minifier-wrapper .pth-tool-title { font-size: 20px; }\r\n    #pth-minifier-wrapper .pth-action-bar { gap: 8px; }\r\n    #pth-minifier-wrapper .pth-btn { font-size: 12px; padding: 8px 14px; }\r\n}\r\n<\/style>\r\n\r\n<!-- Toast container -->\r\n<div id=\"pth-minifier-toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<div id=\"pth-minifier-wrapper\">\r\n<div class=\"pth-flex-layout\" id=\"pth-minifier-layout\">\r\n\r\n    <!-- \u2550\u2550\u2550 MAIN COLUMN \u2550\u2550\u2550 -->\r\n    <div class=\"pth-main-col\">\r\n        <div class=\"pth-card\">\r\n\r\n            <!-- Header -->\r\n            <div style=\"display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:10px;\">\r\n                <h2 class=\"pth-tool-title\">\u26a1 Code Minifier Pro Studio<\/h2>\r\n                <button class=\"pth-btn pth-btn-secondary\" id=\"pth-min-fw-btn\"\r\n                    aria-label=\"Toggle full width layout\">\u26f6 Full Width<\/button>\r\n            <\/div>\r\n\r\n            <!-- Meta bar -->\r\n            <div class=\"pth-tool-meta-bar\">\r\n                <span class=\"pth-version-badge\">v4.0<\/span>\r\n                <span class=\"pth-status-offline\">\ud83d\udd12 100% Offline<\/span>\r\n            <\/div>\r\n\r\n            <!-- Mode Tabs -->\r\n            <div class=\"pth-mode-tabs\" role=\"tablist\" aria-label=\"Tool mode selector\">\r\n                <button class=\"pth-mode-tab pth-active\" id=\"pth-mode-minify\"\r\n                    data-mode=\"minify\" role=\"tab\" aria-selected=\"true\"\r\n                    aria-controls=\"pth-panel-minify\" aria-label=\"Code Minifier and Beautifier mode\">\r\n                    \u26a1 Minifier \/ Beautifier\r\n                <\/button>\r\n                <button class=\"pth-mode-tab pth-json-tab\" id=\"pth-mode-json\"\r\n                    data-mode=\"json\" role=\"tab\" aria-selected=\"false\"\r\n                    aria-controls=\"pth-panel-json\" aria-label=\"Woody JSON Snippet Extractor mode\">\r\n                    \ud83d\uddc2\ufe0f Woody JSON Extractor\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- \u2550\u2550 PANEL 1: Minifier \/ Beautifier \u2550\u2550 -->\r\n            <div id=\"pth-panel-minify\" role=\"tabpanel\">\r\n\r\n                <!-- Lang tabs -->\r\n                <div class=\"pth-lang-tabs\" role=\"group\" aria-label=\"Code language selector\">\r\n                    <button class=\"pth-lang-tab pth-active\" data-lang=\"html\"\r\n                        aria-label=\"HTML language\" aria-pressed=\"true\">\ud83c\udf10 HTML<\/button>\r\n                    <button class=\"pth-lang-tab\" data-lang=\"css\"\r\n                        aria-label=\"CSS language\" aria-pressed=\"false\">\ud83c\udfa8 CSS<\/button>\r\n                    <button class=\"pth-lang-tab\" data-lang=\"js\"\r\n                        aria-label=\"JavaScript language\" aria-pressed=\"false\">\u26a1 JS<\/button>\r\n                    <button class=\"pth-lang-tab\" data-lang=\"json\"\r\n                        aria-label=\"JSON language\" aria-pressed=\"false\">\ud83d\udcc4 JSON<\/button>\r\n                <\/div>\r\n\r\n                <!-- Action bar -->\r\n                <div class=\"pth-action-bar\">\r\n                    <button class=\"pth-sample-btn\" id=\"pth-min-sample-btn\"\r\n                        aria-label=\"Load sample code\">\ud83d\udca1 Load Sample<\/button>\r\n                    <label for=\"pth-file-input\" class=\"pth-sample-btn\"\r\n                        style=\"cursor:pointer;background:#dbeafe;color:#1d4ed8;border-color:#93c5fd;\"\r\n                        aria-label=\"Upload code file\">\r\n                        \ud83d\udce4 Upload File\r\n                    <\/label>\r\n                    <input type=\"file\" id=\"pth-file-input\"\r\n                        accept=\".html,.htm,.css,.js,.json\"\r\n                        style=\"display:none;\"\r\n                        aria-label=\"Select file to upload\">\r\n                    <button class=\"pth-btn pth-btn-danger\" id=\"pth-min-clear-btn\"\r\n                        style=\"font-size:0.75rem;padding:4px 10px;border-radius:6px;\"\r\n                        aria-label=\"Clear all inputs\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n                <\/div>\r\n\r\n                <!-- Input -->\r\n                <div style=\"margin-bottom:14px;\">\r\n                    <label for=\"pth-min-input\" id=\"pth-min-input-label\">\r\n                        HTML Code Input\r\n                    <\/label>\r\n                    <textarea id=\"pth-min-input\" rows=\"12\"\r\n                        aria-label=\"Paste your code here to minify or beautify\"\r\n                        placeholder=\"Paste your HTML, CSS, JavaScript, or JSON code here...\"><\/textarea>\r\n                <\/div>\r\n\r\n                <!-- Error box -->\r\n                <div id=\"pth-min-error\" class=\"pth-error-box\"\r\n                    role=\"alert\" aria-live=\"assertive\"><\/div>\r\n\r\n                <!-- Main action buttons -->\r\n                <div style=\"display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;\">\r\n                    <button class=\"pth-btn pth-btn-primary\" id=\"pth-minify-btn\"\r\n                        style=\"flex:1;padding:14px;\"\r\n                        aria-label=\"Minify code to remove whitespace and comments\">\r\n                        \ud83d\udddc\ufe0f Minify Code\r\n                    <\/button>\r\n                    <button class=\"pth-btn pth-btn-success\" id=\"pth-beautify-btn\"\r\n                        style=\"flex:1;padding:14px;\"\r\n                        aria-label=\"Beautify and format code with proper indentation\">\r\n                        \ud83e\ude84 Beautify Code\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <!-- Stats bar -->\r\n                <div class=\"pth-stats-bar\" id=\"pth-stats-bar\" aria-live=\"polite\" aria-label=\"Code size statistics\">\r\n                    <div class=\"pth-stat-item\">\r\n                        <span class=\"pth-stat-label\">Original<\/span>\r\n                        <span class=\"pth-stat-value\" id=\"pth-stat-orig\">\u2014<\/span>\r\n                    <\/div>\r\n                    <div class=\"pth-stat-item\">\r\n                        <span class=\"pth-stat-label\">Minified<\/span>\r\n                        <span class=\"pth-stat-value\" id=\"pth-stat-mini\">\u2014<\/span>\r\n                    <\/div>\r\n                    <div class=\"pth-stat-item\">\r\n                        <span class=\"pth-stat-label\">Savings<\/span>\r\n                        <span class=\"pth-stat-value pth-savings\" id=\"pth-stat-save\">\u2014<\/span>\r\n                    <\/div>\r\n                    <div class=\"pth-stat-item\">\r\n                        <span class=\"pth-stat-label\">Reduction<\/span>\r\n                        <span class=\"pth-stat-value pth-savings\" id=\"pth-stat-pct\">\u2014<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Output -->\r\n                <div class=\"pth-output-area\" id=\"pth-min-output-wrap\">\r\n                    <label for=\"pth-min-output\" id=\"pth-min-output-label\"\r\n                        style=\"display:none;\">Output Code<\/label>\r\n                    <pre class=\"pth-code-display\" id=\"pth-min-output\"\r\n                        aria-live=\"polite\" aria-label=\"Processed code output\"><\/pre>\r\n                    <div id=\"pth-min-output-actions\"\r\n                        style=\"display:none;gap:8px;margin-top:12px;flex-wrap:wrap;\"\r\n                        class=\"pth-action-bar\">\r\n                        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-copy-btn\"\r\n                            aria-label=\"Copy result code to clipboard\">\ud83d\udccb Copy Result<\/button>\r\n                        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-dl-btn\"\r\n                            aria-label=\"Download result as file\">\ud83d\udce5 Download<\/button>\r\n                        <button class=\"pth-btn pth-btn-secondary\" id=\"pth-send-to-extractor-btn\"\r\n                            aria-label=\"Send output to Woody JSON Extractor\">\ud83d\uddc2\ufe0f Send to Extractor<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div><!-- \/panel-minify -->\r\n\r\n            <!-- \u2550\u2550 PANEL 2: Woody JSON Extractor \u2550\u2550 -->\r\n            <div id=\"pth-panel-json\" style=\"display:none;\">\r\n\r\n                <!-- Action bar -->\r\n                <div class=\"pth-action-bar\" style=\"margin-bottom:16px;\">\r\n                    <button class=\"pth-sample-btn\" id=\"pth-json-sample-btn\"\r\n                        style=\"background:#ede9fe;color:#5b21b6;border-color:#c4b5fd;\"\r\n                        aria-label=\"Load a sample Woody JSON to test extractor\">\r\n                        \ud83d\udca1 Load Sample JSON\r\n                    <\/button>\r\n                    <label for=\"pth-json-file-input\"\r\n                        class=\"pth-sample-btn\"\r\n                        style=\"cursor:pointer;background:#dbeafe;color:#1d4ed8;border-color:#93c5fd;\"\r\n                        aria-label=\"Upload Woody export JSON file\">\r\n                        \ud83d\udce4 Upload JSON File\r\n                    <\/label>\r\n                    <input type=\"file\" id=\"pth-json-file-input\"\r\n                        accept=\".json\" style=\"display:none;\"\r\n                        aria-label=\"Select Woody export JSON file\">\r\n                    <button class=\"pth-btn pth-btn-danger\" id=\"pth-json-clear-btn\"\r\n                        style=\"font-size:0.75rem;padding:4px 10px;border-radius:6px;\"\r\n                        aria-label=\"Clear JSON extractor\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n                <\/div>\r\n\r\n                <!-- Drop zone -->\r\n                <div class=\"pth-drop-zone\" id=\"pth-json-drop-zone\"\r\n                    role=\"button\" tabindex=\"0\"\r\n                    aria-label=\"Drag and drop Woody JSON file here or click to browse\">\r\n                    <span class=\"pth-drop-icon\">\ud83d\uddc2\ufe0f<\/span>\r\n                    <div class=\"pth-drop-text\">Drag & Drop Woody Export JSON Here<\/div>\r\n                    <div class=\"pth-drop-sub\">or paste JSON below \u2014 supports single and multi-snippet exports<\/div>\r\n                <\/div>\r\n\r\n                <!-- JSON paste area -->\r\n                <div style=\"margin-bottom:14px;\">\r\n                    <label for=\"pth-json-input\">Paste Woody Export JSON<\/label>\r\n                    <textarea id=\"pth-json-input\" rows=\"8\"\r\n                        aria-label=\"Paste Woody snippets export JSON content here\"\r\n                        placeholder='Paste your Woody snippets JSON export here...\r\nExample:\r\n{\r\n  \"generator\": \"PHP Code Snippets v2.7.5\",\r\n  \"snippets\": [\r\n    {\r\n      \"name\": \"my-tool\",\r\n      \"title\": \"My Tool\",\r\n      \"content\": \"<style>...<\/style><div>...<\/div><script>...<\/script>\",\r\n      \"type\": \"universal\",\r\n      \"location\": \"header\"\r\n    }\r\n  ]\r\n}'><\/textarea>\r\n                <\/div>\r\n\r\n                <!-- Error box -->\r\n                <div id=\"pth-json-error\" class=\"pth-error-box\"\r\n                    role=\"alert\" aria-live=\"assertive\"><\/div>\r\n\r\n                <!-- Extract button -->\r\n                <button class=\"pth-btn pth-btn-purple\" id=\"pth-extract-btn\"\r\n                    style=\"width:100%;padding:14px;font-size:15px;margin-bottom:20px;\"\r\n                    aria-label=\"Extract code from Woody JSON\">\r\n                    \ud83d\ude80 Extract Snippet Code\r\n                <\/button>\r\n\r\n                <!-- Extracted results -->\r\n                <div id=\"pth-json-results\" class=\"pth-json-output\" aria-live=\"polite\" aria-label=\"Extracted snippets\">\r\n                    <div style=\"text-align:center;color:#334155;font-size:13px;padding:20px 0;\">\r\n                        Paste Woody JSON above and click Extract Snippet Code\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div><!-- \/panel-json -->\r\n\r\n        <\/div><!-- \/pth-card -->\r\n    <\/div><!-- \/main col -->\r\n\r\n    <!-- \u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550 -->\r\n    <div class=\"pth-sidebar-col\" id=\"pth-minifier-sidebar\">\r\n\r\n        <!-- Current file info -->\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-sidebar-header\">\ud83d\udcca Current File Info<\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Language<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-info-lang\">HTML<\/span>\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Input Size<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-info-size\">\u2014<\/span>\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Lines<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-info-lines\">\u2014<\/span>\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Last Action<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-info-action\">\u2014<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- JSON info (hidden until JSON extracted) -->\r\n        <div class=\"pth-card\" id=\"pth-json-info-card\" style=\"display:none;\">\r\n            <div class=\"pth-sidebar-header\" style=\"color:#5b21b6;border-color:#ede9fe;\">\r\n                \ud83d\uddc2\ufe0f JSON File Info\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Generator<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-json-info-gen\">\u2014<\/span>\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Created<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-json-info-date\">\u2014<\/span>\r\n            <\/div>\r\n            <div class=\"pth-info-row\">\r\n                <span class=\"pth-info-label\">Snippets Found<\/span>\r\n                <span class=\"pth-info-val\" id=\"pth-json-info-count\">\u2014<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Pro Tips -->\r\n        <div class=\"pth-card\">\r\n            <div class=\"pth-sidebar-header\">\ud83d\udca1 Pro Tips<\/div>\r\n            <ul style=\"margin:0;padding-left:16px;font-size:12px;color:#334155;line-height:1.9;font-weight:500;\">\r\n                <li><strong style=\"color:#0f172a;\">Minify<\/strong> removes whitespace, comments, and redundant chars.<\/li>\r\n                <li><strong style=\"color:#0f172a;\">Beautify<\/strong> formats and indents code for readability.<\/li>\r\n                <li><strong style=\"color:#0f172a;\">JSON Extractor<\/strong> \u2014 export from Woody \u2192 import JSON here \u2192 copy plain code instantly.<\/li>\r\n                <li><strong style=\"color:#0f172a;\">Multi-snippet<\/strong> JSON files show all snippets with individual copy buttons.<\/li>\r\n                <li><strong style=\"color:#0f172a;\">Drag & Drop<\/strong> your .json file directly onto the drop zone.<\/li>\r\n                <li><strong style=\"color:#0f172a;\">Send to Extractor<\/strong> \u2014 minify code, then check if it's valid JSON.<\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <!-- How JSON Export works -->\r\n        <div class=\"pth-card\" style=\"background:#faf5ff;border-color:#ddd6fe;\">\r\n            <div class=\"pth-sidebar-header\" style=\"color:#5b21b6;border-color:#ede9fe;\">\r\n                \ud83d\uddc2\ufe0f How to Export from Woody\r\n            <\/div>\r\n            <ol style=\"margin:0;padding-left:16px;font-size:12px;color:#334155;line-height:2;font-weight:500;\">\r\n                <li>Woody Snippets \u2192 Snippet Library<\/li>\r\n                <li>Select your snippet(s) \u2014 tick checkbox<\/li>\r\n                <li>Bulk Actions \u2192 Export<\/li>\r\n                <li>Download the .json file<\/li>\r\n                <li>Upload or paste here \u2192 Extract!<\/li>\r\n            <\/ol>\r\n        <\/div>\r\n\r\n    <\/div><!-- \/sidebar -->\r\n<\/div><!-- \/flex-layout -->\r\n<\/div><!-- \/wrapper -->\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\n(function () {\r\n    'use strict';\r\n\r\n    \/* =======================================================\r\n       PTH CODE MINIFIER PRO STUDIO \u2014 v4.0\r\n       WP\/LiteSpeed safe | WCAG 2.1 AA | PageSpeed 100\r\n       Features: Minify + Beautify (HTML\/CSS\/JS\/JSON)\r\n                 + Woody JSON Snippet Extractor\r\n       ======================================================= *\/\r\n\r\n    window.pthMinifierApp = {\r\n        initialized: false,\r\n        currentLang: 'html',\r\n        currentMode: 'minify',\r\n        lastAction: '',\r\n        lastResult: '',\r\n\r\n        \/* \u2500\u2500 Sample code for each language \u2500\u2500 *\/\r\n        samples: {\r\n            html: [\r\n                '<div class=\"profile-card\">',\r\n                '    <h2>   John Doe   <\/h2>',\r\n                '    <!-- User description -->',\r\n                '    <p>',\r\n                '        Welcome to my <b>awesome<\/b> profile!',\r\n                '    <\/p>',\r\n                '    <ul class=\"skills\">',\r\n                '        <li> Web Developer <\/li>',\r\n                '        <li> UI\/UX Designer <\/li>',\r\n                '    <\/ul>',\r\n                '<\/div>'\r\n            ].join('\\n'),\r\n            css: [\r\n                '\/* Primary Button Style *\/',\r\n                '.btn-primary {',\r\n                '    background-color: #2563eb;',\r\n                '    color :    white ;',\r\n                '    padding : 15px ;',\r\n                '    margin-top:    10px;',\r\n                '    border-radius: 8px;',\r\n                '}',\r\n                '',\r\n                '\/* Link Styles *\/',\r\n                '.link   {',\r\n                '    font-size: 16px;',\r\n                '    text-decoration  : none ;',\r\n                '}'\r\n            ].join('\\n'),\r\n            js: [\r\n                '\/* Calculate Total Function *\/',\r\n                'function calculateTotal( price, tax ) {',\r\n                '    var total   =   price + (price * tax);',\r\n                '    if( total > 100 ) {',\r\n                '        console.log( \"Discount applied!\" );',\r\n                '        total = total - 10;',\r\n                '    }',\r\n                '    return total;',\r\n                '}'\r\n            ].join('\\n'),\r\n            json: [\r\n                '{',\r\n                '  \"user\": \"JohnDoe\",',\r\n                '  \"age\" : 30,',\r\n                '  \"roles\": [',\r\n                '    \"Admin\",',\r\n                '    \"Editor\"',\r\n                '  ],',\r\n                '  \"isActive\": true,',\r\n                '  \"settings\": {',\r\n                '    \"theme\": \"dark\",',\r\n                '    \"notifications\": false',\r\n                '  }',\r\n                '}'\r\n            ].join('\\n')\r\n        },\r\n\r\n        \/* \u2500\u2500 Sample Woody JSON for extractor \u2500\u2500 *\/\r\n        sampleJson: JSON.stringify({\r\n            generator: \"PHP Code Snippets v2.7.5\",\r\n            date_created: \"2026-06-21 10:00\",\r\n            snippets: [\r\n                {\r\n                    name: \"pth-sample-tool\",\r\n                    title: \"Sample Tool | Developer Tools\",\r\n                    content: \"<style>\\n#pth-sample-wrapper {\\n    font-family: 'Inter', sans-serif;\\n    padding: 20px;\\n    background: #f8fafc;\\n}\\n<\/style>\\n\\n<div id=\\\"pth-sample-wrapper\\\">\\n    <h2>Sample Tool<\/h2>\\n    <p>This is extracted from Woody JSON!<\/p>\\n<\/div>\\n\\n<script data-no-optimize=\\\"1\\\">\\n(function() {\\n    'use strict';\\n    console.log('Tool loaded!');\\n})();\\n<\\\/script>\",\r\n                    location: \"header\",\r\n                    type: \"universal\",\r\n                    scope: \"shortcode\",\r\n                    priority: \"10\"\r\n                }\r\n            ]\r\n        }, null, 2),\r\n\r\n        \/* \u2500\u2500\u2500 INIT \u2500\u2500\u2500 *\/\r\n        init: function () {\r\n            this.attachEvents();\r\n            this.updateInputInfo();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 EVENTS \u2500\u2500\u2500 *\/\r\n        attachEvents: function () {\r\n            var self = this;\r\n\r\n            \/* Full width *\/\r\n            var fwBtn = document.getElementById('pth-min-fw-btn');\r\n            if (fwBtn) fwBtn.addEventListener('click', function () { self.toggleWidth(); });\r\n\r\n            \/* Mode tabs *\/\r\n            document.querySelectorAll('#pth-minifier-wrapper .pth-mode-tab').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setMode(this.getAttribute('data-mode')); });\r\n            });\r\n\r\n            \/* Lang tabs *\/\r\n            document.querySelectorAll('#pth-minifier-wrapper .pth-lang-tab').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setLang(this.getAttribute('data-lang')); });\r\n            });\r\n\r\n            \/* Minifier buttons *\/\r\n            var sampleBtn = document.getElementById('pth-min-sample-btn');\r\n            if (sampleBtn) sampleBtn.addEventListener('click', function () { self.loadSample(); });\r\n\r\n            var clearBtn = document.getElementById('pth-min-clear-btn');\r\n            if (clearBtn) clearBtn.addEventListener('click', function () { self.clearMinifier(); });\r\n\r\n            var minifyBtn = document.getElementById('pth-minify-btn');\r\n            if (minifyBtn) minifyBtn.addEventListener('click', function () { self.processCode('minify'); });\r\n\r\n            var beautifyBtn = document.getElementById('pth-beautify-btn');\r\n            if (beautifyBtn) beautifyBtn.addEventListener('click', function () { self.processCode('beautify'); });\r\n\r\n            var copyBtn = document.getElementById('pth-copy-btn');\r\n            if (copyBtn) copyBtn.addEventListener('click', function () { self.copyResult(); });\r\n\r\n            var dlBtn = document.getElementById('pth-dl-btn');\r\n            if (dlBtn) dlBtn.addEventListener('click', function () { self.downloadResult(); });\r\n\r\n            var sendBtn = document.getElementById('pth-send-to-extractor-btn');\r\n            if (sendBtn) sendBtn.addEventListener('click', function () { self.sendToExtractor(); });\r\n\r\n            \/* File upload *\/\r\n            var fileInput = document.getElementById('pth-file-input');\r\n            if (fileInput) fileInput.addEventListener('change', function () { self.handleFileUpload(this); });\r\n\r\n            \/* Live input stats *\/\r\n            var minInput = document.getElementById('pth-min-input');\r\n            if (minInput) minInput.addEventListener('input', function () { self.updateInputInfo(); });\r\n\r\n            \/* JSON extractor buttons *\/\r\n            var jsonSampleBtn = document.getElementById('pth-json-sample-btn');\r\n            if (jsonSampleBtn) jsonSampleBtn.addEventListener('click', function () { self.loadJsonSample(); });\r\n\r\n            var jsonClearBtn = document.getElementById('pth-json-clear-btn');\r\n            if (jsonClearBtn) jsonClearBtn.addEventListener('click', function () { self.clearExtractor(); });\r\n\r\n            var extractBtn = document.getElementById('pth-extract-btn');\r\n            if (extractBtn) extractBtn.addEventListener('click', function () { self.extractJson(); });\r\n\r\n            var jsonFileInput = document.getElementById('pth-json-file-input');\r\n            if (jsonFileInput) jsonFileInput.addEventListener('change', function () { self.handleJsonFileUpload(this); });\r\n\r\n            \/* JSON textarea auto-extract on paste *\/\r\n            var jsonInput = document.getElementById('pth-json-input');\r\n            if (jsonInput) {\r\n                jsonInput.addEventListener('input', function () {\r\n                    \/* Auto-detect if valid JSON pasted *\/\r\n                    var val = this.value.trim();\r\n                    if (val.startsWith('{') && val.endsWith('}') && val.length > 50) {\r\n                        try {\r\n                            JSON.parse(val);\r\n                            \/* Valid JSON \u2014 highlight drop zone *\/\r\n                            var dz = document.getElementById('pth-json-drop-zone');\r\n                            if (dz) dz.classList.add('pth-has-file');\r\n                        } catch (e) { \/* not yet complete *\/ }\r\n                    }\r\n                });\r\n            }\r\n\r\n            \/* Drop zone *\/\r\n            var dropZone = document.getElementById('pth-json-drop-zone');\r\n            if (dropZone) {\r\n                dropZone.addEventListener('click', function () {\r\n                    var jfi = document.getElementById('pth-json-file-input');\r\n                    if (jfi) jfi.click();\r\n                });\r\n                dropZone.addEventListener('keydown', function (e) {\r\n                    if (e.key === 'Enter' || e.key === ' ') {\r\n                        e.preventDefault();\r\n                        var jfi = document.getElementById('pth-json-file-input');\r\n                        if (jfi) jfi.click();\r\n                    }\r\n                });\r\n                dropZone.addEventListener('dragover', function (e) {\r\n                    e.preventDefault();\r\n                    this.classList.add('pth-drag-over');\r\n                });\r\n                dropZone.addEventListener('dragleave', function () {\r\n                    this.classList.remove('pth-drag-over');\r\n                });\r\n                dropZone.addEventListener('drop', function (e) {\r\n                    e.preventDefault();\r\n                    this.classList.remove('pth-drag-over');\r\n                    var files = e.dataTransfer.files;\r\n                    if (files.length > 0) { self.readJsonFile(files[0]); }\r\n                });\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET MODE \u2500\u2500\u2500 *\/\r\n        setMode: function (mode) {\r\n            this.currentMode = mode;\r\n            document.querySelectorAll('#pth-minifier-wrapper .pth-mode-tab').forEach(function (btn) {\r\n                var isActive = btn.getAttribute('data-mode') === mode;\r\n                btn.classList.toggle('pth-active', isActive);\r\n                btn.setAttribute('aria-selected', isActive ? 'true' : 'false');\r\n            });\r\n            var minifyPanel = document.getElementById('pth-panel-minify');\r\n            var jsonPanel   = document.getElementById('pth-panel-json');\r\n            if (minifyPanel) minifyPanel.style.display = (mode === 'minify') ? 'block' : 'none';\r\n            if (jsonPanel)   jsonPanel.style.display   = (mode === 'json')    ? 'block' : 'none';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET LANGUAGE \u2500\u2500\u2500 *\/\r\n        setLang: function (lang) {\r\n            this.currentLang = lang;\r\n            document.querySelectorAll('#pth-minifier-wrapper .pth-lang-tab').forEach(function (btn) {\r\n                var isActive = btn.getAttribute('data-lang') === lang;\r\n                btn.classList.toggle('pth-active', isActive);\r\n                btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\r\n            });\r\n            var labels = { html: 'HTML Code Input', css: 'CSS Code Input', js: 'JavaScript Code Input', json: 'JSON Input' };\r\n            var inputLabel = document.getElementById('pth-min-input-label');\r\n            if (inputLabel) inputLabel.textContent = labels[lang] || 'Code Input';\r\n            var infoLang = document.getElementById('pth-info-lang');\r\n            if (infoLang) infoLang.textContent = lang.toUpperCase();\r\n            var fileInput = document.getElementById('pth-file-input');\r\n            if (fileInput) {\r\n                var accepts = { html: '.html,.htm', css: '.css', js: '.js', json: '.json' };\r\n                fileInput.accept = accepts[lang] || '.txt';\r\n            }\r\n            this.hideOutput();\r\n            this.updateInputInfo();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 LOAD SAMPLE \u2500\u2500\u2500 *\/\r\n        loadSample: function () {\r\n            var input = document.getElementById('pth-min-input');\r\n            if (input) {\r\n                input.value = this.samples[this.currentLang] || '';\r\n                this.updateInputInfo();\r\n                this.hideOutput();\r\n                this.showToast('Sample code loaded!', 'success');\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 PROCESS CODE \u2014 Minify or Beautify \u2500\u2500\u2500 *\/\r\n        processCode: function (action) {\r\n            var self = this;\r\n            var input = document.getElementById('pth-min-input');\r\n            var errBox = document.getElementById('pth-min-error');\r\n            if (errBox) errBox.style.display = 'none';\r\n\r\n            if (!input || !input.value.trim()) {\r\n                self.showError('pth-min-error', 'Please paste or upload code first.');\r\n                self.showToast('No code to process!', 'error');\r\n                return;\r\n            }\r\n\r\n            var code = input.value;\r\n            var result = '';\r\n\r\n            try {\r\n                if (action === 'minify') {\r\n                    result = self.minify(code, self.currentLang);\r\n                    self.lastAction = 'Minified';\r\n                } else {\r\n                    result = self.beautify(code, self.currentLang);\r\n                    self.lastAction = 'Beautified';\r\n                }\r\n\r\n                self.lastResult = result;\r\n                self.showOutput(result, code, action);\r\n                self.showToast(self.lastAction + ' successfully!', 'success');\r\n\r\n                var infoAction = document.getElementById('pth-info-action');\r\n                if (infoAction) infoAction.textContent = self.lastAction;\r\n\r\n            } catch (err) {\r\n                self.showError('pth-min-error', 'Processing error: ' + err.message);\r\n                self.showToast('Processing failed!', 'error');\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 MINIFY ENGINE \u2500\u2500\u2500 *\/\r\n        minify: function (code, lang) {\r\n            if (lang === 'json') {\r\n                var parsed = JSON.parse(code);\r\n                return JSON.stringify(parsed);\r\n            }\r\n            if (lang === 'html') {\r\n                return code\r\n                    .replace(\/<!--[\\s\\S]*?-->\/g, '')\r\n                    .replace(\/\\s+\/g, ' ')\r\n                    .replace(\/>\\s+<\/g, '><')\r\n                    .replace(\/\\s+>\/g, '>')\r\n                    .replace(\/\\s+=\\s+\/g, '=')\r\n                    .trim();\r\n            }\r\n            if (lang === 'css') {\r\n                return code\r\n                    .replace(\/\\\/\\*[\\s\\S]*?\\*\\\/\/g, '')\r\n                    .replace(\/\\s+\/g, ' ')\r\n                    .replace(\/\\s*{\\s*\/g, '{')\r\n                    .replace(\/\\s*}\\s*\/g, '}')\r\n                    .replace(\/\\s*:\\s*\/g, ':')\r\n                    .replace(\/\\s*;\\s*\/g, ';')\r\n                    .replace(\/;\\s*}\/g, '}')\r\n                    .replace(\/,\\s*\/g, ',')\r\n                    .trim();\r\n            }\r\n            if (lang === 'js') {\r\n                return code\r\n                    .replace(\/\\\/\\\/[^\\n]*\/g, '')\r\n                    .replace(\/\\\/\\*[\\s\\S]*?\\*\\\/\/g, '')\r\n                    .replace(\/\\n\\s*\\n\/g, '\\n')\r\n                    .replace(\/\\s+\/g, ' ')\r\n                    .replace(\/\\s*([{};,=+\\-*\/<>!&|?:()])\\s*\/g, '$1')\r\n                    .replace(\/([,;{])\\s+\/g, '$1')\r\n                    .trim();\r\n            }\r\n            return code.replace(\/\\s+\/g, ' ').trim();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BEAUTIFY ENGINE \u2500\u2500\u2500 *\/\r\n        beautify: function (code, lang) {\r\n            if (lang === 'json') {\r\n                var parsed = JSON.parse(code);\r\n                return JSON.stringify(parsed, null, 2);\r\n            }\r\n            if (lang === 'css') {\r\n                return code\r\n                    .replace(\/\\s*{\\s*\/g, ' {\\n    ')\r\n                    .replace(\/;\\s*\/g, ';\\n    ')\r\n                    .replace(\/\\s*}\\s*\/g, '\\n}\\n')\r\n                    .replace(\/,\\s*\/g, ', ')\r\n                    .replace(\/\\s*:\\s*\/g, ': ')\r\n                    .replace(\/\\n\\s*\\n\\s*\\n\/g, '\\n\\n')\r\n                    .trim();\r\n            }\r\n            if (lang === 'html') {\r\n                var indent = 0;\r\n                var lines = code\r\n                    .replace(\/><\/g, '>\\n<')\r\n                    .replace(\/>\\s+<\/g, '>\\n<')\r\n                    .split('\\n');\r\n                var result = '';\r\n                var voidTags = ['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr'];\r\n                lines.forEach(function (line) {\r\n                    line = line.trim();\r\n                    if (!line) return;\r\n                    var isClose = \/^<\\\/\/.test(line);\r\n                    var isVoid = voidTags.some(function (t) { return line.toLowerCase().startsWith('<' + t); });\r\n                    if (isClose) indent = Math.max(0, indent - 1);\r\n                    result += '    '.repeat(indent) + line + '\\n';\r\n                    if (!isClose && !isVoid && \/<[^\/]\/.test(line) && !line.endsWith('\/>') && !\/<[^>]+>[^<]+<\\\/[^>]+>\/.test(line)) indent++;\r\n                });\r\n                return result.trim();\r\n            }\r\n            if (lang === 'js') {\r\n                var indent2 = 0;\r\n                var lines2 = code.split('\\n');\r\n                var res2 = '';\r\n                lines2.forEach(function (line) {\r\n                    var trimmed = line.trim();\r\n                    if (!trimmed) { res2 += '\\n'; return; }\r\n                    var closes = (trimmed.match(\/}\/g) || []).length;\r\n                    var opens  = (trimmed.match(\/{\/g) || []).length;\r\n                    if (trimmed.startsWith('}')) indent2 = Math.max(0, indent2 - 1);\r\n                    res2 += '    '.repeat(indent2) + trimmed + '\\n';\r\n                    indent2 += (opens - closes);\r\n                    if (trimmed.startsWith('}') && opens > 0) indent2++;\r\n                    indent2 = Math.max(0, indent2);\r\n                });\r\n                return res2.trim();\r\n            }\r\n            return code;\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SHOW OUTPUT \u2500\u2500\u2500 *\/\r\n        showOutput: function (result, original, action) {\r\n            var output = document.getElementById('pth-min-output');\r\n            var outputLabel = document.getElementById('pth-min-output-label');\r\n            var outputActions = document.getElementById('pth-min-output-actions');\r\n            var statsBar = document.getElementById('pth-stats-bar');\r\n\r\n            if (output) {\r\n                output.textContent = result;\r\n                output.classList.add('pth-visible');\r\n            }\r\n            if (outputLabel) outputLabel.style.display = 'block';\r\n            if (outputActions) outputActions.style.display = 'flex';\r\n\r\n            \/* Update stats for minify *\/\r\n            if (action === 'minify' && statsBar) {\r\n                var origSize = new Blob([original]).size;\r\n                var miniSize = new Blob([result]).size;\r\n                var savedBytes = origSize - miniSize;\r\n                var pct = origSize > 0 ? Math.round((savedBytes \/ origSize) * 100) : 0;\r\n\r\n                statsBar.classList.add('pth-visible');\r\n                var elOrig = document.getElementById('pth-stat-orig');\r\n                var elMini = document.getElementById('pth-stat-mini');\r\n                var elSave = document.getElementById('pth-stat-save');\r\n                var elPct  = document.getElementById('pth-stat-pct');\r\n                if (elOrig) elOrig.textContent = this.fmtBytes(origSize);\r\n                if (elMini) elMini.textContent = this.fmtBytes(miniSize);\r\n                if (elSave) elSave.textContent = this.fmtBytes(savedBytes);\r\n                if (elPct)  elPct.textContent  = pct + '%';\r\n            } else if (statsBar) {\r\n                statsBar.classList.remove('pth-visible');\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 HIDE OUTPUT \u2500\u2500\u2500 *\/\r\n        hideOutput: function () {\r\n            var output = document.getElementById('pth-min-output');\r\n            var outputLabel = document.getElementById('pth-min-output-label');\r\n            var outputActions = document.getElementById('pth-min-output-actions');\r\n            var statsBar = document.getElementById('pth-stats-bar');\r\n            if (output) { output.textContent = ''; output.classList.remove('pth-visible'); }\r\n            if (outputLabel) outputLabel.style.display = 'none';\r\n            if (outputActions) outputActions.style.display = 'none';\r\n            if (statsBar) statsBar.classList.remove('pth-visible');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 UPDATE INPUT INFO SIDEBAR \u2500\u2500\u2500 *\/\r\n        updateInputInfo: function () {\r\n            var input = document.getElementById('pth-min-input');\r\n            if (!input) return;\r\n            var val = input.value;\r\n            var size = 0;\r\n            try { size = new Blob([val]).size; } catch (e) { size = val.length; }\r\n            var lines = val ? val.split('\\n').length : 0;\r\n            var infoSize = document.getElementById('pth-info-size');\r\n            var infoLines = document.getElementById('pth-info-lines');\r\n            if (infoSize) infoSize.textContent = val ? this.fmtBytes(size) : '\u2014';\r\n            if (infoLines) infoLines.textContent = val ? lines : '\u2014';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 COPY RESULT \u2500\u2500\u2500 *\/\r\n        copyResult: function () {\r\n            if (!this.lastResult) { this.showToast('Nothing to copy!', 'error'); return; }\r\n            var self = this;\r\n            try {\r\n                navigator.clipboard.writeText(self.lastResult).then(function () {\r\n                    self.showToast('Copied to clipboard!', 'success');\r\n                }).catch(function () { self.fallbackCopy(self.lastResult); });\r\n            } catch (e) { self.fallbackCopy(self.lastResult); }\r\n        },\r\n\r\n        fallbackCopy: function (text) {\r\n            var ta = document.createElement('textarea');\r\n            ta.value = text;\r\n            ta.style.position = 'fixed'; ta.style.top = '-9999px';\r\n            document.body.appendChild(ta); ta.select();\r\n            try { document.execCommand('copy'); this.showToast('Copied!', 'success'); } catch (e) { this.showToast('Copy failed \u2014 select manually.', 'error'); }\r\n            document.body.removeChild(ta);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 DOWNLOAD RESULT \u2500\u2500\u2500 *\/\r\n        downloadResult: function () {\r\n            if (!this.lastResult) { this.showToast('Nothing to download!', 'error'); return; }\r\n            var exts = { html: 'html', css: 'css', js: 'js', json: 'json' };\r\n            var ext = exts[this.currentLang] || 'txt';\r\n            var fname = 'pth-' + this.lastAction.toLowerCase() + '-' + Date.now() + '.' + ext;\r\n            var blob = new Blob([this.lastResult], { type: 'text\/plain' });\r\n            var url = URL.createObjectURL(blob);\r\n            var a = document.createElement('a');\r\n            a.href = url; a.download = fname; a.click();\r\n            URL.revokeObjectURL(url);\r\n            this.showToast('Downloaded: ' + fname, 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SEND TO EXTRACTOR \u2500\u2500\u2500 *\/\r\n        sendToExtractor: function () {\r\n            if (!this.lastResult) { this.showToast('Nothing to send!', 'error'); return; }\r\n            var jsonInput = document.getElementById('pth-json-input');\r\n            if (jsonInput) jsonInput.value = this.lastResult;\r\n            this.setMode('json');\r\n            this.showToast('Output sent to JSON Extractor!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 FILE UPLOAD \u2500\u2500\u2500 *\/\r\n        handleFileUpload: function (input) {\r\n            if (!input.files || !input.files[0]) return;\r\n            var self = this;\r\n            var file = input.files[0];\r\n            var ext = file.name.split('.').pop().toLowerCase();\r\n            var langMap = { html: 'html', htm: 'html', css: 'css', js: 'js', json: 'json' };\r\n            if (langMap[ext]) self.setLang(langMap[ext]);\r\n            var reader = new FileReader();\r\n            reader.onload = function (e) {\r\n                var codeInput = document.getElementById('pth-min-input');\r\n                if (codeInput) {\r\n                    codeInput.value = e.target.result;\r\n                    self.updateInputInfo();\r\n                    self.hideOutput();\r\n                    self.showToast('File loaded: ' + file.name, 'success');\r\n                }\r\n            };\r\n            reader.readAsText(file);\r\n            input.value = '';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 CLEAR MINIFIER \u2500\u2500\u2500 *\/\r\n        clearMinifier: function () {\r\n            var input = document.getElementById('pth-min-input');\r\n            if (input) input.value = '';\r\n            this.lastResult = '';\r\n            this.lastAction = '';\r\n            this.hideOutput();\r\n            this.updateInputInfo();\r\n            var errBox = document.getElementById('pth-min-error');\r\n            if (errBox) errBox.style.display = 'none';\r\n            var infoAction = document.getElementById('pth-info-action');\r\n            if (infoAction) infoAction.textContent = '\u2014';\r\n            this.showToast('Cleared!', 'info');\r\n        },\r\n\r\n        \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           WOODY JSON EXTRACTOR\r\n           \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n        \/* \u2500\u2500\u2500 LOAD JSON SAMPLE \u2500\u2500\u2500 *\/\r\n        loadJsonSample: function () {\r\n            var jsonInput = document.getElementById('pth-json-input');\r\n            if (jsonInput) {\r\n                jsonInput.value = this.sampleJson;\r\n                var dz = document.getElementById('pth-json-drop-zone');\r\n                if (dz) dz.classList.add('pth-has-file');\r\n                this.showToast('Sample JSON loaded! Click Extract.', 'success');\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 HANDLE JSON FILE UPLOAD \u2500\u2500\u2500 *\/\r\n        handleJsonFileUpload: function (input) {\r\n            if (!input.files || !input.files[0]) return;\r\n            this.readJsonFile(input.files[0]);\r\n            input.value = '';\r\n        },\r\n\r\n        readJsonFile: function (file) {\r\n            var self = this;\r\n            if (!file.name.endsWith('.json') && file.type !== 'application\/json') {\r\n                self.showToast('Please upload a .json file!', 'error');\r\n                return;\r\n            }\r\n            var reader = new FileReader();\r\n            reader.onload = function (e) {\r\n                var jsonInput = document.getElementById('pth-json-input');\r\n                if (jsonInput) {\r\n                    jsonInput.value = e.target.result;\r\n                    var dz = document.getElementById('pth-json-drop-zone');\r\n                    if (dz) { dz.classList.add('pth-has-file'); }\r\n                    self.showToast('JSON file loaded: ' + file.name + ' \u2014 Click Extract!', 'success');\r\n                }\r\n            };\r\n            reader.readAsText(file);\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 EXTRACT JSON \u2500\u2500\u2500 *\/\r\n        extractJson: function () {\r\n            var self = this;\r\n            var jsonInput = document.getElementById('pth-json-input');\r\n            var errBox = document.getElementById('pth-json-error');\r\n            var results = document.getElementById('pth-json-results');\r\n\r\n            if (errBox) errBox.style.display = 'none';\r\n            if (!jsonInput || !jsonInput.value.trim()) {\r\n                self.showError('pth-json-error', 'Please paste or upload a Woody JSON export first.');\r\n                return;\r\n            }\r\n\r\n            var data;\r\n            try {\r\n                data = JSON.parse(jsonInput.value.trim());\r\n            } catch (e) {\r\n                self.showError('pth-json-error', 'Invalid JSON: ' + e.message + '. Please paste a valid Woody export JSON file.');\r\n                self.showToast('Invalid JSON format!', 'error');\r\n                return;\r\n            }\r\n\r\n            \/* Validate Woody format *\/\r\n            if (!data.snippets || !Array.isArray(data.snippets) || data.snippets.length === 0) {\r\n                self.showError('pth-json-error', 'No snippets found. Make sure this is a valid Woody Snippets export JSON with a \"snippets\" array.');\r\n                return;\r\n            }\r\n\r\n            \/* Update sidebar info *\/\r\n            var infoCard = document.getElementById('pth-json-info-card');\r\n            if (infoCard) infoCard.style.display = 'block';\r\n            var infoGen = document.getElementById('pth-json-info-gen');\r\n            var infoDate = document.getElementById('pth-json-info-date');\r\n            var infoCount = document.getElementById('pth-json-info-count');\r\n            if (infoGen) infoGen.textContent = data.generator || '\u2014';\r\n            if (infoDate) infoDate.textContent = data.date_created || '\u2014';\r\n            if (infoCount) infoCount.textContent = data.snippets.length + ' snippet' + (data.snippets.length > 1 ? 's' : '');\r\n\r\n            \/* Build results HTML *\/\r\n            var html = '';\r\n            var count = data.snippets.length;\r\n\r\n            html += '<div class=\"pth-snippet-count-badge\">' + count + ' Snippet' + (count > 1 ? 's' : '') + ' Found<\/div>';\r\n\r\n            data.snippets.forEach(function (snippet, idx) {\r\n                var code = snippet.content || '';\r\n                \/* Clean \\r\\n line endings *\/\r\n                code = code.replace(\/\\r\\n\/g, '\\n').replace(\/\\r\/g, '\\n');\r\n\r\n                var preview = code.length > 300 ? code.substring(0, 300) + '\\n...' : code;\r\n                var snippetId = 'pth-snip-' + idx;\r\n\r\n                html += '<div class=\"pth-snippet-card\">';\r\n                html += '<div class=\"pth-snippet-header\">';\r\n                html += '<div class=\"pth-snippet-title\">' + self.escHtml(snippet.title || snippet.name || 'Snippet ' + (idx + 1)) + '<\/div>';\r\n                html += '<\/div>';\r\n\r\n                html += '<div class=\"pth-snippet-meta\">';\r\n                if (snippet.type) {\r\n                    html += '<span class=\"pth-snippet-badge pth-badge-type\">' + self.escHtml(snippet.type) + '<\/span>';\r\n                }\r\n                if (snippet.location) {\r\n                    html += '<span class=\"pth-snippet-badge pth-badge-loc\">\ud83d\udccd ' + self.escHtml(snippet.location) + '<\/span>';\r\n                }\r\n                if (snippet.scope) {\r\n                    html += '<span class=\"pth-snippet-badge pth-badge-scope\">\ud83d\udd12 ' + self.escHtml(snippet.scope) + '<\/span>';\r\n                }\r\n                if (snippet.priority) {\r\n                    html += '<span class=\"pth-snippet-badge\" style=\"background:#f0fdf4;color:#14532d;border-color:#bbf7d0;\">\u26a1 Priority: ' + self.escHtml(String(snippet.priority)) + '<\/span>';\r\n                }\r\n                html += '<\/div>';\r\n\r\n                html += '<div style=\"font-size:11px;color:#334155;margin-bottom:8px;font-weight:600;\">\ud83d\udcc4 ' + self.escHtml(snippet.name || '') + ' &bull; ' + self.fmtBytes(new Blob([code]).size) + ' &bull; ' + code.split('\\n').length + ' lines<\/div>';\r\n\r\n                html += '<div class=\"pth-snippet-code-preview\" id=\"' + snippetId + '-preview\">' + self.escHtml(preview) + '<\/div>';\r\n\r\n                html += '<div class=\"pth-snippet-actions\">';\r\n                html += '<button class=\"pth-btn pth-btn-purple\" style=\"font-size:12px;padding:6px 14px;\" data-snip-idx=\"' + idx + '\" id=\"' + snippetId + '-copy\" aria-label=\"Copy code for snippet ' + (idx + 1) + '\">\ud83d\udccb Copy Code<\/button>';\r\n                html += '<button class=\"pth-btn pth-btn-secondary\" style=\"font-size:12px;padding:6px 14px;\" data-snip-idx=\"' + idx + '\" id=\"' + snippetId + '-dl\" aria-label=\"Download code for snippet ' + (idx + 1) + '\">\ud83d\udce5 Download<\/button>';\r\n                html += '<button class=\"pth-btn pth-btn-primary\" style=\"font-size:12px;padding:6px 14px;\" data-snip-idx=\"' + idx + '\" id=\"' + snippetId + '-minify\" aria-label=\"Send to minifier for snippet ' + (idx + 1) + '\">\u26a1 Send to Minifier<\/button>';\r\n                if (code.length > 300) {\r\n                    html += '<button class=\"pth-btn pth-btn-secondary\" style=\"font-size:12px;padding:6px 14px;\" data-snip-idx=\"' + idx + '\" id=\"' + snippetId + '-expand\" aria-label=\"Show full code for snippet ' + (idx + 1) + '\">\ud83d\udc41 Show Full<\/button>';\r\n                }\r\n                html += '<\/div><\/div>';\r\n            });\r\n\r\n            if (results) results.innerHTML = html;\r\n\r\n            \/* Wire up action buttons *\/\r\n            data.snippets.forEach(function (snippet, idx) {\r\n                var code = (snippet.content || '').replace(\/\\r\\n\/g, '\\n').replace(\/\\r\/g, '\\n');\r\n                var snippetId = 'pth-snip-' + idx;\r\n                var name = snippet.name || 'snippet-' + idx;\r\n\r\n                \/* Copy button *\/\r\n                var copyBtn = document.getElementById(snippetId + '-copy');\r\n                if (copyBtn) {\r\n                    copyBtn.addEventListener('click', function () {\r\n                        self.fallbackCopy(code);\r\n                        this.textContent = '\u2705 Copied!';\r\n                        var btn = this;\r\n                        setTimeout(function () { btn.textContent = '\ud83d\udccb Copy Code'; }, 2000);\r\n                    });\r\n                }\r\n\r\n                \/* Download button *\/\r\n                var dlBtn2 = document.getElementById(snippetId + '-dl');\r\n                if (dlBtn2) {\r\n                    dlBtn2.addEventListener('click', function () {\r\n                        var ext = snippet.type === 'php' ? 'php' : 'html';\r\n                        var blob = new Blob([code], { type: 'text\/plain' });\r\n                        var url = URL.createObjectURL(blob);\r\n                        var a = document.createElement('a');\r\n                        a.href = url;\r\n                        a.download = name + '.' + ext;\r\n                        a.click();\r\n                        URL.revokeObjectURL(url);\r\n                        self.showToast('Downloaded: ' + name + '.' + ext, 'success');\r\n                    });\r\n                }\r\n\r\n                \/* Send to minifier button *\/\r\n                var minBtn = document.getElementById(snippetId + '-minify');\r\n                if (minBtn) {\r\n                    minBtn.addEventListener('click', function () {\r\n                        var codeInput = document.getElementById('pth-min-input');\r\n                        if (codeInput) codeInput.value = code;\r\n                        self.setLang('html');\r\n                        self.setMode('minify');\r\n                        self.updateInputInfo();\r\n                        self.showToast('Code sent to Minifier!', 'success');\r\n                    });\r\n                }\r\n\r\n                \/* Show full code button *\/\r\n                var expandBtn = document.getElementById(snippetId + '-expand');\r\n                if (expandBtn) {\r\n                    expandBtn.addEventListener('click', function () {\r\n                        var preview = document.getElementById(snippetId + '-preview');\r\n                        if (preview) {\r\n                            if (preview.getAttribute('data-expanded') === 'true') {\r\n                                preview.textContent = code.substring(0, 300) + '\\n...';\r\n                                preview.removeAttribute('data-expanded');\r\n                                preview.style.maxHeight = '120px';\r\n                                this.textContent = '\ud83d\udc41 Show Full';\r\n                            } else {\r\n                                preview.textContent = code;\r\n                                preview.setAttribute('data-expanded', 'true');\r\n                                preview.style.maxHeight = '400px';\r\n                                this.textContent = '\u25b2 Collapse';\r\n                            }\r\n                        }\r\n                    });\r\n                }\r\n            });\r\n\r\n            self.showToast(count + ' snippet' + (count > 1 ? 's' : '') + ' extracted!', 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 CLEAR EXTRACTOR \u2500\u2500\u2500 *\/\r\n        clearExtractor: function () {\r\n            var jsonInput = document.getElementById('pth-json-input');\r\n            var results = document.getElementById('pth-json-results');\r\n            var errBox = document.getElementById('pth-json-error');\r\n            var dz = document.getElementById('pth-json-drop-zone');\r\n            var infoCard = document.getElementById('pth-json-info-card');\r\n\r\n            if (jsonInput) jsonInput.value = '';\r\n            if (errBox) errBox.style.display = 'none';\r\n            if (dz) { dz.classList.remove('pth-has-file'); dz.classList.remove('pth-drag-over'); }\r\n            if (infoCard) infoCard.style.display = 'none';\r\n            if (results) results.innerHTML = '<div style=\"text-align:center;color:#334155;font-size:13px;padding:20px 0;\">Paste Woody JSON above and click Extract Snippet Code<\/div>';\r\n            this.showToast('Extractor cleared!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 FULL WIDTH TOGGLE \u2500\u2500\u2500 *\/\r\n        toggleWidth: function () {\r\n            var layout  = document.getElementById('pth-minifier-layout');\r\n            var sidebar = document.getElementById('pth-minifier-sidebar');\r\n            var btn     = document.getElementById('pth-min-fw-btn');\r\n            if (!layout || !sidebar || !btn) return;\r\n            if (layout.classList.contains('pth-full-width')) {\r\n                layout.classList.remove('pth-full-width');\r\n                sidebar.style.display = '';\r\n                btn.textContent = '\\u29c6 Full Width';\r\n            } else {\r\n                layout.classList.add('pth-full-width');\r\n                sidebar.style.display = 'none';\r\n                btn.textContent = '\\u25e8 Split View';\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500 *\/\r\n        fmtBytes: function (bytes) {\r\n            if (!bytes) return '0 B';\r\n            var units = ['B', 'KB', 'MB'];\r\n            var i = Math.floor(Math.log(bytes) \/ Math.log(1024));\r\n            return parseFloat((bytes \/ Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];\r\n        },\r\n\r\n        escHtml: function (str) {\r\n            return String(str)\r\n                .replace(\/&\/g, '&amp;')\r\n                .replace(\/<\/g, '&lt;')\r\n                .replace(\/>\/g, '&gt;')\r\n                .replace(\/\"\/g, '&quot;');\r\n        },\r\n\r\n        showError: function (id, msg) {\r\n            var el = document.getElementById(id);\r\n            if (el) { el.textContent = msg; el.style.display = 'block'; }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 TOAST \u2500\u2500\u2500 *\/\r\n        showToast: function (msg, type) {\r\n            var c = document.getElementById('pth-minifier-toast');\r\n            if (!c) return;\r\n            var t = document.createElement('div');\r\n            t.className = 'pth-toast-msg pth-toast-' + (type || 'info');\r\n            t.textContent = msg;\r\n            c.appendChild(t);\r\n            setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 3500);\r\n        }\r\n    };\r\n\r\n    \/* =======================================================\r\n       BOOTSTRAP \u2014 WP\/LiteSpeed 4-layer safe init (v3.0)\r\n       ======================================================= *\/\r\n    function runInit() {\r\n        if (!window.pthMinifierApp.initialized &&\r\n            document.getElementById('pth-minifier-wrapper')) {\r\n            window.pthMinifierApp.initialized = true;\r\n            window.pthMinifierApp.init();\r\n        }\r\n    }\r\n\r\n    \/* Layer 1: Immediate *\/\r\n    runInit();\r\n\r\n    \/* Layer 2: DOMContentLoaded *\/\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', runInit);\r\n    }\r\n\r\n    \/* Layer 3: window.load + 50ms *\/\r\n    window.addEventListener('load', function () { setTimeout(runInit, 50); });\r\n\r\n    \/* Layer 4: MutationObserver *\/\r\n    if (!window.pthMinifierApp.initialized && typeof MutationObserver !== 'undefined') {\r\n        var pthObs = new MutationObserver(function () {\r\n            if (document.getElementById('pth-minifier-wrapper')) {\r\n                pthObs.disconnect(); runInit();\r\n            }\r\n        });\r\n        pthObs.observe(document.body || document.documentElement, { childList: true, subtree: true });\r\n        setTimeout(function () { pthObs.disconnect(); }, 10000);\r\n    }\r\n\r\n})();\r\n<\/script>\n\n\n\n<style>\n.pth-feature-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}\n.pth-feat-box{border:1px solid #e2e8f0;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);transition:all .3s ease}\n.pth-feat-box:hover{border-color:#bfdbfe;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.05)}\n.pth-feat-title{font-size:1.05rem;font-weight:800;color:#0f172a;margin-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-feat-text{font-size:.9rem;color:#1e293b;line-height:1.6;margin:0;font-weight:500}\n.pth-steps-wrap{border:1px solid #e2e8f0;background:#fff;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);margin-bottom:40px}\n.pth-steps-title{font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;margin-bottom:35px;letter-spacing:1px}\n.pth-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}\n.pth-step-item{display:flex;flex-direction:column;align-items:center}\n.pth-step-num{width:45px;height:45px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 4px 10px rgba(37,99,235,.3)}\n.pth-step-name{font-weight:800;color:#0f172a;margin-bottom:8px;font-size:1rem}\n.pth-step-desc{font-size:.9rem;color:#1e293b;line-height:1.5;margin:0;font-weight:500}\n<\/style>\n\n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe2 Minify + Beautify \u2014 HTML, CSS, JS, JSON<\/div>\n        <p class=\"pth-feat-text\">Four language tabs \u2014 \ud83c\udf10 HTML, \ud83c\udfa8 CSS, \u26a1 JS, \ud83d\udcc4 JSON. Switch tab, paste or upload your file, then click \ud83d\udddc\ufe0f Minify Code or \ud83e\ude84 Beautify Code. The stats bar shows original size, minified size, bytes saved, and percentage reduction. Copy Result or Download the output as a correctly named file (.html, .css, .js, .json). Everything runs in browser memory \u2014 no server, no upload.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udd35 Woody JSON Snippet Extractor<\/div>\n        <p class=\"pth-feat-text\">Switch to the \ud83d\uddc2\ufe0f Woody JSON Extractor tab. Export your snippet from Woody Snippets (Snippet Library \u2192 select \u2192 Bulk Actions \u2192 Export) and drag the .json file onto the drop zone, or paste the JSON directly. Click \ud83d\ude80 Extract Snippet Code \u2014 every snippet in the file appears as a card showing its name, type, location, scope, and priority. Each card has individual Copy Code, Download, and Send to Minifier buttons.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe3 Multi-Snippet Batch + Send to Minifier<\/div>\n        <p class=\"pth-feat-text\">Woody JSON exports containing multiple snippets show every snippet as a separate card. Each has a \ud83d\udc41 Show Full button to expand the 300-character preview to the complete code. The \u26a1 Send to Minifier button copies the extracted code directly into the Minifier tab input and switches modes \u2014 extract a snippet, minify it, and download the compressed version in three clicks without leaving the page.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use Code Minifier Pro Studio<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Choose Mode + Language<\/div>\n            <p class=\"pth-step-desc\">Click \u26a1 Minifier\/Beautifier for code processing or \ud83d\uddc2\ufe0f Woody JSON Extractor to extract snippet code. In Minifier mode, select the language tab \u2014 \ud83c\udf10 HTML, \ud83c\udfa8 CSS, \u26a1 JS, or \ud83d\udcc4 JSON \u2014 matching your file type.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Load Your Code<\/div>\n            <p class=\"pth-step-desc\">Paste code directly into the textarea, click \ud83d\udce4 Upload File to load from disk, or click \ud83d\udca1 Load Sample to see an example for the active language. The sidebar File Info panel updates live with character count and line count as you type.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Process + Copy<\/div>\n            <p class=\"pth-step-desc\">Click \ud83d\udddc\ufe0f Minify Code to strip whitespace and comments \u2014 the green stats bar shows size reduction percentage. Click \ud83e\ude84 Beautify Code to format with proper indentation. Then use \ud83d\udccb Copy Result or \ud83d\udce5 Download to save the output file.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Extract Woody JSON<\/div>\n            <p class=\"pth-step-desc\">In \ud83d\uddc2\ufe0f Woody JSON Extractor tab, drag your Woody export .json file onto the drop zone or paste JSON \u2014 click \ud83d\ude80 Extract Snippet Code. Each snippet card shows metadata badges and has Copy Code, Download, and Send to Minifier buttons for instant access.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: June 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-why-minifying-code-still-matters-for-page-speed-in-2026\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Why Minifying Code Still Matters for PageSpeed in 2026<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">PageSpeed Insights scores CSS and JavaScript file size directly in its &#8220;Minify CSS&#8221; and &#8220;Minify JavaScript&#8221; diagnostics. A 120KB unminified stylesheet with developer comments, blank lines, and multi-space indentation becomes 78KB after minification \u2014 a 35% reduction that the browser downloads faster, parses faster, and renders faster. On a 4G mobile connection at 20 Mbps, that difference is measurable in milliseconds. Across ten CSS files on a page, it compounds.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress sites face a particular challenge. LiteSpeed Cache, WP Rocket, and Autoptimize all include code minification, but they minify all enqueued scripts and stylesheets \u2014 not your Woody Snippets HTML blocks. Woody snippet content is injected directly into the page as raw HTML, bypassing the asset optimization pipeline entirely. Code inside Woody HTML type snippets is never minified by caching plugins. This tool fills that gap: paste your Woody snippet content, minify it, and paste the compressed version back. Smaller HTML in the page body reduces parse time and Total Blocking Time (TBT).<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-the-woody-json-extractor-getting-your-code-back-out-of-exports\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>The Woody JSON Extractor \u2014 Getting Your Code Back Out of Exports<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Woody Snippets stores snippet content in a WordPress database table. When you export a snippet using Woody&#8217;s built-in export function (Snippet Library \u2192 select \u2192 Bulk Actions \u2192 Export), you get a JSON file. The structure is straightforward: a&nbsp;<code>generator<\/code>&nbsp;field, a&nbsp;<code>date_created<\/code>&nbsp;timestamp, and a&nbsp;<code>snippets<\/code>&nbsp;array where each entry has&nbsp;<code>name<\/code>,&nbsp;<code>title<\/code>,&nbsp;<code>content<\/code>,&nbsp;<code>location<\/code>,&nbsp;<code>type<\/code>,&nbsp;<code>scope<\/code>, and&nbsp;<code>priority<\/code>&nbsp;fields. The actual HTML\/CSS\/JS code lives inside&nbsp;<code>content<\/code>&nbsp;as a JSON string with escaped characters \u2014&nbsp;<code>\\r\\n<\/code>&nbsp;for line endings,&nbsp;<code>\\\"<\/code>&nbsp;for quotes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The problem: opening that JSON in a text editor gives you the raw escaped string, not the formatted code. You can&#8217;t copy it directly and paste it into a new Woody snippet or read it cleanly. That&#8217;s exactly what the JSON Extractor solves. It parses the JSON, reads each snippet&#8217;s&nbsp;<code>content<\/code>&nbsp;field, unescapes the string, normalises line endings from&nbsp;<code>\\r\\n<\/code>&nbsp;to&nbsp;<code>\\n<\/code>, and presents the clean code in a readable preview panel. The sidebar automatically shows the generator version, creation date, and how many snippets were found in the file.<\/p>\n\n\n<figure class=\"pth-article-figure pth-img-left\" style=\"float:left; width:700px; max-width:100%; margin:4px 28px 16px 0; clear:left;\"><img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/code-minifier-size-comparison-800x447.jpeg\" alt=\"Code minifier size comparison showing HTML CSS JS file size before and after minification with percentage reduction stats\" width=\"700\" height=\"394\" loading=\"lazy\" data-no-lazy=\"1\" class=\"pth-article-img\" style=\"width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e8f0;\"><\/figure>\n\n\n\n<h3 id=\"\ud83d\udfe2-multi-snippet-exports-and-the-batch-workflow\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Multi-Snippet Exports and the Batch Workflow<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Woody lets you export multiple snippets in one JSON file by selecting multiple checkboxes before Export. The extractor handles this correctly \u2014 it iterates the entire&nbsp;<code>snippets<\/code>&nbsp;array and renders a separate card for each entry. Each card shows the snippet&#8217;s&nbsp;<code>type<\/code>&nbsp;badge (universal, php, css, js), the&nbsp;<code>location<\/code>&nbsp;(header, footer, shortcode), its&nbsp;<code>scope<\/code>&nbsp;(auto, everywhere), and&nbsp;<code>priority<\/code>&nbsp;number. These metadata badges are exactly what you need to recreate the snippet in a new WordPress installation \u2014 you don&#8217;t have to remember the settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Send to Minifier button on each card copies that snippet&#8217;s code into the Minifier tab input and automatically switches to the Minifier\/Beautifier mode. From there, click \ud83d\udddc\ufe0f Minify Code to compress it, then \ud83d\udccb Copy Result to copy the minified version. This full workflow \u2014 export from Woody \u2192 extract with this tool \u2192 minify \u2192 copy back into Woody \u2014 reduces snippet HTML size by 25\u201340% on average for tool snippets with heavy CSS. Use our&nbsp;Code Minifier Pro Studio&nbsp;as the final step before pasting any large snippet back into Woody to keep your page HTML lean.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35&nbsp;<strong>HTML minification<\/strong>&nbsp;strips HTML comments, collapses whitespace between tags, removes space around&nbsp;<code>=<\/code>&nbsp;in attributes. Reduces markup by 15\u201330% on typical tool snippet HTML.<\/li>\n\n\n\n<li>\ud83d\udfe0&nbsp;<strong>CSS minification<\/strong>&nbsp;removes comments, collapses property whitespace, removes redundant semicolons before closing braces. A 200-line scoped CSS block shrinks to a single line.<\/li>\n\n\n\n<li>\ud83d\udfe3&nbsp;<strong>JS minification<\/strong>&nbsp;removes single-line comments, block comments, and normalises whitespace. Does not rename variables \u2014 this is safe minification, not obfuscation.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"\ud83d\udfe1-beautify-mode-reformatting-minified-or-compressed-code\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Beautify Mode \u2014 Reformatting Minified or Compressed Code<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beautify is the reverse operation. If you inherit a minified CSS file and need to read or edit it, paste it in and click \ud83e\ude84 Beautify Code. The CSS beautifier adds line breaks after each declaration and closing brace, restores indentation inside rule blocks, and adds spaces around colons and commas. The HTML beautifier re-indents nested elements based on tag depth \u2014 void elements like&nbsp;<code>br<\/code>,&nbsp;<code>img<\/code>,&nbsp;<code>input<\/code>,&nbsp;<code>meta<\/code>, and&nbsp;<code>link<\/code>&nbsp;don&#8217;t increase indent depth. The JSON beautifier uses&nbsp;<code>JSON.parse()<\/code>&nbsp;followed by&nbsp;<code>JSON.stringify(null, 2)<\/code>&nbsp;\u2014 this also validates the JSON structure and will throw a parse error if the input is malformed, surfacing syntax issues before they cause problems in production.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The JS beautifier handles brace-based indentation \u2014 it tracks opening and closing curly braces to set the indent level. This works correctly for standard function definitions and object literals but won&#8217;t correctly indent arrow functions with implicit returns or complex ternary chains across multiple lines. For those cases, use the&nbsp;<a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/debugger\/how_to\/pretty-print_a_minified_file\/index.html\" rel=\"noreferrer noopener\" target=\"_blank\">browser DevTools pretty-print feature<\/a>&nbsp;which uses a full AST-aware formatter. This tool&#8217;s beautifier is designed for quick readability passes \u2014 not as a replacement for a full language server formatter.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-file-upload-download-and-the-send-to-extractor-button\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>File Upload, Download, and the Send to Extractor Button<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The \ud83d\udce4 Upload File button accepts files matching the active language tab \u2014&nbsp;<code>.html\/.htm<\/code>&nbsp;for HTML,&nbsp;<code>.css<\/code>&nbsp;for CSS,&nbsp;<code>.js<\/code>&nbsp;for JavaScript,&nbsp;<code>.json<\/code>&nbsp;for JSON. The file is read using the FileReader API entirely in the browser. Output downloads use a Blob URL \u2014 the file is named&nbsp;<code>pth-minified-[timestamp].html<\/code>&nbsp;(or the matching extension) and downloaded directly without any server request.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The \ud83d\uddc2\ufe0f Send to Extractor button sends the current output from the Minifier to the JSON Extractor textarea and switches to the Extractor tab. This is useful when you&#8217;ve minified a JSON file and want to inspect its structure or extract embedded snippet content. The reverse path \u2014 \u26a1 Send to Minifier from an extracted snippet card \u2014 does the same in the other direction. Both directions are one-click, zero copy-paste. You can also read more about WordPress code optimisation workflows in our&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/minify-html-css-and-javascript-guide\/\">WordPress Performance Guide<\/a>.<\/p>\n\n\n\n<style>\n.pth-faq-section {\n    margin-top: 50px;\n    margin-bottom: 40px;\n    font-family: inherit;\n}\n\n.pth-faq-header {\n    font-size: 1.8rem;\n    font-weight: 800;\n    color: #0f172a;\n    margin-bottom: 25px;\n    border-bottom: 2px solid #e2e8f0;\n    padding-bottom: 10px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.pth-faq-grid {\n    display: grid;\n    grid-template-columns: 100%;\n    gap: 20px;\n}\n\n@media (min-width: 768px) {\n    .pth-faq-grid {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media (min-width: 1024px) {\n    .pth-faq-grid {\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n\n.pth-faq-card {\n    background: #f8fafc;\n    padding: 24px;\n    border-radius: 12px;\n    border: 1px solid #e2e8f0;\n    transition: transform 0.2s ease;\n    break-inside: avoid;\n}\n\n.pth-faq-card:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n}\n\n.pth-faq-q {\n    color: #0f172a;\n    font-size: 1rem;\n    font-weight: 700;\n    margin: 0 0 12px;\n    line-height: 1.4;\n}\n\n.pth-faq-a {\n    margin: 0;\n    font-size: 0.95rem;\n    color: #1e293b;\n    line-height: 1.6;\n    font-weight: 500;\n}\n<\/style>\n\n<div class=\"pth-faq-section\">\n    <div class=\"pth-faq-header\">\ud83e\udd14 Frequently Asked Questions<\/div>\n    <div class=\"pth-faq-grid\">\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Does the JS minifier rename variables or obfuscate code?<\/p>\n            <p class=\"pth-faq-a\">No. This tool performs safe whitespace and comment removal only \u2014 variable names, function names, and string values are left unchanged. It is not a JavaScript obfuscator. The output is functionally identical to the input and fully readable if you reverse the minification with the Beautify button.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does my JSON fail to parse in the Beautify mode?<\/p>\n            <p class=\"pth-faq-a\">The JSON tab uses native <code>JSON.parse()<\/code> which is strict \u2014 trailing commas, single-quoted strings, and JavaScript comments inside JSON all cause parse failures. These are valid JavaScript but invalid JSON. Fix the syntax error first (remove trailing commas, replace single quotes with double quotes) then re-run Beautify. The error message identifies the position of the syntax problem.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">How do I export a snippet from Woody Snippets for use in the JSON Extractor?<\/p>\n            <p class=\"pth-faq-a\">Go to Woody Snippets \u2192 Snippet Library. Tick the checkbox next to the snippet(s) you want to export. Open the Bulk Actions dropdown and select Export. WordPress downloads a .json file to your computer. Upload that file to the drop zone or paste its content into the JSON textarea, then click Extract Snippet Code.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I extract PHP-type Woody snippets with this tool?<\/p>\n            <p class=\"pth-faq-a\">Yes. PHP-type snippets appear as cards with a &#8220;php&#8221; type badge. The extracted content is the raw PHP code from the <code>content<\/code> field. The Download button saves it as a <code>.php<\/code> file. You can copy it and paste directly into a new Woody PHP snippet \u2014 remember not to add the opening <code>&lt;?php<\/code> tag since Woody&#8217;s PHP field already runs inside a PHP context.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does my minified HTML sometimes break the page layout?<\/p>\n            <p class=\"pth-faq-a\">Aggressive whitespace removal can collapse space between inline elements \u2014 for example, two <code>span<\/code> tags with a space between them will lose that space after minification. This is a known HTML minification trade-off. If layout breaks, use Beautify to restore the code, then manually collapse only the CSS and JS sections while leaving the HTML structure with single spaces between inline elements.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Does minifying Woody snippet code actually improve PageSpeed scores?<\/p>\n            <p class=\"pth-faq-a\">Yes, indirectly. Woody snippet HTML is injected directly into the page body and bypasses WordPress caching plugin minification. Reducing snippet size shrinks total HTML payload, which reduces Time to First Byte (TTFB) for the document and improves Total Blocking Time (TBT) by reducing HTML parse time. The improvement is most noticeable on tool snippets with 200+ lines of inline CSS.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What happens to the file after I upload it?<\/p>\n            <p class=\"pth-faq-a\">The file is read using the browser&#8217;s FileReader API entirely in memory. Nothing is sent to a server. The content goes directly into the textarea input field. Closing or refreshing the tab clears all data \u2014 no file content is stored in localStorage, sessionStorage, or any persistent browser storage.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I minify and then extract \u2014 or extract and then minify in one flow?<\/p>\n            <p class=\"pth-faq-a\">Yes \u2014 that&#8217;s exactly what the cross-tab buttons are for. Use \ud83d\uddc2\ufe0f Send to Extractor from the Minifier output to send minified JSON to the extractor. Use \u26a1 Send to Minifier from an extracted snippet card to send that snippet&#8217;s code directly to the Minifier input. Both operations switch tabs automatically \u2014 no copy-paste between them needed.<\/p>\n        <\/div>\n\n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Is there a file size limit for uploads?<\/p>\n            <p class=\"pth-faq-a\">No hard limit is set \u2014 the browser&#8217;s FileReader API handles files up to the available RAM. Practically, files over 5MB are unusual for HTML\/CSS\/JS snippets. Very large files (10MB+) may cause the browser tab to pause briefly during processing since all operations happen synchronously in the main thread. For files that large, consider splitting them before minifying.<\/p>\n        <\/div>\n\n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Code Minifier &#8211; Offline Tool Compress and minify your HTML, CSS, and JavaScript code instantly with our 100% offline Code Minifier. Reduce file size and boost page speed securely. \ud83d\udfe2 Minify + Beautify \u2014 HTML, CSS, JS, JSON Four language tabs \u2014 \ud83c\udf10 HTML, \ud83c\udfa8 CSS, \u26a1 JS, \ud83d\udcc4 JSON. Switch tab, paste or upload &#8230; <a title=\"Free HTML, CSS &amp; JS Code Minifier &#8211; Offline Tool\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/html-css-js-code-minifier-pro\/\" aria-label=\"Read more about Free HTML, CSS &amp; JS Code Minifier &#8211; Offline Tool\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2262,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2257","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/2257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=2257"}],"version-history":[{"count":0,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/2257\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/2262"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=2257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}