JSON Formatter

Right-click to format JSON / CSV / XML / YAML as an editable tree. Convert between all four, side-by-side diff, JSONPath, types.

Right-click any element → "Format JSON" to turn the one-line JSON on API consoles, log viewers and admin dashboards into a collapsible, searchable, editable tree — right where it is. Not just JSON: CSV, XML and YAML are detected automatically too, and you can convert between all four formats in one click. Everything runs locally in your browser; no data ever leaves the page. FORMAT DETECTION & CONVERSION • Convert between JSON / CSV / XML / YAML in one click: "⋯" → "Convert format", then copy the result or download .json / .csv / .xml / .yaml • Auto-detects CSV / XML / YAML from right-click, the selected-text shortcut and the paste dialog, and shows them as a tree — search, edit, JSONPath, type generation and diff all keep working • CSV headers like a.b.c are restored to nested objects; XML attributes, text and repeated elements are mapped correctly; YAML supports nesting, lists, flow style, block scalars and comments • Fault-tolerant parsing: finds the complete JSON node; handles callback({...}) wrappers, escaped text and double encoding; auto-closes content truncated by log viewers; a line mixing several JSON blobs is split into separate panels VIEW • Collapsible tree with one-click depth 1–5 or all; huge arrays render in batches • Table view for arrays of objects, with sortable columns and placeholders for missing fields • Side-by-side panels: pin, move them out of the way, highlight and locate the source element on the page; each panel resizes independently • Paste or type: right-click the toolbar icon → "Paste / Type JSON to format…" and drop in content copied from anywhere • Raw .json URLs are formatted automatically FIND • Search keys and values (regex supported), including collapsed nodes; filter mode shows only matching branches • JSONPath queries: wildcards, recursive descent, slices, filter expressions; copy results as a JSON array • Copy the path of any node (JS or JSONPath style); breadcrumbs show where you are and every segment is clickable MODIFY & CONVERT • Edit values or the raw text with live validation and red error highlighting; click the status bar to jump to the error • One-click lenient repair: single quotes, comments, trailing / missing commas, unquoted keys, True / None / undefined, hex numbers • Smart decoding of timestamps, JWT, Base64, URL encoding, JSON inside strings and image links — expand layer by layer; edited decoded values are re-encoded in the original format automatically • Color detection with a color picker: #hex, 0xAARRGGBB, rgb() / rgba() / hsl(), written back in the original notation • Diff two tasks in merged or side-by-side view, with a changes-only mode and an exportable change list • Generate TypeScript / Kotlin / ArkTS type definitions from an editable source path • Sort keys, escape / unescape, minify / format • Export as .json / .csv / .xml / .yaml files ALSO • English and Chinese UI; light and dark themes follow the system • Keeps big-integer precision and the original key order (which the built-in JSON.parse cannot do) • Shortcuts: Alt+Shift+J toggles the panels, Alt+Shift+F formats the selected text • Styles isolated in Shadow DOM, no innerHTML, works on pages with strict CSP PRIVACY No data is collected or transmitted. No analytics, no ads. Settings are stored on your device only. If it saves you time, you can support the author from "☕ Buy me a coffee" at the bottom of the extension's settings page, or at ko-fi.com/chestershen.