{"id":34335,"date":"2026-03-01T16:49:44","date_gmt":"2026-03-01T15:49:44","guid":{"rendered":"https:\/\/www.hakoit.com\/?page_id=34335"},"modified":"2026-05-23T21:44:16","modified_gmt":"2026-05-23T19:44:16","slug":"json-formatter-modern-pretty-json","status":"publish","type":"page","link":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/","title":{"rendered":"\u27ad JSON Formatter &#038; Beautifier \u2014 Pretty Print JSON &#038; Minify Online"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb da_disable_devices=\u00bboff|off|off\u00bb global_colors_info=\u00bb{}\u00bb da_is_popup=\u00bboff\u00bb da_exit_intent=\u00bboff\u00bb da_has_close=\u00bbon\u00bb da_alt_close=\u00bboff\u00bb da_dark_close=\u00bboff\u00bb da_not_modal=\u00bbon\u00bb da_is_singular=\u00bboff\u00bb da_with_loader=\u00bboff\u00bb da_has_shadow=\u00bbon\u00bb][et_pb_row _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_post_title meta=\u00bboff\u00bb _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_post_title][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>Free JSON Formatter Online<\/strong> \u2014 paste or drag and drop any JSON to instantly pretty print it with color syntax highlighting. Use the <strong>Minify<\/strong> button to compress JSON to a single line, or switch to <strong>Tree View<\/strong> to explore nested objects and arrays interactively. Sort keys alphabetically, download as <strong>.json<\/strong> or convert arrays to <strong>CSV<\/strong>, and toggle dark mode for comfortable use at night. Works as a <strong>JSON beautifier, JSON validator, and JSON viewer<\/strong> \u2014 all in one free tool.<\/p>\n<blockquote>\n<p><strong>Modern JSON Formatter &amp; Highlighter<\/strong> is a powerful web-based tool designed to make working with <strong>JSON data<\/strong> <strong>fast, simple, and visually clear<\/strong>. Whether you&#8217;re a <strong>developer, data analyst, or student<\/strong> working with <strong>APIs<\/strong> or other JSON data sources, this tool allows you to <strong>format, validate, and download JSON<\/strong> <em>quickly<\/em> and <em>easily<\/em>.<\/p>\n<\/blockquote>\n<p>[\/et_pb_text][et_pb_code disabled_on=\u00bbon|on|on\u00bb _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"json-container\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<h2>JSON Formatter with Color<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <textarea id=\"jsonInput\" placeholder=\"Enter JSON here...\" class=\"json-input\"><\/textarea><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"options\"><!-- [et_pb_line_break_holder] -->        <label for=\"indentation\">Indentation:<\/label><!-- [et_pb_line_break_holder] -->        <select id=\"indentation\" class=\"indentation-select\"><!-- [et_pb_line_break_holder] --><option value=\"2\">2 spaces<\/option><!-- [et_pb_line_break_holder] --><option value=\"3\">3 spaces<\/option><!-- [et_pb_line_break_holder] -->        <\/select><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <button id=\"formatJsonButton\" class=\"format-btn\">Format JSON<\/button><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <!-- Additional Buttons - Initially Hidden --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"actionButtons\" class=\"action-buttons\" style=\"display: none;\"><!-- [et_pb_line_break_holder] -->        <button id=\"copyToClipboard\" class=\"action-btn\">Copy to Clipboard<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"clearJsonButton\" class=\"action-btn\">Clear<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"downloadJsonButton\" class=\"action-btn\">Download as TXT<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- JSON output - Hidden Initially --><!-- [et_pb_line_break_holder] -->    <\/p>\n<pre id=\"jsonOutput\" class=\"json-output\" style=\"display: none;\"><\/pre>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  .json-container {<!-- [et_pb_line_break_holder] -->    max-width: 600px;<!-- [et_pb_line_break_holder] -->    margin: 0 auto;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    font-family: 'Arial', sans-serif;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->h2 {<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    font-size: 24px;<!-- [et_pb_line_break_holder] -->    color: #333;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-input {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: 150px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 20px;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    resize: none;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-output {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: auto;<!-- [et_pb_line_break_holder] -->    max-height: 400px;<!-- [et_pb_line_break_holder] -->    margin-top: 20px;<!-- [et_pb_line_break_holder] -->    padding: 15px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    background-color: #f9f9f9;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    overflow: auto;<!-- [et_pb_line_break_holder] -->    white-space: pre-wrap;<!-- [et_pb_line_break_holder] -->    word-wrap: break-word;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-output span {<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-key {<!-- [et_pb_line_break_holder] -->    color: #d6336c;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-string {<!-- [et_pb_line_break_holder] -->    color: #0073e6;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-number {<!-- [et_pb_line_break_holder] -->    color: #28a745;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-boolean {<!-- [et_pb_line_break_holder] -->    color: #ff9900;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-null {<!-- [et_pb_line_break_holder] -->    color: #e36209;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-error {<!-- [et_pb_line_break_holder] -->    color: red;<!-- [et_pb_line_break_holder] -->    font-weight: bold;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.format-btn {<!-- [et_pb_line_break_holder] -->    display: block;<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    background-color: #742774;<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.3s ease;<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.format-btn:hover {<!-- [et_pb_line_break_holder] -->    background-color: #5D1C6D;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Action Buttons for copy, clear, and download *\/<!-- [et_pb_line_break_holder] -->.action-buttons {<!-- [et_pb_line_break_holder] -->    margin-top: 20px;<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    justify-content: space-between;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.action-btn {<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    background-color: #6E2EBD;<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.action-btn:hover {<!-- [et_pb_line_break_holder] -->    background-color: #562494;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#clearJsonButton {<!-- [et_pb_line_break_holder] -->    background-color: #5D1C6D;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#clearJsonButton:hover {<!-- [et_pb_line_break_holder] -->    background-color: #4A1658;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#downloadJsonButton {<!-- [et_pb_line_break_holder] -->    background-color: #6B25A9;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#downloadJsonButton:hover {<!-- [et_pb_line_break_holder] -->    background-color: #551B84;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    document.getElementById('formatJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const jsonInput = document.getElementById('jsonInput').value;<!-- [et_pb_line_break_holder] -->        const indentation = document.getElementById('indentation').value;<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const actionButtons = document.getElementById('actionButtons');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            const jsonParsed = JSON.parse(jsonInput);<!-- [et_pb_line_break_holder] -->            const prettyJson = JSON.stringify(jsonParsed, null, parseInt(indentation));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Use a custom function to highlight the JSON output.<!-- [et_pb_line_break_holder] -->            const highlightedJson = syntaxHighlight(prettyJson);<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = highlightedJson;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Show the action buttons and the JSON output area after JSON formatting<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'flex';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->        } catch (e) {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = \"<span class='json-error'>Invalid JSON!<\/span>\";<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'none'; \/\/ Hide buttons if there's an error<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'none'; \/\/ Hide output area if there's an error<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to add syntax highlighting to JSON<!-- [et_pb_line_break_holder] -->    function syntaxHighlight(json) {<!-- [et_pb_line_break_holder] -->        json = json.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>');<!-- [et_pb_line_break_holder] -->        return json.replace(\/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|\\b-?\\d+(\\.\\d+)?([eE][+-]?\\d+)?\\b)\/g, function (match) {<!-- [et_pb_line_break_holder] -->            let cls = 'json-number';<!-- [et_pb_line_break_holder] -->            if (\/^\"\/.test(match)) {<!-- [et_pb_line_break_holder] -->                if (\/:$\/.test(match)) {<!-- [et_pb_line_break_holder] -->                    cls = 'json-key';<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    cls = 'json-string';<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            } else if (\/true|false\/.test(match)) {<!-- [et_pb_line_break_holder] -->                cls = 'json-boolean';<!-- [et_pb_line_break_holder] -->            } else if (\/null\/.test(match)) {<!-- [et_pb_line_break_holder] -->                cls = 'json-null';<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return '<span class=\"' + cls + '\">' + match + '<\/span>';<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Copy to Clipboard functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('copyToClipboard').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const textToCopy = outputArea.innerText; \/\/ Use innerText to copy plain text<!-- [et_pb_line_break_holder] -->        if (!textToCopy) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        navigator.clipboard.writeText(textToCopy)<!-- [et_pb_line_break_holder] -->            .then(() => alert(\"Copied to clipboard!\"))<!-- [et_pb_line_break_holder] -->            .catch(() => alert(\"Failed to copy!\"));<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Clear button functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('clearJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonInput').value = \"\";<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonOutput').innerHTML = \"\";<!-- [et_pb_line_break_holder] -->        document.getElementById('actionButtons').style.display = 'none'; \/\/ Hide buttons when cleared<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonOutput').style.display = 'none'; \/\/ Hide output when cleared<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Download as TXT functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('downloadJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const textToDownload = outputArea.innerText;<!-- [et_pb_line_break_holder] -->        if (!textToDownload) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const blob = new Blob([textToDownload], { type: 'text\/plain' });<!-- [et_pb_line_break_holder] -->        const link = document.createElement('a');<!-- [et_pb_line_break_holder] -->        link.href = URL.createObjectURL(blob);<!-- [et_pb_line_break_holder] -->        link.download = 'formatted_json.txt';<!-- [et_pb_line_break_holder] -->        link.click();<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbcode v2&#8243; _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"json-container\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<h2>JSON Formatter with Color<\/h2>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"jsonStats\" style=\" color:#666; margin-bottom:5px;\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->    <textarea id=\"jsonInput\" aria-label=\"JSON input area\" role=\"textbox\" placeholder=\"Enter JSON here...\" class=\"json-input\"><\/textarea><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"options\"><!-- [et_pb_line_break_holder] -->        <label for=\"indentation\">Indentation:<\/label><!-- [et_pb_line_break_holder] -->        <select id=\"indentation\" class=\"indentation-select\"><!-- [et_pb_line_break_holder] --><option value=\"2\">2 spaces<\/option><!-- [et_pb_line_break_holder] --><option value=\"3\">3 spaces<\/option><!-- [et_pb_line_break_holder] -->        <\/select><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <button id=\"formatJsonButton\" aria-label=\"Format JSON\" class=\"format-btn\">Format JSON<\/button><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <!-- Additional Buttons - Initially Hidden --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"actionButtons\" class=\"action-buttons\" style=\"display: none;\"><!-- [et_pb_line_break_holder] -->        <button id=\"copyToClipboard\" class=\"action-btn\">Copy to Clipboard<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"clearJsonButton\" class=\"action-btn\">Clear<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"downloadJsonButton\" class=\"action-btn\">Download as TXT<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- JSON output - Hidden Initially --><!-- [et_pb_line_break_holder] -->    <\/p>\n<pre id=\"jsonOutput\" class=\"json-output\" style=\"display: none;\"><\/pre>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  .json-container {<!-- [et_pb_line_break_holder] -->    max-width: 600px;<!-- [et_pb_line_break_holder] -->    margin: 0 auto;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    font-family: 'Arial', sans-serif;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->h2 {<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    font-size: 24px;<!-- [et_pb_line_break_holder] -->    color: #333;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-input {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: 150px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 20px;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    resize: none;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-output {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: auto;<!-- [et_pb_line_break_holder] -->    max-height: 400px;<!-- [et_pb_line_break_holder] -->    margin-top: 20px;<!-- [et_pb_line_break_holder] -->    padding: 15px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    background-color: #f9f9f9;<!-- [et_pb_line_break_holder] -->    border: 1px solid #ccc;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    overflow: auto;<!-- [et_pb_line_break_holder] -->    white-space: pre-wrap;<!-- [et_pb_line_break_holder] -->    word-wrap: break-word;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-output span {<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-key {<!-- [et_pb_line_break_holder] -->    color: #d6336c;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-string {<!-- [et_pb_line_break_holder] -->    color: #0073e6;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-number {<!-- [et_pb_line_break_holder] -->    color: #28a745;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-boolean {<!-- [et_pb_line_break_holder] -->    color: #ff9900;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-null {<!-- [et_pb_line_break_holder] -->    color: #e36209;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.json-error {<!-- [et_pb_line_break_holder] -->    color: red;<!-- [et_pb_line_break_holder] -->    font-weight: bold;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.format-btn {<!-- [et_pb_line_break_holder] -->    display: block;<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    background-color: #742774;<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.3s ease;<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.format-btn:hover {<!-- [et_pb_line_break_holder] -->    background-color: #5D1C6D;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Action Buttons for copy, clear, and download *\/<!-- [et_pb_line_break_holder] -->.action-buttons {<!-- [et_pb_line_break_holder] -->    margin-top: 20px;<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    justify-content: space-between;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.action-btn {<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    background-color: #6E2EBD;<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.3s ease;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.action-btn:hover {<!-- [et_pb_line_break_holder] -->    background-color: #562494;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#clearJsonButton {<!-- [et_pb_line_break_holder] -->    background-color: #5D1C6D;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#clearJsonButton:hover {<!-- [et_pb_line_break_holder] -->    background-color: #4A1658;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#downloadJsonButton {<!-- [et_pb_line_break_holder] -->    background-color: #6B25A9;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#downloadJsonButton:hover {<!-- [et_pb_line_break_holder] -->    background-color: #551B84;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    document.getElementById('jsonInput').addEventListener('input', function() {<!-- [et_pb_line_break_holder] -->    const val = this.value;<!-- [et_pb_line_break_holder] -->    const lines = val.split('\\n').length;<!-- [et_pb_line_break_holder] -->    const chars = val.length;<!-- [et_pb_line_break_holder] -->    document.getElementById('jsonStats').textContent = `Lines: ${lines} | Characters: ${chars}`;<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->    document.getElementById('formatJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const jsonInput = document.getElementById('jsonInput').value;<!-- [et_pb_line_break_holder] -->        const indentation = document.getElementById('indentation').value;<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const actionButtons = document.getElementById('actionButtons');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            const jsonParsed = JSON.parse(jsonInput);<!-- [et_pb_line_break_holder] -->            const prettyJson = JSON.stringify(jsonParsed, null, parseInt(indentation));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Use a custom function to highlight the JSON output.<!-- [et_pb_line_break_holder] -->            const highlightedJson = syntaxHighlight(prettyJson);<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = highlightedJson;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Show the action buttons and the JSON output area after JSON formatting<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'flex';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->        } <!-- [et_pb_line_break_holder] -->        catch (e) {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = `<span class='json-error'>Invalid JSON: ${e.message}<\/span>`;<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'none';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block'; \/\/ Mostrar error<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Function to add syntax highlighting to JSON<!-- [et_pb_line_break_holder] -->    function syntaxHighlight(json) {<!-- [et_pb_line_break_holder] -->        json = json.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>');<!-- [et_pb_line_break_holder] -->        return json.replace(\/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|\\b-?\\d+(\\.\\d+)?([eE][+-]?\\d+)?\\b)\/g, function (match) {<!-- [et_pb_line_break_holder] -->            let cls = 'json-number';<!-- [et_pb_line_break_holder] -->            if (\/^\"\/.test(match)) {<!-- [et_pb_line_break_holder] -->                if (\/:$\/.test(match)) {<!-- [et_pb_line_break_holder] -->                    cls = 'json-key';<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    cls = 'json-string';<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            } else if (\/true|false\/.test(match)) {<!-- [et_pb_line_break_holder] -->                cls = 'json-boolean';<!-- [et_pb_line_break_holder] -->            } else if (\/null\/.test(match)) {<!-- [et_pb_line_break_holder] -->                cls = 'json-null';<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            return '<span class=\"' + cls + '\">' + match + '<\/span>';<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Copy to Clipboard functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('copyToClipboard').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const textToCopy = outputArea.innerText; \/\/ Use innerText to copy plain text<!-- [et_pb_line_break_holder] -->        if (!textToCopy) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        navigator.clipboard.writeText(textToCopy)<!-- [et_pb_line_break_holder] -->            .then(() => alert(\"Copied to clipboard!\"))<!-- [et_pb_line_break_holder] -->            .catch(() => alert(\"Failed to copy!\"));<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Clear button functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('clearJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonInput').value = \"\";<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonOutput').innerHTML = \"\";<!-- [et_pb_line_break_holder] -->        document.getElementById('actionButtons').style.display = 'none'; \/\/ Hide buttons when cleared<!-- [et_pb_line_break_holder] -->        document.getElementById('jsonOutput').style.display = 'none'; \/\/ Hide output when cleared<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Download as TXT functionality<!-- [et_pb_line_break_holder] -->    document.getElementById('downloadJsonButton').addEventListener('click', function() {<!-- [et_pb_line_break_holder] -->        const outputArea = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->        const textToDownload = outputArea.innerText;<!-- [et_pb_line_break_holder] -->        if (!textToDownload) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const blob = new Blob([textToDownload], { type: 'text\/plain' });<!-- [et_pb_line_break_holder] -->        const link = document.createElement('a');<!-- [et_pb_line_break_holder] -->        link.href = URL.createObjectURL(blob);<!-- [et_pb_line_break_holder] -->        link.download = 'formatted_json.txt';<!-- [et_pb_line_break_holder] -->        link.click();<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code disabled_on=\u00bboff|off|off\u00bb admin_label=\u00bbcode v4&#8243; _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<div class=\"json-container\" id=\"jsonContainer\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"json-header\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<h2 class=\"json-title\">JSON Formatter with Color<\/h2>\n<p><!-- [et_pb_line_break_holder] -->        <button id=\"darkModeToggle\" class=\"dark-toggle-btn\" title=\"Toggle dark mode\">\ud83c\udf19<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"jsonStats\" class=\"json-stats-bar\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"dropZone\" class=\"drop-zone\"><!-- [et_pb_line_break_holder] -->        <span id=\"pjDropText\">Drag &#038; drop a .json file, or<\/span> <span class=\"file-browse-label\" id=\"pjBrowse\">browse<\/span><!-- [et_pb_line_break_holder] -->        <input type=\"file\" id=\"fileInput\" accept=\".json,application\/json\" style=\"display:none\"><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <textarea id=\"jsonInput\" aria-label=\"JSON input area\" role=\"textbox\" placeholder=\"Paste or type JSON here...\" class=\"json-input\"><\/textarea><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"options-row\"><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"opt\"><!-- [et_pb_line_break_holder] -->            <label for=\"indentation\" id=\"pjIndentLbl\">Indent:<\/label><!-- [et_pb_line_break_holder] -->            <select id=\"indentation\" class=\"indentation-select\"><!-- [et_pb_line_break_holder] --><option value=\"2\">2 spaces<\/option><!-- [et_pb_line_break_holder] --><option value=\"3\">3 spaces<\/option><!-- [et_pb_line_break_holder] --><option value=\"4\">4 spaces<\/option><!-- [et_pb_line_break_holder] --><option value=\"tab\">Tab<\/option><!-- [et_pb_line_break_holder] -->            <\/select><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->        <label class=\"opt\"><!-- [et_pb_line_break_holder] -->            <input type=\"checkbox\" id=\"sortKeys\"> <span id=\"pjSortLbl\">Sort keys A\u2192Z<\/span><!-- [et_pb_line_break_holder] -->        <\/label><!-- [et_pb_line_break_holder] -->        <label class=\"opt\"><!-- [et_pb_line_break_holder] -->            <input type=\"checkbox\" id=\"autoFormat\" checked> <span id=\"pjAutoLbl\">Auto-format on paste<\/span><!-- [et_pb_line_break_holder] -->        <\/label><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div class=\"main-btns\"><!-- [et_pb_line_break_holder] -->        <button id=\"formatJsonButton\" class=\"format-btn\">Format JSON<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"minifyJsonButton\" class=\"minify-btn\">Minify<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"actionButtons\" class=\"action-buttons\" style=\"display:none\"><!-- [et_pb_line_break_holder] -->        <button id=\"copyToClipboard\" class=\"action-btn\">Copy<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"clearJsonButton\" class=\"action-btn clear-btn\">Clear<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"downloadJsonButton\" class=\"action-btn\">Download .json<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"downloadCsvButton\" class=\"action-btn\" style=\"display:none\">Download CSV<\/button><!-- [et_pb_line_break_holder] -->        <button id=\"toggleTreeView\" class=\"action-btn\">Tree View<\/button><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <\/p>\n<pre id=\"jsonOutput\" class=\"json-output\" style=\"display:none\"><\/pre>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"treeOutput\" class=\"tree-output\" style=\"display:none\"><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->.json-container {<!-- [et_pb_line_break_holder] -->    --jbg: #fff;<!-- [et_pb_line_break_holder] -->    --jbg2: #f5f5f5;<!-- [et_pb_line_break_holder] -->    --jtxt: #333;<!-- [et_pb_line_break_holder] -->    --jmuted: #666;<!-- [et_pb_line_break_holder] -->    --jborder: #ccc;<!-- [et_pb_line_break_holder] -->    --jacc: #742774;<!-- [et_pb_line_break_holder] -->    --jacc2: #5D1C6D;<!-- [et_pb_line_break_holder] -->    --jbtn: #6E2EBD;<!-- [et_pb_line_break_holder] -->    --jbtn2: #562494;<!-- [et_pb_line_break_holder] -->    --jsh: rgba(0,0,0,0.08);<!-- [et_pb_line_break_holder] -->    max-width: 700px;<!-- [et_pb_line_break_holder] -->    margin: 0 auto;<!-- [et_pb_line_break_holder] -->    padding: 20px;<!-- [et_pb_line_break_holder] -->    font-family: Arial, sans-serif;<!-- [et_pb_line_break_holder] -->    background: var(--jbg);<!-- [et_pb_line_break_holder] -->    border-radius: 8px;<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container.jdark {<!-- [et_pb_line_break_holder] -->    --jbg: #1e1e2e;<!-- [et_pb_line_break_holder] -->    --jbg2: #2a2a3d;<!-- [et_pb_line_break_holder] -->    --jtxt: #cdd6f4;<!-- [et_pb_line_break_holder] -->    --jmuted: #a6adc8;<!-- [et_pb_line_break_holder] -->    --jborder: #45475a;<!-- [et_pb_line_break_holder] -->    --jacc: #cba6f7;<!-- [et_pb_line_break_holder] -->    --jacc2: #b4befe;<!-- [et_pb_line_break_holder] -->    --jbtn: #89b4fa;<!-- [et_pb_line_break_holder] -->    --jbtn2: #74c7ec;<!-- [et_pb_line_break_holder] -->    --jsh: rgba(0,0,0,0.3);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .json-header {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    justify-content: space-between;<!-- [et_pb_line_break_holder] -->    margin-bottom: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .json-title {<!-- [et_pb_line_break_holder] -->    font-size: 24px;<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->    margin: 0;<!-- [et_pb_line_break_holder] -->    text-align: left;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .dark-toggle-btn {<!-- [et_pb_line_break_holder] -->    background: none;<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->    border-radius: 6px;<!-- [et_pb_line_break_holder] -->    padding: 5px 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background 0.2s;<!-- [et_pb_line_break_holder] -->    line-height: 1;<!-- [et_pb_line_break_holder] -->    color: inherit;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .dark-toggle-btn:hover { background: var(--jbg2); }<!-- [et_pb_line_break_holder] -->.json-container .json-stats-bar {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->    gap: 5px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 8px;<!-- [et_pb_line_break_holder] -->    min-height: 22px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .json-stats-bar span {<!-- [et_pb_line_break_holder] -->    background: var(--jbg2);<!-- [et_pb_line_break_holder] -->    color: var(--jmuted);<!-- [et_pb_line_break_holder] -->    font-size: 11px;<!-- [et_pb_line_break_holder] -->    padding: 2px 8px;<!-- [et_pb_line_break_holder] -->    border-radius: 10px;<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .drop-zone {<!-- [et_pb_line_break_holder] -->    border: 2px dashed var(--jborder);<!-- [et_pb_line_break_holder] -->    border-radius: 6px;<!-- [et_pb_line_break_holder] -->    padding: 8px 14px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 10px;<!-- [et_pb_line_break_holder] -->    text-align: center;<!-- [et_pb_line_break_holder] -->    font-size: 13px;<!-- [et_pb_line_break_holder] -->    color: var(--jmuted);<!-- [et_pb_line_break_holder] -->    transition: border-color 0.2s, background 0.2s;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    user-select: none;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .drop-zone.drag-over {<!-- [et_pb_line_break_holder] -->    border-color: var(--jacc);<!-- [et_pb_line_break_holder] -->    background: var(--jbg2);<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .file-browse-label {<!-- [et_pb_line_break_holder] -->    color: var(--jacc);<!-- [et_pb_line_break_holder] -->    text-decoration: underline;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .json-input {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: 160px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 12px;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    resize: vertical;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0 2px 5px var(--jsh);<!-- [et_pb_line_break_holder] -->    background: var(--jbg);<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->    display: block;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .options-row {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    gap: 14px;<!-- [et_pb_line_break_holder] -->    flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->    margin-bottom: 12px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .opt {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: center;<!-- [et_pb_line_break_holder] -->    gap: 5px;<!-- [et_pb_line_break_holder] -->    cursor: default;<!-- [et_pb_line_break_holder] -->    white-space: nowrap;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .opt input[type=\"checkbox\"] { cursor: pointer; }<!-- [et_pb_line_break_holder] -->.json-container .indentation-select {<!-- [et_pb_line_break_holder] -->    padding: 3px 6px;<!-- [et_pb_line_break_holder] -->    border-radius: 4px;<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->    font-size: 13px;<!-- [et_pb_line_break_holder] -->    background: var(--jbg);<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .main-btns {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    gap: 10px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 12px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .format-btn {<!-- [et_pb_line_break_holder] -->    flex: 1;<!-- [et_pb_line_break_holder] -->    padding: 10px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    background-color: var(--jacc);<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .format-btn:hover { background-color: var(--jacc2); }<!-- [et_pb_line_break_holder] -->.json-container .minify-btn {<!-- [et_pb_line_break_holder] -->    padding: 10px 20px;<!-- [et_pb_line_break_holder] -->    font-size: 16px;<!-- [et_pb_line_break_holder] -->    background-color: var(--jbtn);<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .minify-btn:hover { background-color: var(--jbtn2); }<!-- [et_pb_line_break_holder] -->.json-container .action-buttons {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    flex-wrap: wrap;<!-- [et_pb_line_break_holder] -->    gap: 8px;<!-- [et_pb_line_break_holder] -->    margin-bottom: 12px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .action-btn {<!-- [et_pb_line_break_holder] -->    padding: 7px 13px;<!-- [et_pb_line_break_holder] -->    font-size: 13px;<!-- [et_pb_line_break_holder] -->    background-color: var(--jbtn);<!-- [et_pb_line_break_holder] -->    color: #fff;<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    transition: background-color 0.2s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .action-btn:hover { background-color: var(--jbtn2); }<!-- [et_pb_line_break_holder] -->.json-container .clear-btn { background-color: var(--jacc2); }<!-- [et_pb_line_break_holder] -->.json-container .clear-btn:hover { background-color: var(--jacc); }<!-- [et_pb_line_break_holder] -->.json-container .json-output {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    max-height: 450px;<!-- [et_pb_line_break_holder] -->    padding: 15px;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    background-color: var(--jbg2);<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    overflow: auto;<!-- [et_pb_line_break_holder] -->    white-space: pre-wrap;<!-- [et_pb_line_break_holder] -->    word-wrap: break-word;<!-- [et_pb_line_break_holder] -->    box-shadow: inset 0 2px 5px var(--jsh);<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->    margin: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .tree-output {<!-- [et_pb_line_break_holder] -->    max-height: 450px;<!-- [et_pb_line_break_holder] -->    overflow: auto;<!-- [et_pb_line_break_holder] -->    background: var(--jbg2);<!-- [et_pb_line_break_holder] -->    border: 1px solid var(--jborder);<!-- [et_pb_line_break_holder] -->    border-radius: 5px;<!-- [et_pb_line_break_holder] -->    padding: 12px;<!-- [et_pb_line_break_holder] -->    font-family: monospace;<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    box-sizing: border-box;<!-- [et_pb_line_break_holder] -->    color: var(--jtxt);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .tree-node { margin: 1px 0; }<!-- [et_pb_line_break_holder] -->.json-container .tree-header {<!-- [et_pb_line_break_holder] -->    display: flex;<!-- [et_pb_line_break_holder] -->    align-items: baseline;<!-- [et_pb_line_break_holder] -->    gap: 2px;<!-- [et_pb_line_break_holder] -->    padding: 1px 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .tree-toggle {<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    user-select: none;<!-- [et_pb_line_break_holder] -->    font-size: 9px;<!-- [et_pb_line_break_holder] -->    color: var(--jmuted);<!-- [et_pb_line_break_holder] -->    min-width: 14px;<!-- [et_pb_line_break_holder] -->    flex-shrink: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.json-container .tree-toggle:hover { color: var(--jtxt); }<!-- [et_pb_line_break_holder] -->.json-container .tree-children { padding-left: 18px; }<!-- [et_pb_line_break_holder] -->.json-container .tree-close { padding: 1px 0; }<!-- [et_pb_line_break_holder] -->.json-container .tree-leaf { padding: 1px 0 1px 16px; }<!-- [et_pb_line_break_holder] -->.json-container .t-key { color: #d6336c; }<!-- [et_pb_line_break_holder] -->.json-container .t-string { color: #0073e6; }<!-- [et_pb_line_break_holder] -->.json-container .t-number { color: #28a745; }<!-- [et_pb_line_break_holder] -->.json-container .t-boolean { color: #ff9900; }<!-- [et_pb_line_break_holder] -->.json-container .t-null { color: #e36209; }<!-- [et_pb_line_break_holder] -->.json-container .t-bracket { color: var(--jtxt); }<!-- [et_pb_line_break_holder] -->.json-container .t-colon { color: var(--jmuted); }<!-- [et_pb_line_break_holder] -->.json-container .t-count { font-size: 11px; color: var(--jmuted); margin-left: 4px; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .t-key { color: #f38ba8; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .t-string { color: #89dceb; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .t-number { color: #a6e3a1; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .t-boolean { color: #fab387; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .t-null { color: #fab387; }<!-- [et_pb_line_break_holder] -->.json-container .json-key { color: #d6336c; }<!-- [et_pb_line_break_holder] -->.json-container .json-string { color: #0073e6; }<!-- [et_pb_line_break_holder] -->.json-container .json-number { color: #28a745; }<!-- [et_pb_line_break_holder] -->.json-container .json-boolean { color: #ff9900; }<!-- [et_pb_line_break_holder] -->.json-container .json-null { color: #e36209; }<!-- [et_pb_line_break_holder] -->.json-container .json-error { color: red; font-weight: bold; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .json-key { color: #f38ba8; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .json-string { color: #89dceb; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .json-number { color: #a6e3a1; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .json-boolean { color: #fab387; }<!-- [et_pb_line_break_holder] -->.json-container.jdark .json-null { color: #fab387; }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var LANG = 'en';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->(function () {<!-- [et_pb_line_break_holder] -->    var STRINGS = {<!-- [et_pb_line_break_holder] -->        en: {<!-- [et_pb_line_break_holder] -->            title:      'JSON Formatter with Color',<!-- [et_pb_line_break_holder] -->            darkTitle:  'Toggle dark mode',<!-- [et_pb_line_break_holder] -->            dropText:   'Drag & drop a .json file, or',<!-- [et_pb_line_break_holder] -->            browse:     'browse',<!-- [et_pb_line_break_holder] -->            placeholder:'Paste or type JSON here...',<!-- [et_pb_line_break_holder] -->            indent:     'Indent:',<!-- [et_pb_line_break_holder] -->            opt2:       '2 spaces',<!-- [et_pb_line_break_holder] -->            opt3:       '3 spaces',<!-- [et_pb_line_break_holder] -->            opt4:       '4 spaces',<!-- [et_pb_line_break_holder] -->            optTab:     'Tab',<!-- [et_pb_line_break_holder] -->            sortKeys:   'Sort keys A\u2192Z',<!-- [et_pb_line_break_holder] -->            autoFormat: 'Auto-format on paste',<!-- [et_pb_line_break_holder] -->            formatBtn:  'Format JSON',<!-- [et_pb_line_break_holder] -->            minifyBtn:  'Minify',<!-- [et_pb_line_break_holder] -->            copyBtn:    'Copy',<!-- [et_pb_line_break_holder] -->            clearBtn:   'Clear',<!-- [et_pb_line_break_holder] -->            dlJson:     'Download .json',<!-- [et_pb_line_break_holder] -->            dlCsv:      'Download CSV',<!-- [et_pb_line_break_holder] -->            treeView:   'Tree View',<!-- [et_pb_line_break_holder] -->            rawView:    'Raw View',<!-- [et_pb_line_break_holder] -->            copied:     'Copied!',<!-- [et_pb_line_break_holder] -->            copyFail:   'Copy failed',<!-- [et_pb_line_break_holder] -->            lines:      'lines',<!-- [et_pb_line_break_holder] -->            chars:      'chars',<!-- [et_pb_line_break_holder] -->            depth:      'depth',<!-- [et_pb_line_break_holder] -->            item:       'item',<!-- [et_pb_line_break_holder] -->            items:      'items',<!-- [et_pb_line_break_holder] -->            treeKey:    'key',<!-- [et_pb_line_break_holder] -->            treeKeys:   'keys',<!-- [et_pb_line_break_holder] -->            obj:        'obj',<!-- [et_pb_line_break_holder] -->            arr:        'arr',<!-- [et_pb_line_break_holder] -->            errAt:      'Invalid JSON at line',<!-- [et_pb_line_break_holder] -->            errCol:     'col',<!-- [et_pb_line_break_holder] -->            errBase:    'Invalid JSON: '<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        es: {<!-- [et_pb_line_break_holder] -->            title:      'Formateador JSON con Color',<!-- [et_pb_line_break_holder] -->            darkTitle:  'Modo oscuro',<!-- [et_pb_line_break_holder] -->            dropText:   'Arrastr\u00e1 un archivo .json, o',<!-- [et_pb_line_break_holder] -->            browse:     'seleccionar',<!-- [et_pb_line_break_holder] -->            placeholder:'Peg\u00e1 o escrib\u00ed tu JSON aqu\u00ed\u2026',<!-- [et_pb_line_break_holder] -->            indent:     'Sangr\u00eda:',<!-- [et_pb_line_break_holder] -->            opt2:       '2 espacios',<!-- [et_pb_line_break_holder] -->            opt3:       '3 espacios',<!-- [et_pb_line_break_holder] -->            opt4:       '4 espacios',<!-- [et_pb_line_break_holder] -->            optTab:     'Tab',<!-- [et_pb_line_break_holder] -->            sortKeys:   'Ordenar claves A\u2192Z',<!-- [et_pb_line_break_holder] -->            autoFormat: 'Formatear al pegar',<!-- [et_pb_line_break_holder] -->            formatBtn:  'Formatear JSON',<!-- [et_pb_line_break_holder] -->            minifyBtn:  'Minificar',<!-- [et_pb_line_break_holder] -->            copyBtn:    'Copiar',<!-- [et_pb_line_break_holder] -->            clearBtn:   'Limpiar',<!-- [et_pb_line_break_holder] -->            dlJson:     'Descargar .json',<!-- [et_pb_line_break_holder] -->            dlCsv:      'Descargar CSV',<!-- [et_pb_line_break_holder] -->            treeView:   'Vista \u00e1rbol',<!-- [et_pb_line_break_holder] -->            rawView:    'Vista texto',<!-- [et_pb_line_break_holder] -->            copied:     '\u00a1Copiado!',<!-- [et_pb_line_break_holder] -->            copyFail:   'Error al copiar',<!-- [et_pb_line_break_holder] -->            lines:      'l\u00edneas',<!-- [et_pb_line_break_holder] -->            chars:      'caracteres',<!-- [et_pb_line_break_holder] -->            depth:      'profundidad',<!-- [et_pb_line_break_holder] -->            item:       'elemento',<!-- [et_pb_line_break_holder] -->            items:      'elementos',<!-- [et_pb_line_break_holder] -->            treeKey:    'clave',<!-- [et_pb_line_break_holder] -->            treeKeys:   'claves',<!-- [et_pb_line_break_holder] -->            obj:        'obj',<!-- [et_pb_line_break_holder] -->            arr:        'arr',<!-- [et_pb_line_break_holder] -->            errAt:      'JSON inv\u00e1lido en l\u00ednea',<!-- [et_pb_line_break_holder] -->            errCol:     'col',<!-- [et_pb_line_break_holder] -->            errBase:    'JSON inv\u00e1lido: '<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    var T = STRINGS[LANG] || STRINGS.en;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    var container   = document.getElementById('jsonContainer');<!-- [et_pb_line_break_holder] -->    var textarea    = document.getElementById('jsonInput');<!-- [et_pb_line_break_holder] -->    var statsBar    = document.getElementById('jsonStats');<!-- [et_pb_line_break_holder] -->    var outputArea  = document.getElementById('jsonOutput');<!-- [et_pb_line_break_holder] -->    var treeOutput  = document.getElementById('treeOutput');<!-- [et_pb_line_break_holder] -->    var actionButtons = document.getElementById('actionButtons');<!-- [et_pb_line_break_holder] -->    var csvBtn      = document.getElementById('downloadCsvButton');<!-- [et_pb_line_break_holder] -->    var treeBtn     = document.getElementById('toggleTreeView');<!-- [et_pb_line_break_holder] -->    var dropZone    = document.getElementById('dropZone');<!-- [et_pb_line_break_holder] -->    var fileInput   = document.getElementById('fileInput');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    var lastParsed = null;<!-- [et_pb_line_break_holder] -->    var isTreeView = false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Apply all translated strings to the DOM<!-- [et_pb_line_break_holder] -->    function initText() {<!-- [et_pb_line_break_holder] -->        document.querySelector('.json-title').textContent          = T.title;<!-- [et_pb_line_break_holder] -->        document.getElementById('darkModeToggle').title            = T.darkTitle;<!-- [et_pb_line_break_holder] -->        document.getElementById('pjDropText').innerHTML            = T.dropText;<!-- [et_pb_line_break_holder] -->        document.getElementById('pjBrowse').textContent            = T.browse;<!-- [et_pb_line_break_holder] -->        textarea.setAttribute('placeholder', T.placeholder);<!-- [et_pb_line_break_holder] -->        document.getElementById('pjIndentLbl').textContent         = T.indent;<!-- [et_pb_line_break_holder] -->        document.querySelector('#indentation option[value=\"2\"]').textContent  = T.opt2;<!-- [et_pb_line_break_holder] -->        document.querySelector('#indentation option[value=\"3\"]').textContent  = T.opt3;<!-- [et_pb_line_break_holder] -->        document.querySelector('#indentation option[value=\"4\"]').textContent  = T.opt4;<!-- [et_pb_line_break_holder] -->        document.querySelector('#indentation option[value=\"tab\"]').textContent = T.optTab;<!-- [et_pb_line_break_holder] -->        document.getElementById('pjSortLbl').textContent           = T.sortKeys;<!-- [et_pb_line_break_holder] -->        document.getElementById('pjAutoLbl').textContent           = T.autoFormat;<!-- [et_pb_line_break_holder] -->        document.getElementById('formatJsonButton').textContent    = T.formatBtn;<!-- [et_pb_line_break_holder] -->        document.getElementById('minifyJsonButton').textContent    = T.minifyBtn;<!-- [et_pb_line_break_holder] -->        document.getElementById('copyToClipboard').textContent     = T.copyBtn;<!-- [et_pb_line_break_holder] -->        document.getElementById('clearJsonButton').textContent     = T.clearBtn;<!-- [et_pb_line_break_holder] -->        document.getElementById('downloadJsonButton').textContent  = T.dlJson;<!-- [et_pb_line_break_holder] -->        csvBtn.textContent  = T.dlCsv;<!-- [et_pb_line_break_holder] -->        treeBtn.textContent = T.treeView;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    initText();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Dark mode<!-- [et_pb_line_break_holder] -->    try { if (localStorage.getItem('pjson_dark') === '1') applyDark(true); } catch(e) {}<!-- [et_pb_line_break_holder] -->    document.getElementById('darkModeToggle').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        applyDark(!container.classList.contains('jdark'));<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    function applyDark(on) {<!-- [et_pb_line_break_holder] -->        container.classList.toggle('jdark', on);<!-- [et_pb_line_break_holder] -->        document.getElementById('darkModeToggle').textContent = on ? '\u2600\ufe0f' : '\ud83c\udf19';<!-- [et_pb_line_break_holder] -->        try { localStorage.setItem('pjson_dark', on ? '1' : '0'); } catch(e) {}<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Stats (simple, before format)<!-- [et_pb_line_break_holder] -->    textarea.addEventListener('input', function () {<!-- [et_pb_line_break_holder] -->        var v = textarea.value;<!-- [et_pb_line_break_holder] -->        if (!v.trim()) { statsBar.innerHTML = ''; return; }<!-- [et_pb_line_break_holder] -->        statsBar.innerHTML = b(v.split('\\n').length + ' ' + T.lines) + b(v.length + ' ' + T.chars) + b((new Blob([v]).size \/ 1024).toFixed(1) + ' KB');<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    function b(t) { return '<span>' + t + '<\/span>'; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Rich stats after parse<!-- [et_pb_line_break_holder] -->    function updateRichStats(raw, parsed) {<!-- [et_pb_line_break_holder] -->        var keys = 0, arrays = 0, objects = 0, maxDepth = 0;<!-- [et_pb_line_break_holder] -->        function walk(v, d) {<!-- [et_pb_line_break_holder] -->            if (d > maxDepth) maxDepth = d;<!-- [et_pb_line_break_holder] -->            if (Array.isArray(v)) {<!-- [et_pb_line_break_holder] -->                arrays++;<!-- [et_pb_line_break_holder] -->                for (var i = 0; i < v.length; i++) walk(v[i], d + 1);<!-- [et_pb_line_break_holder] -->            } else if (v !== null && typeof v === 'object') {<!-- [et_pb_line_break_holder] -->                var ks = Object.keys(v);<!-- [et_pb_line_break_holder] -->                objects++;<!-- [et_pb_line_break_holder] -->                for (var j = 0; j < ks.length; j++) { keys++; walk(v[ks[j]], d + 1); }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        walk(parsed, 0);<!-- [et_pb_line_break_holder] -->        var kb = (new Blob([raw]).size \/ 1024).toFixed(1);<!-- [et_pb_line_break_holder] -->        statsBar.innerHTML = b(raw.split('\\n').length + ' ' + T.lines) + b(raw.length + ' ' + T.chars) + b(kb + ' KB') + b(keys + ' ' + T.treeKeys) + b(T.depth + ' ' + maxDepth) + b(objects + ' ' + T.obj + ' \/ ' + arrays + ' ' + T.arr);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Auto-format on paste<!-- [et_pb_line_break_holder] -->    textarea.addEventListener('paste', function () {<!-- [et_pb_line_break_holder] -->        if (!document.getElementById('autoFormat').checked) return;<!-- [et_pb_line_break_holder] -->        setTimeout(function () {<!-- [et_pb_line_break_holder] -->            try { doFormat(JSON.parse(textarea.value)); } catch(e) {}<!-- [et_pb_line_break_holder] -->        }, 0);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ File upload \/ drag & drop<!-- [et_pb_line_break_holder] -->    dropZone.addEventListener('click', function () { fileInput.click(); });<!-- [et_pb_line_break_holder] -->    fileInput.addEventListener('change', function (e) { if (e.target.files[0]) readFile(e.target.files[0]); });<!-- [et_pb_line_break_holder] -->    dropZone.addEventListener('dragover', function (e) { e.preventDefault(); dropZone.classList.add('drag-over'); });<!-- [et_pb_line_break_holder] -->    dropZone.addEventListener('dragleave', function () { dropZone.classList.remove('drag-over'); });<!-- [et_pb_line_break_holder] -->    dropZone.addEventListener('drop', function (e) {<!-- [et_pb_line_break_holder] -->        e.preventDefault();<!-- [et_pb_line_break_holder] -->        dropZone.classList.remove('drag-over');<!-- [et_pb_line_break_holder] -->        if (e.dataTransfer.files[0]) readFile(e.dataTransfer.files[0]);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->    function readFile(file) {<!-- [et_pb_line_break_holder] -->        var reader = new FileReader();<!-- [et_pb_line_break_holder] -->        reader.onload = function (e) {<!-- [et_pb_line_break_holder] -->            textarea.value = e.target.result;<!-- [et_pb_line_break_holder] -->            textarea.dispatchEvent(new Event('input'));<!-- [et_pb_line_break_holder] -->            if (document.getElementById('autoFormat').checked) {<!-- [et_pb_line_break_holder] -->                try { doFormat(JSON.parse(textarea.value)); } catch(ex) {}<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] -->        reader.readAsText(file);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Sort keys helper<!-- [et_pb_line_break_holder] -->    function sortKeys(obj) {<!-- [et_pb_line_break_holder] -->        if (Array.isArray(obj)) return obj.map(sortKeys);<!-- [et_pb_line_break_holder] -->        if (obj !== null && typeof obj === 'object') {<!-- [et_pb_line_break_holder] -->            return Object.keys(obj).sort().reduce(function (acc, k) { acc[k] = sortKeys(obj[k]); return acc; }, {});<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        return obj;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function getIndent() {<!-- [et_pb_line_break_holder] -->        var v = document.getElementById('indentation').value;<!-- [et_pb_line_break_holder] -->        return v === 'tab' ? '\\t' : parseInt(v);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function doFormat(parsed) {<!-- [et_pb_line_break_holder] -->        var raw = textarea.value;<!-- [et_pb_line_break_holder] -->        var toRender = document.getElementById('sortKeys').checked ? sortKeys(parsed) : parsed;<!-- [et_pb_line_break_holder] -->        lastParsed = toRender;<!-- [et_pb_line_break_holder] -->        updateRichStats(raw, toRender);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        if (isTreeView) {<!-- [et_pb_line_break_holder] -->            treeOutput.innerHTML = '';<!-- [et_pb_line_break_holder] -->            treeOutput.appendChild(renderTree(toRender, undefined, 0));<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'block';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'none';<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = syntaxHighlight(JSON.stringify(toRender, null, getIndent()));<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'none';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        actionButtons.style.display = 'flex';<!-- [et_pb_line_break_holder] -->        csvBtn.style.display = (Array.isArray(toRender) && toRender.length > 0 && toRender[0] !== null && typeof toRender[0] === 'object' && !Array.isArray(toRender[0])) ? '' : 'none';<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Format button<!-- [et_pb_line_break_holder] -->    document.getElementById('formatJsonButton').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            doFormat(JSON.parse(textarea.value));<!-- [et_pb_line_break_holder] -->        } catch(e) {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = \"<span class='json-error'>\" + getErrorMsg(textarea.value, e) + \"<\/span>\";<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'none';<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'none';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Minify button<!-- [et_pb_line_break_holder] -->    document.getElementById('minifyJsonButton').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        try {<!-- [et_pb_line_break_holder] -->            var parsed = JSON.parse(textarea.value);<!-- [et_pb_line_break_holder] -->            lastParsed = parsed;<!-- [et_pb_line_break_holder] -->            outputArea.textContent = JSON.stringify(parsed);<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'none';<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'flex';<!-- [et_pb_line_break_holder] -->            csvBtn.style.display = 'none';<!-- [et_pb_line_break_holder] -->        } catch(e) {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = \"<span class='json-error'>\" + getErrorMsg(textarea.value, e) + \"<\/span>\";<!-- [et_pb_line_break_holder] -->            actionButtons.style.display = 'none';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function getErrorMsg(input, e) {<!-- [et_pb_line_break_holder] -->        var msg = escHtml(e.message);<!-- [et_pb_line_break_holder] -->        var m = e.message.match(\/position (\\d+)\/);<!-- [et_pb_line_break_holder] -->        if (m) {<!-- [et_pb_line_break_holder] -->            var pos = parseInt(m[1]);<!-- [et_pb_line_break_holder] -->            var before = input.slice(0, pos);<!-- [et_pb_line_break_holder] -->            var line = before.split('\\n').length;<!-- [et_pb_line_break_holder] -->            var col = before.split('\\n').pop().length + 1;<!-- [et_pb_line_break_holder] -->            return T.errAt + ' ' + line + ', ' + T.errCol + ' ' + col + ' \u2014 ' + msg;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        return T.errBase + msg;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Tree view toggle<!-- [et_pb_line_break_holder] -->    treeBtn.addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        if (!lastParsed) return;<!-- [et_pb_line_break_holder] -->        isTreeView = !isTreeView;<!-- [et_pb_line_break_holder] -->        treeBtn.textContent = isTreeView ? T.rawView : T.treeView;<!-- [et_pb_line_break_holder] -->        if (isTreeView) {<!-- [et_pb_line_break_holder] -->            treeOutput.innerHTML = '';<!-- [et_pb_line_break_holder] -->            treeOutput.appendChild(renderTree(lastParsed, undefined, 0));<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'block';<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'none';<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            outputArea.innerHTML = syntaxHighlight(JSON.stringify(lastParsed, null, getIndent()));<!-- [et_pb_line_break_holder] -->            outputArea.style.display = 'block';<!-- [et_pb_line_break_holder] -->            treeOutput.style.display = 'none';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Copy<!-- [et_pb_line_break_holder] -->    document.getElementById('copyToClipboard').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        var text = isTreeView ? JSON.stringify(lastParsed, null, getIndent()) : outputArea.innerText;<!-- [et_pb_line_break_holder] -->        if (!text) return;<!-- [et_pb_line_break_holder] -->        var btn = document.getElementById('copyToClipboard');<!-- [et_pb_line_break_holder] -->        navigator.clipboard.writeText(text).then(function () {<!-- [et_pb_line_break_holder] -->            var orig = btn.textContent;<!-- [et_pb_line_break_holder] -->            btn.textContent = T.copied;<!-- [et_pb_line_break_holder] -->            setTimeout(function () { btn.textContent = orig; }, 1500);<!-- [et_pb_line_break_holder] -->        }).catch(function () { alert(T.copyFail); });<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Clear<!-- [et_pb_line_break_holder] -->    document.getElementById('clearJsonButton').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        textarea.value = '';<!-- [et_pb_line_break_holder] -->        outputArea.innerHTML = '';<!-- [et_pb_line_break_holder] -->        treeOutput.innerHTML = '';<!-- [et_pb_line_break_holder] -->        outputArea.style.display = 'none';<!-- [et_pb_line_break_holder] -->        treeOutput.style.display = 'none';<!-- [et_pb_line_break_holder] -->        actionButtons.style.display = 'none';<!-- [et_pb_line_break_holder] -->        statsBar.innerHTML = '';<!-- [et_pb_line_break_holder] -->        lastParsed = null;<!-- [et_pb_line_break_holder] -->        isTreeView = false;<!-- [et_pb_line_break_holder] -->        treeBtn.textContent = T.treeView;<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Download JSON<!-- [et_pb_line_break_holder] -->    document.getElementById('downloadJsonButton').addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        if (!lastParsed) return;<!-- [et_pb_line_break_holder] -->        dl(JSON.stringify(lastParsed, null, getIndent()), 'formatted.json', 'application\/json');<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Download CSV<!-- [et_pb_line_break_holder] -->    csvBtn.addEventListener('click', function () {<!-- [et_pb_line_break_holder] -->        if (!Array.isArray(lastParsed)) return;<!-- [et_pb_line_break_holder] -->        var headers = [];<!-- [et_pb_line_break_holder] -->        lastParsed.forEach(function (row) {<!-- [et_pb_line_break_holder] -->            if (row && typeof row === 'object') {<!-- [et_pb_line_break_holder] -->                Object.keys(row).forEach(function (k) { if (headers.indexOf(k) === -1) headers.push(k); });<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->        var rows = [headers.map(csvCell).join(',')].concat(lastParsed.map(function (row) {<!-- [et_pb_line_break_holder] -->            return headers.map(function (h) {<!-- [et_pb_line_break_holder] -->                var v = row[h];<!-- [et_pb_line_break_holder] -->                if (v == null) return '';<!-- [et_pb_line_break_holder] -->                return csvCell(typeof v === 'object' ? JSON.stringify(v) : String(v));<!-- [et_pb_line_break_holder] -->            }).join(',');<!-- [et_pb_line_break_holder] -->        }));<!-- [et_pb_line_break_holder] -->        dl(rows.join('\\n'), 'data.csv', 'text\/csv');<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function csvCell(v) { return '\"' + String(v).replace(\/\"\/g, '\"\"') + '\"'; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function dl(content, name, type) {<!-- [et_pb_line_break_holder] -->        var a = document.createElement('a');<!-- [et_pb_line_break_holder] -->        a.href = URL.createObjectURL(new Blob([content], { type: type }));<!-- [et_pb_line_break_holder] -->        a.download = name;<!-- [et_pb_line_break_holder] -->        a.click();<!-- [et_pb_line_break_holder] -->        setTimeout(function () { URL.revokeObjectURL(a.href); }, 100);<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Syntax highlight<!-- [et_pb_line_break_holder] -->    function syntaxHighlight(json) {<!-- [et_pb_line_break_holder] -->        json = json.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>');<!-- [et_pb_line_break_holder] -->        return json.replace(\/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|\\b-?\\d+(\\.\\d+)?([eE][+-]?\\d+)?\\b)\/g, function (match) {<!-- [et_pb_line_break_holder] -->            var cls = 'json-number';<!-- [et_pb_line_break_holder] -->            if (\/^\"\/.test(match)) cls = \/:$\/.test(match) ? 'json-key' : 'json-string';<!-- [et_pb_line_break_holder] -->            else if (\/true|false\/.test(match)) cls = 'json-boolean';<!-- [et_pb_line_break_holder] -->            else if (\/null\/.test(match)) cls = 'json-null';<!-- [et_pb_line_break_holder] -->            return '<span class=\"' + cls + '\">' + match + '<\/span>';<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Escape HTML<!-- [et_pb_line_break_holder] -->    function escHtml(s) {<!-- [et_pb_line_break_holder] -->        return String(s).replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'\"');<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Tree renderer<!-- [et_pb_line_break_holder] -->    function renderTree(value, key, depth) {<!-- [et_pb_line_break_holder] -->        var node = document.createElement('div');<!-- [et_pb_line_break_holder] -->        node.className = 'tree-node';<!-- [et_pb_line_break_holder] -->        var keyHtml = key !== undefined ? '<span class=\"t-key\">' + escHtml(String(key)) + '<\/span><span class=\"t-colon\">:<\/span> ' : '';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        if (value === null) {<!-- [et_pb_line_break_holder] -->            node.className += ' tree-leaf';<!-- [et_pb_line_break_holder] -->            node.innerHTML = keyHtml + '<span class=\"t-null\">null<\/span>';<!-- [et_pb_line_break_holder] -->            return node;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        if (typeof value !== 'object') {<!-- [et_pb_line_break_holder] -->            node.className += ' tree-leaf';<!-- [et_pb_line_break_holder] -->            var cls, display;<!-- [et_pb_line_break_holder] -->            if (typeof value === 'string') { cls = 't-string'; display = '\"' + escHtml(value) + '\"'; }<!-- [et_pb_line_break_holder] -->            else if (typeof value === 'number') { cls = 't-number'; display = escHtml(String(value)); }<!-- [et_pb_line_break_holder] -->            else { cls = 't-boolean'; display = String(value); }<!-- [et_pb_line_break_holder] -->            node.innerHTML = keyHtml + '<span class=\"' + cls + '\">' + display + '<\/span>';<!-- [et_pb_line_break_holder] -->            return node;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        var isArr = Array.isArray(value);<!-- [et_pb_line_break_holder] -->        var entryKeys = isArr ? null : Object.keys(value);<!-- [et_pb_line_break_holder] -->        var count = isArr ? value.length : entryKeys.length;<!-- [et_pb_line_break_holder] -->        var open = isArr ? '[' : '{';<!-- [et_pb_line_break_holder] -->        var close = isArr ? ']' : '}';<!-- [et_pb_line_break_holder] -->        var label = count + ' ' + (isArr ? (count === 1 ? T.item : T.items) : (count === 1 ? T.treeKey : T.treeKeys));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        var toggle = document.createElement('span');<!-- [et_pb_line_break_holder] -->        toggle.className = 'tree-toggle';<!-- [et_pb_line_break_holder] -->        toggle.textContent = '\u25bc';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        var header = document.createElement('div');<!-- [et_pb_line_break_holder] -->        header.className = 'tree-header';<!-- [et_pb_line_break_holder] -->        header.appendChild(toggle);<!-- [et_pb_line_break_holder] -->        header.insertAdjacentHTML('beforeend', keyHtml + '<span class=\"t-bracket\">' + open + '<\/span><span class=\"t-count\">' + label + '<\/span>');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        var children = document.createElement('div');<!-- [et_pb_line_break_holder] -->        children.className = 'tree-children';<!-- [et_pb_line_break_holder] -->        if (isArr) {<!-- [et_pb_line_break_holder] -->            for (var i = 0; i < value.length; i++) children.appendChild(renderTree(value[i], i, depth + 1));<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            for (var j = 0; j < entryKeys.length; j++) children.appendChild(renderTree(value[entryKeys[j]], entryKeys[j], depth + 1));<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        var closeEl = document.createElement('div');<!-- [et_pb_line_break_holder] -->        closeEl.className = 'tree-close';<!-- [et_pb_line_break_holder] -->        closeEl.innerHTML = '<span class=\"t-bracket\">' + close + '<\/span>';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        toggle.addEventListener('click', function (e) {<!-- [et_pb_line_break_holder] -->            e.stopPropagation();<!-- [et_pb_line_break_holder] -->            var col = children.style.display === 'none';<!-- [et_pb_line_break_holder] -->            children.style.display = col ? '' : 'none';<!-- [et_pb_line_break_holder] -->            closeEl.style.display = col ? '' : 'none';<!-- [et_pb_line_break_holder] -->            toggle.textContent = col ? '\u25bc' : '\u25b6';<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        node.appendChild(header);<!-- [et_pb_line_break_holder] -->        node.appendChild(children);<!-- [et_pb_line_break_holder] -->        node.appendChild(closeEl);<!-- [et_pb_line_break_holder] -->        return node;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->})();<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<blockquote>\n<p>If you found the free <em><strong>Modern Pretty JSON Formatter &amp; Highlighter Tool by HakoIT<\/strong><\/em> useful for formatting Pretty JSON, <strong>Please share it with your Colleagues \/ Friends and Follow us on Instagram <a href=\"https:\/\/www.instagram.com\/hako_it\/\" target=\"_blank\" rel=\"noopener\">@hako_it<\/a><\/strong><\/p>\n<\/blockquote>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>New Updates 2026:<\/h2>\n<p>This <strong>free JSON formatter<\/strong> online now includes a full set of tools to work with JSON data in seconds. Paste your JSON or <strong>drag and drop a file<\/strong> to instantly pretty print it with color syntax highlighting \u2014 keys, strings, numbers, booleans and null values each get their own color.<\/p>\n<p>Need the opposite? Hit <strong>Minify<\/strong> to compress your JSON to a single line, perfect for production use or API payloads. Use the interactive <strong>JSON tree view<\/strong> to collapse and expand nested objects and arrays, making it easy to explore deeply nested structures.<\/p>\n<p>Enable <strong>Sort keys A\u2192Z<\/strong> to alphabetically normalize any JSON object, or check <strong>Auto-format on paste<\/strong> to skip the button click entirely. When your JSON root is an array of objects, a<strong> Download CSV<\/strong> button appears automatically \u2014 ideal for converting API responses to spreadsheets. Choose your indentation (2 spaces, 4 spaces, or tab), copy the result to clipboard, or download a clean .json file. A <strong>dark mode<\/strong> toggle is also included, with your preference saved automatically. <strong>No sign-up, no ads, no server \u2014 everything runs in your browser.<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_5,3_5,1_5&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb3_5&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<blockquote>\n<p>\ud83d\udc49 Try other Free Social Media Tools: <a href=\"https:\/\/www.hakoit.com\/en\/font-for-instagram-copy-and-paste-social-media\/\" target=\"_blank\" rel=\"noopener\"><strong>Special Fonts for Instagram <em>\/ Facebook \/ Twitter \/ YouTube<\/em> \/ TikTok\u00a0Copy and Paste | Social Media<\/strong><\/a><\/p>\n<\/blockquote>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2 style=\"text-align: left;\"><strong>How to Format JSON Online \/ JSON Formatter<\/strong><\/h2>\n<ol>\n<li>Paste your JSON (minified, raw, or partially formatted) into the input field.<\/li>\n<li>Click <strong>Format \/ Beautify<\/strong>.<\/li>\n<li>Copy the clean output or download it as a <code>.json<\/code> file.<\/li>\n<\/ol>\n<p>If your JSON contains syntax errors \u2014 missing brackets, trailing commas, or unquoted keys \u2014 the formatter highlights them in red so you can fix them before using the data.<\/p>\n<h2 style=\"text-align: left;\"><strong>What Is JSON Pretty Print?<\/strong><\/h2>\n<p>Pretty-printing JSON means adding consistent line breaks and indentation so the structure is readable at a glance. APIs and storage systems typically use minified JSON (everything on one line) to reduce file size. This tool converts between both formats instantly without changing any data.<\/p>\n<h2 style=\"text-align: left;\"><strong>Create JSON Online<\/strong><\/h2>\n<p>You can also build JSON from scratch directly in the editor. Start typing a JSON object or array, use the formatter to validate your syntax as you go, and copy the finished result into your project.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_code _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>Summary Json Formatter Free Tool<\/h2>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"rv-tabla-estilo\"><!-- [et_pb_line_break_holder] --><\/p>\n<table><!-- [et_pb_line_break_holder] -->  <\/p>\n<thead><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<th>Feature<\/th>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<th>Description<\/th>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->  <\/thead>\n<p><!-- [et_pb_line_break_holder] -->  <\/p>\n<tbody><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Tool Name<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>Modern JSON Formatter &#038; Beautifier by HakoIT<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Primary Function<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>Instantly format, validate, and beautify minified or raw JSON data.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Key Features<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>Syntax highlighting, error detection, customizable indentation (2 or 3 spaces), and character\/line counting.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Security<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>100% Client-side; data remains on your device and is never sent to a server.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Export Options<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>One-click copy to clipboard and direct download as a .txt file.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Target Audience<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>Developers, data analysts, students, and Power Apps\/REST API users.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->    <\/p>\n<tr><!-- [et_pb_line_break_holder] -->      <\/p>\n<td><strong>Accessibility<\/strong><\/td>\n<p><!-- [et_pb_line_break_holder] -->      <\/p>\n<td>Web-based, responsive design, works on mobile, tablet, and desktop.<\/td>\n<p><!-- [et_pb_line_break_holder] -->    <\/tr>\n<p><!-- [et_pb_line_break_holder] -->  <\/tbody>\n<p><!-- [et_pb_line_break_holder] --><\/table>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<div class=\"stat-card\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); ; border-radius: 12px; padding: 24px; margin: 32px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\">\n<div style=\"display: flex; align-items: center; gap: 16px; margin-bottom: 16px;\">\n<div style=\"color: white; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;\">Did you know&#8230;?<\/div>\n<\/div>\n<div style=\"color: white; font-size: 20px; font-weight: bold; line-height: 1.4; margin-bottom: 12px;\">JSON, which stands for JavaScript Object Notation, was derived from the JavaScript programming language but is now language-independent, supporting virtually every modern coding language.<\/div>\n<div style=\"color: rgba(255,255,255,0.9); font-size: 14px;\">Source: <a style=\"color: white; text-decoration: underline;\" href=\"https:\/\/www.json.org\/\" target=\"_blank\" rel=\"nofollow noopener\"> JSON.org <\/a><\/div>\n<\/div>\n<p>[\/et_pb_text][et_pb_text admin_label=\u00bbStep-by-Step Guide to Using the JSON Formatter\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2 style=\"text-align: left;\"><strong>Step-by-Step Guide to Using the Modern JSON Formatter by Hako IT:<\/strong><\/h2>\n<h3>\u00a0<\/h3>\n<h3>Step 1- Enter or Paste JSON Data:<\/h3>\n<p>&#8211; Simply paste or type your raw JSON data into the input text area. The tool accepts both minified and unformatted JSON.<\/p>\n<h3>Step 2- Choose Indentation Style:<\/h3>\n<p>&#8211; Select the number of spaces (2 or 3) for indentation from the dropdown menu. This helps control the structure of the formatted JSON.<\/p>\n<h3>Step 3- Click \u00abFormat JSON\u00bb:<\/h3>\n<p>&#8211; After entering your JSON and selecting your preferences, click the \u00abFormat JSON\u00bb button. The tool will instantly format and display the data.<\/p>\n<h3>Step 4- View the JSON Pretty Print Output:<\/h3>\n<p>&#8211; Your formatted JSON is now displayed in a neatly structured manner, with syntax highlighting: numbers are shown in green, strings in blue, and keys in red. This helps you easily identify different data types.<\/p>\n<h3>Step 5- Copy, Clear, or Download the JSON:<\/h3>\n<p>&#8211; Once formatted, you can:<\/p>\n<ul>\n<li><strong>Copy the JSON<\/strong> to the clipboard with a single click.<\/li>\n<li><strong>Clear<\/strong> the input and output fields for a fresh start.<\/li>\n<li><strong>Download the formatted JSON (\u00abDownload Pretty print JSON free\u00bb)<\/strong>\u00a0as a <code>.txt<\/code> file.<\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_4,1_2,1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2 style=\"text-align: center;\">Format, Minify and Explore JSON Online<\/h2>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/www.hakoit.com\/wp-content\/uploads\/2024\/09\/Modern-Pretty-JSON-Formatter-Highlighter-How-to-use.jpg\u00bb alt=\u00bbHow to use the Modern JSON Formatter by Hako IT\u00bb title_text=\u00bbHow to use the Modern JSON Formatter by Hako IT\u00bb show_in_lightbox=\u00bbon\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00bb1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text admin_label=\u00bbBenefits of Using the Modern JSON\u00bb _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2><strong>Benefits of Using the Modern JSON Formatter by Hako IT<\/strong><\/h2>\n<ul>\n<li><strong>Free &amp; Ease of Use Pretty Print JSON online:<\/strong><br \/>The minimalist design ensures that anyone, even without technical skills, can use the <strong>FREE tool<\/strong>. <strong>No complex features<\/strong> or unnecessary distractions \u2014 just straightforward formatting and validation.<\/li>\n<\/ul>\n<ul>\n<li><strong>Instant JSON Formatting:<\/strong><br \/>Get beautifully structured JSON in seconds. This <strong>JSON pretty viewer<\/strong> is perfect for debugging, sharing, or preparing data for further development or analysis.<\/li>\n<\/ul>\n<ul>\n<li><strong>Error Detection:<\/strong><br \/>The app immediately notifies you if your JSON is invalid. The <strong>JSON validator<\/strong> helps you quickly resolve syntax errors and avoid processing issues in your code or API.<\/li>\n<\/ul>\n<ul>\n<li><strong>Customizable Formatting:<\/strong><br \/>Choose between 2 or 3 spaces for indentation to match your coding style or project requirements.<\/li>\n<\/ul>\n<ul>\n<li><strong>Syntax Highlighting:<\/strong><br \/>Color-coded output helps users easily distinguish between keys, values, numbers, strings, booleans, and null values.<\/li>\n<\/ul>\n<ul>\n<li><strong>Copy and Download Options:<\/strong><br \/>One-click copying or downloading lets you easily move formatted JSON into your codebase or save it for future use.<\/li>\n<\/ul>\n<ul>\n<li><strong>JSON online Responsive &amp; Fast:<\/strong><br \/>The tool is web-based and lightweight, meaning it works seamlessly on desktops, tablets, and smartphones without delays.<\/li>\n<\/ul>\n<ul>\n<li><strong>Privacy and Security:<br \/><\/strong>Since the tool runs entirely client-side (in your browser), your data is never transmitted or stored on a server, ensuring privacy and security for sensitive data.<\/li>\n<li><strong>Features:<\/strong> Tree View, Sort Keys, CSV Export &amp; Dark Mode<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=\u00bbUse Cases for the JSON Formatter\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2><strong>Use Cases for the JSON Formatter<\/strong><\/h2>\n<ul>\n<li><strong>Developers Working with APIs:<\/strong><br \/>Developers frequently interact with JSON when working with REST APIs. This tool allows them to quickly format raw JSON data from API responses, making it easier to read and debug.<\/li>\n<\/ul>\n<ul>\n<li><strong>Debugging JSON:<\/strong><br \/>When dealing with complex JSON objects, formatting helps quickly identify issues such as missing brackets, incorrect commas, or misplaced keys.<\/li>\n<\/ul>\n<ul>\n<li><strong>Data Analysts Parsing JSON:<\/strong><br \/>JSON is a common data format in analytics pipelines. This tool can help analysts quickly format and examine large data dumps to ensure accuracy before importing it into analysis tools.Students Learning JavaScript or JSON:<br \/>For students learning JSON, this formatter provides an easy way to check and understand the structure of the data, helping them develop a strong foundation in JSON parsing and manipulation.<\/li>\n<\/ul>\n<ul>\n<li><strong>JSON File Conversion:<\/strong><br \/>This tool can be used to format data before converting it to another format or importing it into other applications such as databases or spreadsheet software.<\/li>\n<\/ul>\n<ul>\n<li><strong>JSON Document Validation:<\/strong><br \/>If you are working on a project that involves strict JSON formatting rules (such as for APIs or NoSQL databases), this tool can be used to validate and prepare the data for submission.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>Ideal for Power Apps Developers and Custom Connectors<\/h2>\n<p><strong>HakoIT&#8217;s Online JSON Formatter<\/strong> is especially useful for those working with <strong><a href=\"https:\/\/www.hakoit.com\/en\/what-is-power-apps-an-introduction-to-microsoft-powerapps\/\" target=\"_blank\" rel=\"noopener\">Power Apps<\/a>, Power Automate, and <a href=\"https:\/\/www.hakoit.com\/en\/how-to-create-a-custom-connector-in-powerapps-api-complete-guide\/\" target=\"_blank\" rel=\"noopener\">Custom Connectors<\/a><\/strong>. In these environments, it&#8217;s common to exchange data in JSON format when consuming <strong>REST APIs<\/strong> or building automated flows. This tool greatly simplifies the <strong>visualization, validation, and debugging of JSON payloads<\/strong>\u2014both in requests and responses from external services.<\/p>\n<p>By clearly structuring data and instantly detecting errors, developers can save time when configuring headers, request bodies, and dynamic parameters in their flows or connectors. This results in faster, more reliable, and more efficient integration with external services within the <a href=\"https:\/\/www.hakoit.com\/en\/what-is-power-platform\/\" target=\"_blank\" rel=\"noopener\">Microsoft Power Platform<\/a> ecosystem.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_4,1_2,1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_image src=\u00bbhttps:\/\/www.hakoit.com\/wp-content\/uploads\/2024\/09\/Modern-Pretty-JSON-Formatter-Highlighter-Tool-by-Hako-IT.jpg\u00bb alt=\u00bbModern Pretty JSON Formatter &#038; Highlighter Tool by Hako IT\u00bb title_text=\u00bbModern Pretty JSON Formatter &#038; Highlighter Tool by Hako IT\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00bb1_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text admin_label=\u00bbWhy Choose Our JSON Formatter Over\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2><strong>Why Choose Our JSON Formatter Over Others?<\/strong><\/h2>\n<ul>\n<li><strong>User-Friendly Interface<\/strong>: <br \/>Designed with modern aesthetics in mind, our tool is minimalist yet feature-packed, allowing for a seamless user experience<\/li>\n<\/ul>\n<ul>\n<li><strong>Instant Syntax Highlighting<\/strong>: <br \/>Quickly differentiate between different parts of your JSON (keys, strings, numbers) through intuitive color coding.<\/li>\n<\/ul>\n<ul>\n<li><strong>No Data Sent to the Server<\/strong>: <br \/>Your JSON is formatted entirely in your browser, so your data stays private and secure.<\/li>\n<\/ul>\n<ul>\n<li><strong>Cross-Platform Support<\/strong>: <br \/>Whether you&#8217;re on a desktop, tablet, or mobile device, our tool adapts to your screen for optimal usability.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_code admin_label=\u00bbfaq google\u00bb _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]    <script type=\"application\/ld+json\"><!-- [et_pb_line_break_holder] -->    {<!-- [et_pb_line_break_holder] -->      \"@context\": \"https:\/\/schema.org\",<!-- [et_pb_line_break_holder] -->      \"@type\": \"FAQPage\",<!-- [et_pb_line_break_holder] -->      \"mainEntity\": [{<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Is my JSON data private?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes. All formatting and validation runs locally in your browser using JavaScript and nothing is sent to any server.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Can I format minified single line JSON?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes. Paste any minified JSON string and click Format to expand it with full indentation.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      },  {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"What can this JSON formatter do?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Beyond basic pretty printing, this tool works as a JSON beautifier, JSON minifier, JSON viewer, and JSON to CSV converter \u2014 all in one page, completely free. It validates your JSON and reports the exact line and column of any syntax error. The collapsible tree view lets you navigate complex nested data without scrolling through hundreds of lines. Files can be loaded via drag and drop or the file browser, and the auto-format on paste feature formats your JSON the moment you paste it. Indentation supports 2 spaces, 3 spaces, 4 spaces, and tabs \u2014 matching any code style. Dark mode is available for extended use.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      },{<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"What is the difference between JSON formatting and JSON validation?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Formatting makes JSON human readable by adding whitespace while validation checks that the syntax is correct. This tool does both and shows errors if the input is malformed.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"\u00bfPuedo formatear JSON en espa\u00f1ol?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"S\u00ed. La herramienta funciona con cualquier idioma. Pega tu JSON y haz clic en Formatear para obtener el resultado indentado.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"What is JSON and why is it used?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"JSON is a lightweight data interchange format that is easy to read and write and is commonly used to transmit data between servers and web applications or APIs.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Does this tool support large JSON files?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes the tool is designed to handle large JSON files although performance depends on your device for extremely large data.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Is my data secure when using the JSON Formatter Tool?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes the entire process runs locally on your machine and no data is sent to any server ensuring privacy.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Can I validate JSON with this tool?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes the tool automatically detects invalid JSON and shows an error message so you can fix it.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Can I download the formatted JSON?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes once formatted you can download the JSON as a txt file with one click.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"How do I beautify JSON data?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Paste your JSON select indentation such as 2 or 3 spaces and click Format JSON to get a clean readable result.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"How to use pretty JSON in Python?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Use json.dumps with an indent parameter such as indent equals 2 or use an online formatter for a visual result.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"How can I beautify JSON programmatically?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Use JavaScript JSON.stringify with indentation or Python json.dumps to format JSON programmatically.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"How to pretty print JSON format?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Paste your JSON choose indentation and click format to produce a structured readable output.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"How to write JSON pretty in JavaScript?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Use JSON.stringify with null and a spacing value such as 2 to format JSON with indentation.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }, {<!-- [et_pb_line_break_holder] -->        \"@type\": \"Question\",<!-- [et_pb_line_break_holder] -->        \"name\": \"Can we beautify JSON in Notepad plus plus?\",<!-- [et_pb_line_break_holder] -->        \"acceptedAnswer\": {<!-- [et_pb_line_break_holder] -->          \"@type\": \"Answer\",<!-- [et_pb_line_break_holder] -->          \"text\": \"Yes by using the JSON Viewer plugin or alternatively using a browser based formatter tool.\"<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->      }]<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    <\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_code admin_label=\u00bbschema google\u00bb _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<!-- [et_pb_line_break_holder] --><script type=\"application\/ld+json\"><!-- [et_pb_line_break_holder] -->   {<!-- [et_pb_line_break_holder] -->  \"@context\": \"https:\/\/schema.org\",<!-- [et_pb_line_break_holder] -->  \"@type\": \"WebApplication\",<!-- [et_pb_line_break_holder] -->  \"name\": \"JSON Formatter\",<!-- [et_pb_line_break_holder] -->  \"applicationCategory\": \"DeveloperApplication\",<!-- [et_pb_line_break_holder] -->  \"operatingSystem\": \"Web\",<!-- [et_pb_line_break_holder] -->  \"offers\": { \"@type\": \"Offer\", \"price\": \"0\" },<!-- [et_pb_line_break_holder] -->  \"description\": \"Free online JSON formatter with color syntax highlighting. Paste or upload your JSON to pretty print, minify, sort keys, and explore with collapsible tree view. Download as .json or CSV. Dark mode included.\"<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->  [\/et_pb_code][et_pb_text admin_label=\u00bbFrequently Asked Questions (FAQ)\u00bb _builder_version=\u00bb4.27.5&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2><strong>Frequently Asked Questions (FAQ)<\/strong><\/h2>\n<h3><strong>What can this JSON formatter do?<\/strong><\/h3>\n<p>Beyond basic pretty printing, this tool works as a JSON beautifier, JSON minifier, JSON viewer, and JSON to CSV converter \u2014 all in one page, completely free. It validates your JSON and reports the exact line and column of any syntax error. The collapsible tree view lets you navigate complex nested data without scrolling through hundreds of lines. Files can be loaded via drag and drop or the file browser, and the auto-format on paste feature formats your JSON the moment you paste it. Indentation supports 2 spaces, 3 spaces, 4 spaces, and tabs \u2014 matching any code style. Dark mode is available for extended use.<\/p>\n<h3><strong>Is my JSON data private?<\/strong><\/h3>\n<p>Yes. All formatting and validation runs locally in your browser using JavaScript. Nothing is sent to any server.<\/p>\n<h3><strong>Can I format minified (single-line) JSON?<\/strong><\/h3>\n<p>Yes. Paste any minified JSON string and click Format \u2014 it expands with full indentation.<\/p>\n<h3><strong>What is the difference between JSON formatting and JSON validation?<\/strong><\/h3>\n<p>Formatting makes JSON human-readable by adding whitespace. Validation checks that the syntax is correct. This tool does both: it only formats valid JSON, and shows exactly where errors are if the input is malformed.<\/p>\n<h3><strong>\u00bfPuedo formatear JSON en espa\u00f1ol?<\/strong><\/h3>\n<p>S\u00ed. La herramienta funciona con cualquier idioma. Pega tu JSON en el campo de texto y haz clic en \u00abFormatear\u00bb para obtener el resultado indentado de inmediato.<\/p>\n<h3><strong>What is JSON and why is it used?<\/strong><\/h3>\n<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is primarily used to transmit data between a server and a web application, as well as for API responses.<\/p>\n<h3><strong>Does this tool support large JSON files?<\/strong><\/h3>\n<p>Yes, the tool is designed to handle large JSON files efficiently. However, performance may depend on the processing power of your device for extremely large datasets.<\/p>\n<h3><strong>Is my data secure when using the JSON Formatter Tool?<\/strong><\/h3>\n<p>Absolutely. The entire process runs on your local machine, and no data is sent to our servers. Your privacy is ensured.<\/p>\n<h3><strong>Can I validate JSON with this JSON Formatter tool?<\/strong><\/h3>\n<p>Yes, the tool automatically checks for invalid JSON structure. If an error is detected, an error message will be displayed, allowing you to correct your data.<\/p>\n<h3><strong>Can I download the formatted JSON?<\/strong><\/h3>\n<p>Yes, once your JSON is formatted, you can easily download it as a <code>.txt<\/code> file with a single click.<\/p>\n<h3><strong>How do I beautify JSON data?<\/strong><\/h3>\n<p>Using the <strong>Modern JSON Formatter by HakoIT<\/strong>, simply paste your JSON, select indentation (2 or 3 spaces), and click <strong>\u00abFormat JSON\u00bb<\/strong> to get a clean, readable output.<\/p>\n<h3><strong>How to use pretty JSON in Python?<\/strong><\/h3>\n<p>In Python, use <code>json.dumps(data, indent=2)<\/code> to format JSON, or use the <strong>Modern JSON Formatter by HakoIT<\/strong> for a quick, visual result.<\/p>\n<h3><strong>How can I beautify JSON programmatically?<\/strong><\/h3>\n<p>Use JavaScript\u2019s <code>JSON.stringify(data, null, 2)<\/code> or Python\u2019s <code>json.dumps()<\/code> to programmatically beautify JSON. Or, use our app for fast results.<\/p>\n<h3><strong>How to Pretty Print JSON\u00a0format?<\/strong><\/h3>\n<p>Using the <strong>Modern JSON Formatter by HakoIT<\/strong>, simply paste your JSON, select indentation (2 or 3 spaces), and click <strong>\u00abFormat JSON\u00bb<\/strong> to get a clean, readable output.<\/p>\n<h3><strong>How to write JSON pretty in JavaScript?<\/strong><\/h3>\n<p>Use <code>JSON.stringify(jsonObject, null, 2)<\/code> in JavaScript to format JSON with indentation, or use the <strong>Modern JSON Formatter by HakoIT<\/strong> for instant formatting.<\/p>\n<h3><strong>Can we beautify JSON in Notepad++?<\/strong><\/h3>\n<p>Yes, using the \u00abJSON Viewer\u00bb plugin in Notepad++. Alternatively, use the <strong>Modern JSON Formatter by HakoIT<\/strong> for easy, browser-based beautification.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_text admin_label=\u00bbConclusion\u00bb _builder_version=\u00bb4.27.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>The <strong>Modern JSON Formatter &amp; Highlighter<\/strong> is an essential tool for anyone who works with JSON data. Whether you\u2019re a developer debugging an API response or a data analyst working with complex datasets, this tool will save you time and ensure your JSON is easy to read, validate, and share. With a clean design, easy-to-use interface, and powerful features like copy-to-clipboard, syntax highlighting, and downloadable results, it\u2019s the perfect companion for anyone dealing with JSON.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_5,1_5,1_5,1_5,1_5&#8243; make_equal=\u00bbon\u00bb admin_label=\u00bbAutor Facu\u00bb _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_image src=\u00bbhttps:\/\/www.hakoit.com\/wp-content\/uploads\/2023\/03\/Facundo-Capdevila-200.png\u00bb alt=\u00bbFacundo Capdevila\u00bb title_text=\u00bbFacundo Capdevila\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb header_3_font=\u00bb|||||on|||\u00bb header_3_text_align=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3 style=\"text-align: center;\">Facundo Capdevila<\/h3>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][et_pb_column type=\u00bb1_5&#8243; _builder_version=\u00bb4.19.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_image src=\u00bbhttps:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/powerapps-consulting-services-1080.jpg\u00bb alt=\u00bbpowerapps consulting services\u00bb title_text=\u00bbpowerapps consulting services\u00bb url=\u00bbhttps:\/\/www.hakoit.com\/en\/power-apps-consulting-services\/\u00bb url_new_window=\u00bbon\u00bb align=\u00bbcenter\u00bb admin_label=\u00bbads power apps 1080 en\u00bb _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free JSON Formatter Online \u2014 paste or drag and drop any JSON to instantly pretty print it with color syntax highlighting. Use the Minify button to compress JSON to a single line, or switch to Tree View to explore nested objects and arrays interactively. Sort keys alphabetically, download as .json or convert arrays to CSV, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":36913,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-34335","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u27ad JSON Formatter &amp; Beautifier \u2014 Pretty Print JSON &amp; Minify Online - Hako IT<\/title>\n<meta name=\"description\" content=\"Free online JSON formatter with color syntax highlighting. Paste \/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u27ad JSON Formatter &amp; Beautifier \u2014 Pretty Print JSON &amp; Minify Online - Hako IT\" \/>\n<meta property=\"og:description\" content=\"Free online JSON formatter with color syntax highlighting. Paste \/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Hako IT\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hakoit\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-23T19:44:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/json-formatter.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Hako_it\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/\",\"name\":\"\u27ad JSON Formatter & Beautifier \u2014 Pretty Print JSON & Minify Online - Hako IT\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/json-formatter.jpg\",\"datePublished\":\"2026-03-01T15:49:44+00:00\",\"dateModified\":\"2026-05-23T19:44:16+00:00\",\"description\":\"Free online JSON formatter with color syntax highlighting. Paste \\\/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/json-formatter.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/json-formatter.jpg\",\"width\":1080,\"height\":675,\"caption\":\"json formatter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/en\\\/json-formatter-modern-pretty-json\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.hakoit.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u27ad JSON Formatter &#038; Beautifier \u2014 Pretty Print JSON &#038; Minify Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#website\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/\",\"name\":\"Hako IT\",\"description\":\"Soluciones de Software: Desarrollo - Consultor\u00eda de IT - Analytics -Marketing Digital. \u2713 Proponemos soluciones\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hakoit.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#organization\",\"name\":\"Hako IT\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Hako-Consultori\u0301a-1.png\",\"contentUrl\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Hako-Consultori\u0301a-1.png\",\"width\":597,\"height\":584,\"caption\":\"Hako IT\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hakoit\\\/\",\"https:\\\/\\\/x.com\\\/Hako_it\",\"https:\\\/\\\/www.instagram.com\\\/hako_it\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@hako-it\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u27ad JSON Formatter & Beautifier \u2014 Pretty Print JSON & Minify Online - Hako IT","description":"Free online JSON formatter with color syntax highlighting. Paste \/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/","og_locale":"es_ES","og_type":"article","og_title":"\u27ad JSON Formatter & Beautifier \u2014 Pretty Print JSON & Minify Online - Hako IT","og_description":"Free online JSON formatter with color syntax highlighting. Paste \/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV","og_url":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/","og_site_name":"Hako IT","article_publisher":"https:\/\/www.facebook.com\/hakoit\/","article_modified_time":"2026-05-23T19:44:16+00:00","og_image":[{"width":1080,"height":675,"url":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/json-formatter.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@Hako_it","twitter_misc":{"Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/","url":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/","name":"\u27ad JSON Formatter & Beautifier \u2014 Pretty Print JSON & Minify Online - Hako IT","isPartOf":{"@id":"https:\/\/www.hakoit.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/#primaryimage"},"image":{"@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/json-formatter.jpg","datePublished":"2026-03-01T15:49:44+00:00","dateModified":"2026-05-23T19:44:16+00:00","description":"Free online JSON formatter with color syntax highlighting. Paste \/ upload your JSON to pretty print, minify, collapsible tree view. Download as json or CSV","breadcrumb":{"@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/#primaryimage","url":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/json-formatter.jpg","contentUrl":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/06\/json-formatter.jpg","width":1080,"height":675,"caption":"json formatter"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hakoit.com\/en\/json-formatter-modern-pretty-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.hakoit.com\/"},{"@type":"ListItem","position":2,"name":"\u27ad JSON Formatter &#038; Beautifier \u2014 Pretty Print JSON &#038; Minify Online"}]},{"@type":"WebSite","@id":"https:\/\/www.hakoit.com\/#website","url":"https:\/\/www.hakoit.com\/","name":"Hako IT","description":"Soluciones de Software: Desarrollo - Consultor\u00eda de IT - Analytics -Marketing Digital. \u2713 Proponemos soluciones","publisher":{"@id":"https:\/\/www.hakoit.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hakoit.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.hakoit.com\/#organization","name":"Hako IT","url":"https:\/\/www.hakoit.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.hakoit.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/02\/Hako-Consultori\u0301a-1.png","contentUrl":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/02\/Hako-Consultori\u0301a-1.png","width":597,"height":584,"caption":"Hako IT"},"image":{"@id":"https:\/\/www.hakoit.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hakoit\/","https:\/\/x.com\/Hako_it","https:\/\/www.instagram.com\/hako_it\/","https:\/\/www.youtube.com\/@hako-it"]}]}},"_links":{"self":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/34335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/comments?post=34335"}],"version-history":[{"count":21,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/34335\/revisions"}],"predecessor-version":[{"id":42309,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/34335\/revisions\/42309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/media\/36913"}],"wp:attachment":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/media?parent=34335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}