DEV Community

Li Yi
Li Yi

Posted on

Format JSON without pasting it into a random website

The problem

You hit an API, get a 4,000-character single line back, and need it readable. So you search "online json formatter", paste the response into the first site that loads, and press Format.

That response probably contains access tokens, customer records, internal hostnames — data you would not email to a stranger. Yet the paste box on a no-name domain has no particular reason to be more trustworthy, and nothing on the page tells you where the bytes went.

Here are three ways to get formatted JSON without it leaving your machine, plus a two-minute way to check whether any online formatter is telling the truth about it.

1. The DevTools one-liner (fastest)

Open the console and run:

JSON.stringify(JSON.parse(rawString), null, 2)
Enter fullscreen mode Exit fullscreen mode

The null, 2 is the pretty-print part: second argument is a replacer, third is the indent — 2, 4, or a "\t" string. If the payload is an array of objects, console.table(JSON.parse(rawString)) is often more readable than the tree.

Zero installs, zero uploads. The catch is the failure mode: if the input is invalid, JSON.parse throws and the message is frequently useless — "Unexpected token } in JSON at position 2471". Which line? Which column? You get neither.

2. Command line

jq . < response.json     # pretty-print
jq -c . < response.json  # minify to one line
Enter fullscreen mode Exit fullscreen mode

or without jq installed:

node -e 'const fs=require("fs");process.stdout.write(JSON.stringify(JSON.parse(fs.readFileSync(0,"utf8")),null,2))' < response.json
Enter fullscreen mode Exit fullscreen mode

Good for files you already have on disk. Awkward for the "select 300 lines from a log, make it readable, move on" case — and jq is not on a default Windows box.

3. A purely client-side web page

This is the gap I eventually filled with ToolStack — essentially the browser version of jq, without the trust question. The JSON formatter page covers:

  • Format with 2 spaces / 4 spaces / tab
  • Minify to a single line
  • Validate with an error panel showing line, column and character offset, not just a raw parser message
  • Syntax highlighting and line numbers in both input and output, so a 3,000-line response is skimmable
  • Copy, download as formatted.json, and Ctrl/Cmd + Enter to format from the keyboard

One implementation detail worth knowing, because it is the difference between "useful" and "annoying": V8 does not include a position in every JSON.parse error class — {"a":} yields none at all. Recovering it means parsing the text a second time with a tolerant grammar parser (the Lezer JSON parser here) and taking the offset of the first error node. That is what lets the UI point at a line instead of shrugging.

No request is made either way: the input goes through JSON.parse inside the page, so there is nothing on the wire to sniff.

How to verify any "runs locally" claim yourself

Three checks, about two minutes:

  1. DevTools → Network → filter on fetch/XHR. Paste a large blob, hit Format, watch for outgoing requests. Nothing should appear except analytics beacons — and note that telemetry is a separate question from your data being uploaded, so check what those payloads actually contain.
  2. Pull the plug. With the page loaded, tick "Offline" in the Network panel (or switch off your adapter) and run the tool again. If it still works, the computation is local.
  3. Read the client. View source and grep the bundle for fetch(, XMLHttpRequest, FormData, navigator.sendBeacon. A genuine client-side tool has its whole logic in the browser.

Disclosure for my own page, since the above is how I would audit it: GA4 page-level analytics is on; tool input and output are never captured; there is no account system and nothing is stored server-side.

If you want to look around

32 tools in total — JSON, Base64, image compression and format conversion (JPG/PNG/WebP/HEIC), color pickers and converters, unit conversion, calculators, QR codes — in 7 languages, no sign-up.

https://tools.mindutil.com/

Top comments (1)

Collapse
 
suppdevbot profile image
DEV SUPPORTS •

You need to verify your account.

Enter fullscreen mode Exit fullscreen mode

tr.ee/dev-to