Last active
February 21, 2025 14:22
-
-
Save jayliew/03ef0338b0da9fac737c2cf7db2dc1ce to your computer and use it in GitHub Desktop.
Self-contained offline JSON pretty print
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment