chrome-extensionjson-diffjwtdevtoolsbrowser

JSONKit for Chrome: Auto Tree View, Local JSON Diff, JWT Decode & a DevTools Panel

·7 min read·Tool Guides

Reading JSON shouldn't require leaving the page

Copying an API response out of the Network tab, pasting it into a separate formatter tab, then pasting the result back to compare against another response is a small tax you pay dozens of times a day if you work with APIs. The JSONKit Chrome extension folds that whole loop into the browser itself: any JSON page or API response auto-renders as an interactive tree the moment it loads, and a handful of tools that used to mean "open another tab" — a diff, a JWT decoder, a network capture panel — now live one click away.

It's a Manifest V3 extension with zero network permissions: every feature below runs entirely on-device, with no analytics and nothing ever uploaded. It's live on the Chrome Web Store — free, no account required.

Auto-rendered JSON pages

Open any .json URL or a raw API endpoint and the extension replaces the browser's plain-text view with a collapsible, syntax-highlighted tree — searchable, with a keys · depth · size readout, and click-to-copy on any key to grab its JSON path (e.g. user.address.city) instead of hand-typing a path expression.

A local JSON diff, without a second tab

Press Alt+C (or open the workbench and click Diff) to paste two JSON documents side by side and get a proper line-level diff — additions and deletions highlighted — computed entirely in your browser. It's the same use case as JSONKit's web-based JSON Diff tool, just reachable without switching tabs, which matters most when you're mid-debug comparing a staging response against production:

json
// left — staging
{ "user": { "id": 91, "plan": "pro", "betaFlags": ["new-nav"] } }

// right — production
{ "user": { "id": 91, "plan": "free" } }

The diff immediately shows plan changed and betaFlags is missing on the right — exactly the kind of environment drift that's tedious to spot by eye in two raw payloads.

Instant JWT decoding

Paste a raw JWT into the workbench and its header and payload decode inline, with the expiry (exp) shown in human-readable form — no network call, since a JWT's payload is just Base64URL-encoded JSON. This is a read/decode operation only: the extension doesn't verify a signature (that requires the issuer's key), it just makes the two decoded JSON blocks legible instead of a wall of dot-separated Base64.

Tolerant parsing for NDJSON and JSONC-style payloads

Not every "JSON" page is strict JSON. Log-streaming endpoints emit newline-delimited JSON (one object per line, no wrapping array), and some config-shaped responses include // comments or a trailing comma left over from a hand-edited JSONC file. When strict JSON.parse fails, the extension now falls back in order:

  1. NDJSON — treats each line as its own JSON value and combines them into one array for the tree view.
  2. JSONC-lite — strips // and /* */ comments and trailing commas, then retries.
  3. Only if both fail does it show the original error, so far more real-world payloads render as a tree instead of falling back to plain text.

A DevTools panel for JSON network responses

Open Chrome DevTools → the JSONKit panel and every JSON response your page loads gets captured automatically — method, status code, and size are shown per entry, filterable by any of them. Click an entry to explore it in the same tree view as the page-level auto-render, or export the whole captured session as a file when you need to hand a full request log to a teammate or attach it to a bug report.

Right-click to format any selection

Select any blob of JSON text on a page — inside a <pre>, a chat log, a support ticket, anywhere — right-click, and choose "Format selection in JSONKit" to open it prefilled in the workbench. Useful for the JSON that shows up outside of a dedicated API response, e.g. pasted into a support tool or logged inline in an HTML page.

Sending JSON on to the rest of the toolkit

The extension's workbench isn't a dead end — an "Open in…" action hands the current JSON straight to JSONKit's Formatter, Schema Generator, JSONPath Tester, or the JSON → CSV/YAML/XML/TypeScript converters, so going from "I found this JSON on a page" to "I converted it to a TypeScript interface" never needs a copy-paste round trip.

Frequently asked questions

No. Every feature — the tree view, the diff, JWT decoding, and the DevTools panel — runs locally in the browser. The extension has no network permissions and makes no requests; recent-input history is stored only in the browser's local storage.

Yes, within reason — if strict parsing fails, it retries as NDJSON (one JSON value per line) and then as JSONC (tolerating ////* */ comments and trailing commas) before giving up and showing the original parse error.

No — it only decodes and displays the header and payload (both are just Base64URL-encoded JSON by design). Verifying a signature requires the issuer's signing key, which the extension has no way to know.

The page-level view renders whatever JSON document the current tab is displaying (e.g. you navigated directly to an API endpoint). The DevTools panel instead captures every JSON network response your page makes in the background while you browse normally, so you can inspect an XHR/fetch response without navigating to its URL directly.

It's built on Manifest V3, so it works in Chrome, Edge, Brave, and any other Chromium-based browser.

Directly from the Chrome Web Store — it's free, takes one click, and requires no account. See jsonkit.in/chrome-extension for the full feature tour and keyboard shortcuts.

Try JSONKit — JSON Developer Tools

Format, validate, convert and diff JSON. Instant, accurate and 100% private.