Add JSON Formatter tool

[02karthik]

What is this tool?

JSON Formatter — a single-file, fully offline utility to beautify, minify, and validate JSON. It's for anyone who lands on a wall of unformatted JSON (an API response, a config, a copied payload) and wants it readable, valid, and copyable without leaving the workspace or sending data to a web service.

The catalog already has a developer-utility cluster (Diff Checker, Regex Tester, Contrast Checker, Markdown Table, Unit Converter) but nothing for JSON — the single most common structured format people paste around. This fills that gap. It was not attempted in any prior closed PR.

What it does

• Beautify with 2-space, 4-space, or tab indentation
• Minify to a single compact line
• Sort keys — recursive, alphabetical, for stable and diffable output
• Live validation with pinpoint line X, column Y error locations
• Syntax highlighting for keys, strings, numbers, booleans, and null
• Stats row: lines, characters, nesting depth, and key count
• Copy input or output, load sample data, and input persists in localStorage

Checklist

• It's a single file: json-formatter/index.html with all CSS + JS inline.
• It is fully self-contained / offline — no remote fonts, scripts, styles, images, fetch, or import.
• No analytics, trackers, or phone-home behavior.
• Added a screenshot at screenshots/json-formatter.webp (via npm run screenshot json-formatter).
• Registered the tool in tools.json (dir matches the folder name).
• Bumped the top-level catalogVersion (25 → 26).
• New tool — per-tool version is 1.
• npm run validate passes locally.

Notes for reviewers

• Design system: azure accent only, 24px card/button radii, and every colour — including the illustrative JSON syntax tokens — goes through a CSS variable defined in both :root and the prefers-color-scheme: dark block. Verified in both light and dark; the CTA flips polarity correctly (light azure fill + near-black label in dark).
• Syntax highlighting is safe: the highlighter only ever tokenises JSON that the tool itself produced via JSON.stringify, and all text is HTML-escaped before insertion — no eval, no innerHTML of user input.
• Error locations: parses the position out of the engine's SyntaxError and computes line/column; when the engine already reports line X column Y it's passed through unchanged to avoid duplication.
• No network / no bridge: clipboard uses the async Clipboard API with a document.execCommand fallback; nothing else touches I/O.

---

Generated by Claude Code