JSON Formatter
Format, validate, and visualize JSON with tree view.
The JSON Formatter gives you three ways to work with JSON in one card: a formatting Editor with a Minify toggle and explicit Validate button, a collapsible Tree View of the parsed structure, and a dedicated Minified tab with its own Copy/Download pane. Paste JSON and the output formats automatically — pretty by default (2-space indent) — so you can eyeball structure, check validity, and grab compact output without bouncing between tools.
The tree view color-codes by type: strings green, numbers blue, booleans purple, null gray, objects yellow, arrays orange, with expand/collapse chevrons per node. Invalid input shows the exact JSON.parse message inline in the output area; empty input is reported as "Empty input" rather than a cryptic parser error. The card promises "Runs locally — nothing is uploaded," and it means it — every step uses the native JSON object in your browser.
How it works
lib/jsonFormatter.ts implements formatJson as JSON.parse plus JSON.stringify(parsed, null, 2) for pretty output or JSON.stringify(parsed) for minified, and validateJson returns a {valid, error} pair. jsonToTree recursively builds a collapsible tree from the parsed value, coloring nodes via getTypeColor and rendering values with formatValue (strings quoted, null as the literal). Formatting re-runs in an effect on every input or mode change.
The tree only populates when JSON.parse succeeds — the page wraps setTreeData(JSON.parse(inputText)) in try/catch, so bad input nulls treeData and shows "Valid JSON will show a tree view here." Downloads are local Blobs named formatted.json or minified.json depending on mode. No network is involved anywhere.
How to use
- Paste JSON into "Input JSON" (placeholder "Paste JSON here…").
- Output formats automatically (pretty by default); check the "Minify" checkbox to switch the Editor result to compact output.
- Click "Validate" for an explicit check — success clears the error, failure shows a destructive Alert with the JSON.parse message.
- Switch to the "Tree View" tab to explore the parsed structure with expand/collapse chevrons (helper: "Collapsible tree view of the parsed JSON structure.").
- Switch to the "Minified" tab for a dedicated compact pane with its own Copy and Download buttons.
- Use "Copy" or "Download" — files save as formatted.json or minified.json depending on mode.
- Click "Clear" to reset input, result, tree, and error together.
Tips
- Pretty mode always uses 2-space indent (JSON.stringify(..., null, 2)) — there is no indent selector.
- Tree view only populates when the input parses; invalid JSON nulls treeData and shows the empty-state message.
- Type colors come from getTypeColor — green strings, blue numbers, orange arrays — which makes nested shapes easy to scan.
- Empty input reports "Empty input" from formatJson/validateJson instead of an unhelpful syntax error.
JSON Formatter FAQ
Does it upload my JSON?
No — the card says "Format, validate, and visualize JSON. Runs locally — nothing is uploaded," and all work uses native JSON.parse/stringify.
What's the difference between the Editor and Minified tabs?
Editor shows the current format result with a Minify checkbox; the Minified tab is a dedicated compact pane with its own Copy/Download buttons.
How do I check validity quickly?
Click "Validate" — success clears the error state, failure shows the exact JSON.parse message (or "Invalid JSON" as a fallback).
Why is the tree view empty?
The tree renders only when JSON.parse succeeds; invalid input nulls treeData, so the empty state "Valid JSON will show a tree view here." remains.
Credits
- JSON (native) — formatJson/validateJson built on JSON.parse/stringify in lib/jsonFormatter.ts; no external library