The latest articles on DEV Community by Tommy (@tommy_art). https://dev.to/tommy_art https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3893356%2F201566df-5426-4804-8ad9-ee921f371d2c.png https://dev.to/tommy_art en Tommy Thu, 23 Apr 2026 03:35:59 +0000 https://dev.to/tommy_art/why-i-built-yet-another-json-formatter-and-what-i-did-differently-4am3 https://dev.to/tommy_art/why-i-built-yet-another-json-formatter-and-what-i-did-differently-4am3 <p>I've been pasting JSON into random online tools for years. Formatter, type generator, diff —<br> you name it, there's already 10 versions of it online.</p> <p>So why build another one?</p> <p>One day I was debugging a prod API response and copy-pasted the payload into the first<br> JSON formatter that came up in Google. Then I looked at the network tab.</p> <p>It had sent my data to a server.</p> <p>Not a big deal in isolation, but it got me thinking: how many times have I done this<br> without checking? How many times has someone on my team done it?</p> <h2> What I built </h2> <p><a href="https://jsonic.io" rel="noopener noreferrer">Jsonic</a> — a small toolkit of JSON utilities that run entirely<br> in the browser. No server. No uploads. Nothing leaves your machine.</p> <p>Current tools:</p> <ul> <li> <strong>Formatter / Minifier / Validator</strong> — the basics, done cleanly</li> <li> <strong>JSON → TypeScript</strong> — infers proper types including nested objects, arrays, nullable fields</li> <li> <strong>JSON → CSV</strong> — handles nested structures by flattening</li> <li><strong>JSON → YAML</strong></li> <li><strong>CSV → JSON</strong></li> <li> <strong>JSON Diff</strong> — structural diff, not a naive text comparison</li> </ul> <h2> The interesting technical bits </h2> <p>The TypeScript inference was harder than expected. The naive approach (just map<br> JSON types to TS primitives) falls apart quickly:</p> <ul> <li>Arrays with mixed types → <code>(string | number)[]</code> </li> <li>Fields that are <code>null</code> in the sample but probably typed → <code>string | null</code> </li> <li>Deeply nested objects → recursive interface generation</li> </ul> <p>The diff was the other tricky one. Text diff on JSON is nearly useless — whitespace<br> and key order changes produce noise. I implemented a structural diff that compares<br> the parsed objects, which means reordered keys and re-formatted values don't show<br> up as changes.</p> <h2> What's next </h2> <p>More tools (TOML, XML, Base64), and eventually some light content so it ranks for<br> the searches that bring people to these tools in the first place.</p> <p>If you use JSON tools regularly, I'd love to know what you reach for most.</p> webdev javascript tooling productivity