Building a JSON Formatter That Never Sees Your Data

#json #webdev #javascript #tutorial

Paste an API response into most formatters and it travels to a server first. Mine formats it in your browser — here is the 20 lines of JavaScript that do it.

Every developer has done it: copy a minified API response, paste it into an online JSON formatter, and read the result. It works in seconds. But stop and think about what just happened — your payload travelled to a server you do not control, got processed there, and came back. If that payload held an API key, a user record, or a production config, you just handed it to a stranger.

I built the JSON Formatter on Toolenix (https://toolenix.com) so that never happens. It formats, validates, and minifies JSON entirely in your browser. Nothing is uploaded, nothing is stored. Here is how it works.

The core idea: two built-in functions do everything

JavaScript already ships with everything a JSON formatter needs. JSON.parse() turns text into a value and throws a helpful error when the text is invalid. JSON.stringify() turns the value back into text — and its third argument controls the indentation. That is the whole engine:

function formatJSON(text, spaces = 2) {
  const parsed = JSON.parse(text);
  return JSON.stringify(parsed, null, spaces);
}

function minifyJSON(text) {
  const parsed = JSON.parse(text);
  return JSON.stringify(parsed);
}

JSON.stringify(value, null, 2) gives you two-space indentation; pass 4 for four spaces. Pass nothing at all and you get a single-line minified string. Two functions, two lines each — that is the formatter.

The part people actually need: useful errors

Formatting valid JSON is the easy half. The half that saves real time is telling the developer where their JSON is broken. JSON.parse() throws a SyntaxError, and its message already names the problem:

function tryFormat(text, spaces = 2) {
  try {
    return { ok: true, output: formatJSON(text, spaces) };
  } catch (err) {
    return { ok: false, error: `Invalid JSON: ${err.message}` };
  }
}

Feed it {"name": "Ada",} and V8 answers with something like Expected double-quoted property name in JSON at position 15. That position number points straight at the trailing comma. Chrome, Firefox, and Safari all report a position in the message, so the formatter can surface it directly instead of a generic "invalid JSON". In the Toolenix formatter, that message lands in a status banner above the output — the user sees the exact spot to fix, not a dead end.

The details that make it feel like a real tool

The formatter itself is a few lines. The behaviour around it is what makes people come back:

Two indent choices — a toggle between 2 and 4 spaces, because every team has an opinion and both should work.
Validate without reformatting — a check that only reports valid or invalid, for when you do not want your input rewritten.
Copy in one click — navigator.clipboard.writeText() on the output, because nobody wants to select 400 lines by hand.
Large payloads — parsing happens in browser memory, so multi-megabyte responses format in well under a second with no upload wait at all.
Dark mode that follows the page — small thing, but developers notice when a tool respects it.

Why client-side wins for tools like this

Privacy: an API response with tokens or personal data never leaves the device. For a developer tool, that is the feature.
Speed: no upload, no queue, no round-trip. JSON.parse on a typical response takes milliseconds.
Cost: static hosting. No server to scale, no bandwidth bill for other people's payloads.
Reliability: nothing to go down. If the page loads, the tool works — even offline after the first load.

The limits (honestly)

JSON.parse is strict, and that is both its strength and its limit. It rejects trailing commas, single quotes, and comments — all things developers paste in from config files and logs. The formatter reports those as errors rather than guessing what you meant, which is the right call for a validator but means it will not silently "fix" sloppy JSON for you. Very large files can also spike memory, since the whole document is parsed at once. For a free web tool, though, it is more than good enough.

Try it

The formatter is live at https://toolenix.com/tools/json-formatter — free, no sign-up, and your JSON never leaves your browser. The whole site is built on the same idea: 113 tools, all client-side.

DEV Community