JSON Editor & Viewer

Editing JSON in a plain text editor is an exercise in paranoia. One misplaced comma, one unbalanced brace, one unescaped quote, and the whole document is invalid — and the error only appears when the parser finally runs. For a config file, a webhook payload or a fixture, the syntax is never the point; the structure and the values are, and text editing forces you to fight the syntax to reach them.

JSON Editor & Viewer gives you both worlds. A text pane with live validation, pretty-print and minify for precision work, and a collapsible tree view where objects and arrays fold away, values are edited in proper input fields, keys are renamed with a double-click, and nodes are added or deleted with a button. Every edit in the tree is valid JSON by construction — no stray commas, no broken quotes. Both panes edit the same model and stay in sync, errors are flagged with their position, and everything runs in your browser.

• Collapsible tree view: Objects and arrays expand and collapse, making nested payloads browsable in seconds.
• Split editing: Text and tree panes side by side, both live-synced to the same data.
• Inline value editing: Strings, numbers and booleans edit in proper fields; nulls convert to any type as you type.
• Structural editing: Add keys, add array items, delete nodes and rename keys with double-click — all without touching syntax.
• Live validation: Invalid text is flagged with its position while the tree keeps the last valid version.
• Pretty and minify: One-click reformatting, both directions.
• Mode switching: Text only, tree only, or split — pick the right tool for the job.
• Copy, download, sample: Export your edited JSON in one click, or load a realistic sample.
• Private: All processing is client-side; nothing is uploaded.

1. Paste JSON into the text pane or load the sample. The document is validated as you type.
2. Switch to split or tree mode to browse the structure — collapse nested objects to see the shape at a glance.
3. Edit values inline: click a field, change it, move on. Booleans are checkboxes; nulls convert to whatever you type.
4. Restructure freely: add keys or items, delete nodes, double-click a key to rename it.
5. Pretty-print or minify the text, then copy or download the result.

Example 1 — Tuning a config file. An application config has 40 keys across 6 levels. Tree mode collapses the sections, shows the shape, and lets you flip the debug flag and update the rate limit without touching a brace.

Example 2 — Fixing a broken webhook payload. A vendor payload has an unescaped quote deep inside a nested object. The validator flags the exact position; you repair one value in tree mode and the document is valid again.

Example 3 — Building a test fixture. You need a fixture with the same shape as production data but different values. Load the production sample, use the tree to delete the sensitive nodes, rename keys, and export a clean fixture.

Example 4 — Explaining an API response. During a review you collapse the response to its top-level shape first, then expand each branch in turn — the tree makes the structure the presentation.

• Stop breaking JSON with a stray comma: Tree edits are valid by construction.
• See the structure, not the syntax: Collapsible nodes make nested data comprehensible at a glance.
• Edit faster: Values, keys and nodes change in one click, not one regex.
• Never lose the last valid state: The tree preserves the last parseable version while you fix the text.
• Safe for sensitive data: Client-side editing means payloads never leave your machine.