Skip to content

Instantly share code, notes, and snippets.

@jayliew

jayliew/offline-json-pretty-print.html

Last active February 21, 2025 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jayliew/03ef0338b0da9fac737c2cf7db2dc1ce to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jayliew/03ef0338b0da9fac737c2cf7db2dc1ce to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jayliew renamed this gist Feb 21, 2025. 1 changed file with 0 additions and 0 deletions.
    0 json-pretty-print.html → offline-json-pretty-print.html
    View file
    File renamed without changes.
  2. jayliew revised this gist Feb 21, 2025. 1 changed file with 11 additions and 4 deletions.
    15 changes: 11 additions & 4 deletions json-pretty-print.html
    View file
    Original file line number Diff line number Diff line change
    @@ -60,25 +60,32 @@
    </head>
    <body>
    <h1>JSON Pretty Printer</h1>
    <textarea id="jsonInput" placeholder="Paste your JSON string here..."></textarea>
    <textarea id="jsonInput" placeholder="Paste your JSON string here..." oninput="updateOutput()"></textarea>
    <div class="checkbox-container">
    <input type="checkbox" id="interpretNewlines">
    <input type="checkbox" id="interpretNewlines" onchange="updateOutput()">
    <label for="interpretNewlines">Interpret newlines</label>
    </div>
    <button onclick="prettyPrintJSON()">Submit</button>
    <button onclick="updateOutput()">Submit</button>
    <div id="output"></div>

    <script>
    let uniqueId = 0;
    let lastJsonObj = null;

    function prettyPrintJSON() {
    function updateOutput() {
    const input = document.getElementById('jsonInput').value;
    const output = document.getElementById('output');
    const interpretNewlines = document.getElementById('interpretNewlines').checked;
    uniqueId = 0;

    if (!input.trim()) {
    output.innerHTML = '';
    return;
    }

    try {
    const jsonObj = JSON.parse(input);
    lastJsonObj = jsonObj; // Store the parsed object
    output.innerHTML = formatJSON(jsonObj, 0, interpretNewlines);
    addClickListeners();
    } catch (e) {
  3. jayliew revised this gist Feb 21, 2025. 1 changed file with 24 additions and 7 deletions.
    31 changes: 24 additions & 7 deletions json-pretty-print.html
    View file
    Original file line number Diff line number Diff line change
    @@ -52,48 +52,65 @@
    .hidden {
    display: none;
    }

    .checkbox-container {
    margin: 10px 0;
    }
    </style>
    </head>
    <body>
    <h1>JSON Pretty Printer</h1>
    <textarea id="jsonInput" placeholder="Paste your JSON string here..."></textarea>
    <div class="checkbox-container">
    <input type="checkbox" id="interpretNewlines">
    <label for="interpretNewlines">Interpret newlines</label>
    </div>
    <button onclick="prettyPrintJSON()">Submit</button>
    <div id="output"></div>

    <script>
    let uniqueId = 0; // Counter for unique identifiers
    let uniqueId = 0;

    function prettyPrintJSON() {
    const input = document.getElementById('jsonInput').value;
    const output = document.getElementById('output');
    uniqueId = 0; // Reset counter for new JSON
    const interpretNewlines = document.getElementById('interpretNewlines').checked;
    uniqueId = 0;

    try {
    const jsonObj = JSON.parse(input);
    output.innerHTML = formatJSON(jsonObj, 0);
    output.innerHTML = formatJSON(jsonObj, 0, interpretNewlines);
    addClickListeners();
    } catch (e) {
    output.innerHTML = 'Invalid JSON: ' + e.message;
    output.style.color = 'red';
    }
    }

    function formatJSON(obj, indentLevel) {
    function formatJSON(obj, indentLevel, interpretNewlines) {
    const indent = ' '.repeat(indentLevel);
    let html = '';

    if (typeof obj !== 'object' || obj === null) {
    return `<span class="json-value">${JSON.stringify(obj)}</span>`;
    let valueStr = JSON.stringify(obj);
    if (interpretNewlines && typeof obj === 'string') {
    valueStr = `"${obj.replace(/\n/g, '<br>')}"`;
    }
    return `<span class="json-value">${valueStr}</span>`;
    }

    for (const [key, value] of Object.entries(obj)) {
    const currentId = uniqueId++;
    html += `${indent}<span class="json-key" data-id="${currentId}">${key}</span>: `;

    if (typeof value === 'object' && value !== null) {
    html += `\n${formatJSON(value, indentLevel + 1)}`;
    html += `\n${formatJSON(value, indentLevel + 1, interpretNewlines)}`;
    } else {
    html += `<span class="json-value" data-id="${currentId}">${JSON.stringify(value)}</span>\n`;
    let valueStr = JSON.stringify(value);
    if (interpretNewlines && typeof value === 'string') {
    valueStr = `"${value.replace(/\n/g, '<br>')}"`;
    }
    html += `<span class="json-value" data-id="${currentId}">${valueStr}</span>\n`;
    }
    }

  4. jayliew created this gist Feb 21, 2025.
    116 changes: 116 additions & 0 deletions json-pretty-print.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Pretty Printer</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    }

    textarea {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    font-family: monospace;
    }

    button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    }

    button:hover {
    background-color: #45a049;
    }

    #output {
    margin-top: 20px;
    font-family: monospace;
    white-space: pre-wrap;
    }

    .json-key {
    color: #2c3e50;
    cursor: pointer;
    font-weight: bold;
    }

    .json-value {
    color: #e74c3c;
    margin-left: 20px;
    }

    .hidden {
    display: none;
    }
    </style>
    </head>
    <body>
    <h1>JSON Pretty Printer</h1>
    <textarea id="jsonInput" placeholder="Paste your JSON string here..."></textarea>
    <button onclick="prettyPrintJSON()">Submit</button>
    <div id="output"></div>

    <script>
    let uniqueId = 0; // Counter for unique identifiers

    function prettyPrintJSON() {
    const input = document.getElementById('jsonInput').value;
    const output = document.getElementById('output');
    uniqueId = 0; // Reset counter for new JSON

    try {
    const jsonObj = JSON.parse(input);
    output.innerHTML = formatJSON(jsonObj, 0);
    addClickListeners();
    } catch (e) {
    output.innerHTML = 'Invalid JSON: ' + e.message;
    output.style.color = 'red';
    }
    }

    function formatJSON(obj, indentLevel) {
    const indent = ' '.repeat(indentLevel);
    let html = '';

    if (typeof obj !== 'object' || obj === null) {
    return `<span class="json-value">${JSON.stringify(obj)}</span>`;
    }

    for (const [key, value] of Object.entries(obj)) {
    const currentId = uniqueId++;
    html += `${indent}<span class="json-key" data-id="${currentId}">${key}</span>: `;

    if (typeof value === 'object' && value !== null) {
    html += `\n${formatJSON(value, indentLevel + 1)}`;
    } else {
    html += `<span class="json-value" data-id="${currentId}">${JSON.stringify(value)}</span>\n`;
    }
    }

    return html;
    }

    function addClickListeners() {
    const keys = document.getElementsByClassName('json-key');
    Array.from(keys).forEach(key => {
    key.addEventListener('click', function() {
    const value = this.parentElement.querySelector(`.json-value[data-id="${this.dataset.id}"]`);
    if (value) {
    value.classList.toggle('hidden');
    }
    });
    });
    }
    </script>
    </body>
    </html>