JSON Studio: format, validate and diff in one page

Why it exists

I handle JSON more often than I expect: API responses, config files, log fragments. Every time I typed a throwaway command in a terminal and lost it. Three things kept hurting: structure is hard to read in long documents, error positions are guesswork, and differences between two documents can only be eyeballed.

So the tool exists to handle exactly those three.

Four actions

Formatting and minifying are the basic pair. Sorting walks keys recursively, and its purpose is not aesthetics: without it, two documents with identical structure and different key order compare as completely different. Normalising before comparing deserves a button.

Validation got more attention than I planned. Saying valid or invalid is useless; the message JSON.parse throws is nearly impossible to place in a document thousands of lines long. On failure the tool converts the offset into a line and column and points at it.

Why diffing is lazily loaded

Structural comparison is not something every visit needs, and it is not small. So the diff logic loads through a runtime import(): only when you open compare mode does that chunk download. It is the third layer of this site’s async loading: route-level splitting, hydration-level delay, runtime on demand.

The cost is a brief wait on the first open, which a loading state absorbs. For this trade it is worth it.

Everything runs locally

There is no backend; all parsing happens in the browser. For a tool page that is a floor rather than a feature: nobody wants to paste keys, tokens or internal hostnames into a stranger’s server.

What I learned

A tool’s first version is always feature-complete and wrongly ordered. The order that survived is structure first, errors second, comparison last, because that is the order I actually use it in. Feature lists are easy to write; ordering only comes from having used the thing.