Add shortcut to %ProgramData%\Microsoft\Windows\Start Menu\Programs.
Last active
March 2, 2026 18:27
-
-
Save MarkTiedemann/6fdc6b712d2c36637bd8ce5193cdfd5d to your computer and use it in GitHub Desktop.
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> | |
| <meta http-equiv="x-ua-compatible" content="ie=11"> | |
| <meta charset="utf-8"> | |
| <title>JSON Formatter</title> | |
| <style> | |
| body { | |
| margin: 20px; | |
| height: calc(100vh - 40px); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .success { | |
| background-color: rgb(226, 241, 226); | |
| } | |
| .error { | |
| background-color: rgb(224, 77, 106); | |
| } | |
| textarea, | |
| select, | |
| footer div { | |
| font-family: "Segoe UI"; | |
| font-size: 14px; | |
| } | |
| main { | |
| flex-grow: 1; | |
| margin-bottom: 20px; | |
| } | |
| textarea { | |
| width: calc(100% - 6px); | |
| height: 100%; | |
| } | |
| footer { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| } | |
| footer div { | |
| flex-grow: 1; | |
| } | |
| </style> | |
| <main> | |
| <textarea></textarea> | |
| </main> | |
| <footer> | |
| <div>Automatically formats the content and copies it to your clipboard. Press <q>Escape</q> or <q>Control + Q</q> to close.</div> | |
| <select> | |
| <option value="tabs" selected>Tabs</option> | |
| <option value="0">Compact</option> | |
| <option value="2">2 Spaces</option> | |
| <option value="4">4 Spaces</option> | |
| <option value="8">8 Spaces</option> | |
| </select> | |
| </footer> | |
| <script> | |
| var width = 850; | |
| var height = 600; | |
| resizeTo(width, height); | |
| moveTo( | |
| (screen.availWidth / 2) - (width / 2), | |
| (screen.availHeight / 2) - (height / 2) | |
| ); | |
| var textarea = document.querySelector("textarea"); | |
| var select = document.querySelector("select"); | |
| textarea.addEventListener("input", formatAndCopyToClipboard); | |
| select.addEventListener("change", formatAndCopyToClipboard); | |
| addEventListener("keyup", function(event) { | |
| if (event.key === "Esc" || (event.key === "q" && event.ctrlKey)) { | |
| event.preventDefault(); | |
| close(); | |
| } | |
| }); | |
| function formatAndCopyToClipboard() { | |
| try { | |
| var parsedData = JSON.parse(textarea.value); | |
| var formattedText = JSON.stringify(parsedData, null, getFormattingString()); | |
| textarea.value = formattedText; | |
| clipboardData.setData("Text", formattedText); | |
| document.body.className = "success"; | |
| } catch (e) { | |
| document.body.className = "error"; | |
| } | |
| } | |
| function getFormattingString() { | |
| var optionValue = select.options.item(select.selectedIndex).value; | |
| if (optionValue === "tabs") { | |
| return "\t"; | |
| } else { | |
| return getNSpaces(parseInt(optionValue)); | |
| } | |
| } | |
| function getNSpaces(n) { | |
| var spaces = ""; | |
| for (var i = 0; i < n; i++) { | |
| spaces += " "; | |
| } | |
| return spaces; | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment