JSON editor guide — format, compare & validate | Itqan

A 500-status response with a trailing comma, a config diff after a deploy, or a paste from Slack wrapped in triple backticks — broken or unreadable JSON shows up constantly in API work. The JSON editor on Itqan gives you two side-by-side panels, text and tree modes, validation with line numbers, one-click repair, structural compare, and JMESPath/JSONPath transforms — all in the browser tab you already have open. Nothing is uploaded for formatting, validation, or diffing. This guide is written specifically for that tool: how the dual-pane layout works, when to reach for each action, and workflows that replace copy-paste loops through jq or IDE tabs.

What is the JSON editor?

Itqan’s JSON editor is a browser workspace built on vanilla-jsoneditor — syntax highlighting, tree browsing, and table view without installing Node or a desktop app. Each pane is a small document: new, open, save, copy, repair, transform, fullscreen.

It complements your IDE. Use it to inspect one API payload, diff two settings.json versions, or pull a nested field in under a minute. For multi-file refactors, your project editor still wins.

Dual panes and center bar

Open the JSON editor. The workspace has three zones: left panel, a narrow center column, and right panel. Drag the vertical splitter in the center to give more room to whichever side you are working on.

Each panel has a dark document menubar at the top:

1. New — clears the pane to an empty document.
2. Open — load a .json or .txt file from disk, or fetch JSON from a URL (CORS permitting).
3. Save / Download — export the current pane as a file once the JSON parses.
4. Copy — clipboard as formatted (indented) or minified (single line).
5. More — Repair JSON, Transform, and copy content to the opposite pane.
6. Fullscreen — expand one pane to the viewport for long documents.

The center column groups cross-pane actions: copy left ↔ right, open transform on either side, and toggle Compare. When compare is active, changed paths highlight in both editors; use the up/down arrows to jump between differences and read the counter (e.g. 3/12).

When you need it

• Development: pretty-print a minified API response before reading nested fields.
• Debugging: locate the exact line where a comma, bracket, or quote is wrong.
• Code review: paste old and new config side by side and walk through diffs.
• Production prep: minify JSON for smaller HTTP payloads or environment files.
• Data extraction: run a JMESPath query to keep only the fields your script needs.
• Learning: switch to tree mode and expand objects until the shape clicks.
• Support tickets: repair slightly invalid JSON a customer pasted from a spreadsheet export.

Feature map

Text, tree, and table modes

Each pane offers text (paste and edit raw JSON with syntax highlighting), tree (expand nested paths like data.items[0].attributes without scrolling), and table (skim uniform object arrays). Validation runs in every mode; invalid text shows errors below until you repair or fix syntax. Mixed-shape arrays render uneven tables — use tree mode or JMESPath first.

Walkthrough: pretty-print an API response

Copy the response body from DevTools or curl. Paste into the left pane. Use Copy (formatted) once valid, rename the document title to the endpoint name, and download if you need an attachment.

Walkthrough: fix a syntax error

Paste invalid JSON — trailing commas, single quotes, or unquoted keys are common. Read the line-level error under the pane, then open More → Repair JSON. Repair strips fences, zero-width characters, trailing commas, and quotes bare keys. Fix any remainder manually — often a missing bracket mid-file.

Walkthrough: diff two config versions

Put old config.json left and new right. Click Compare once both sides parse. Step through highlights with prev/next; renamed fields show as removed plus added paths. Copy the winning side across with center arrows, then download.

Walkthrough: extract fields with JMESPath

Paste a large API payload into the right pane. Open More → Transform (or the center transform button). Choose JMESPath as the query language. Example: users[?active==\`true\`].email to list active user emails. The preview panel shows the filtered JSON before you apply. Apply writes the result back into that pane — chain another query if needed. JSONPath and a JavaScript filter are available when JMESPath syntax is awkward for your shape.

Walkthrough: Slack paste with backticks

Chat exports often wrap JSON in ```json fences or prefix with the word json on its own line. Paste as-is into either pane and run Repair JSON. The cleaner strips those wrappers before parse. If someone sent a fragment like name: "Ada", age: 30 without outer braces, basic repair wraps it in { } and quotes keys. Always re-validate before trusting automated fixes on production config.

Walkthrough: webhook line from logs

Logs often embed JSON inside quoted strings. Copy the line to the left pane; if quotes are escaped, unescape in the encoder/decoder first. Run Repair JSON for truncated braces, then use tree mode to expand payload or body.

Transform wizard: filter, sort, pick

The transform modal includes a wizard that builds JMESPath for you: pick a filter field, operator, and value; add sort direction; multi-select fields to project. The preview updates live — click Apply only when the output looks right. Switch language via the gear menu (JMESPath, JSONPath, or JavaScript filter).

Cross-pane copy workflow

Center arrows copy a full document left ↔ right. Typical loop: paste API response left, copy to right, transform right to extract fields, compare, download the trimmed pane.

Browser-only processing

Formatting, validation, repair, compare, and transform run in JavaScript in your tab — nothing is POSTed to a server. Clear both panes on shared machines; local processing does not erase clipboard history. URL fetch is a direct browser request — use trusted endpoints only.

Honest limits

• Very large files (multi-megabyte) may slow the tab — split or sample when possible.
• Repair is heuristic — it fixes common mistakes, not every invalid document. Semantic errors (wrong field types) pass validation.
• Compare is structural — reordering keys may show spurious diffs even when data is equivalent.
• Open from URL depends on CORS — many APIs block browser fetches; paste or upload instead.
• Not a JSON Schema IDE — document properties show schema slots, but full schema authoring belongs in dedicated tools.
• JSON only — YAML, TOML, or XML need conversion elsewhere before pasting here.

Mistakes that look like bugs

Comparing before both sides parse

Compare stays empty or shows an error when one pane still has a syntax error. Repair or fix that side first — the diff counter appears only on valid JSON.

Expecting repair to fix logic

Repair makes invalid syntax valid. It will not correct "price": "19.99" (string) to a number — that requires a deliberate edit or transform.

Minifying secrets into tickets

Minified JSON is harder to redact. Prefer formatted copy when sharing excerpts; rotate any token that appeared in a screenshot.

Ignoring invisible characters

BOM marks and zero-width spaces from Word or PDF break parsers. Repair strips many of them; if errors persist, re-type the suspicious line.

Using table mode on ragged arrays

Arrays whose objects have different keys render uneven tables. Switch to tree mode or JMESPath to normalize first.

Short answers

Pair with other tools

• Encoder & decoder — Base64-decode a blob before pasting JSON here
• Text case converter — trim, sort lines, or clean log excerpts before parse
• Case converter — normalize keys before building a payload

Handoff checklist for API and config JSON

Validate in the JSON editor, encode awkward strings with the encoder/decoder if a gateway mangles Unicode, and never commit secrets into shared pastes. Clear the editor on public PCs when done.

Pretty-print before you diff two config versions so missing commas stand out. Keep the JSON editor tab dedicated to one payload at a time to avoid mixing staging and production keys.