JSON Editor — Manual

Back to the overview: JSON Editor · Open the tool live: www.jpkc.com/tools/json/

This manual describes the JSON Editor in full: the three views, every toolbar button, real-time validation, repair, the Transform tool, and in-browser storage. The tool's interface is in English, so button and view names are used here as they appear in the actual UI.

Under the hood it uses the open-source library vanilla-jsoneditor by Jos de Jong; the code view is based on CodeMirror 6. The whole tool runs purely in the browser — no server, no upload (see storage).

How the interface is laid out

At the top sits a toolbar with grouped buttons; below it is the editor area itself. A navigation bar (breadcrumb showing the path to your current position) and a status bar frame the editor. A Local Storage badge indicates whether your work is currently saved. On first open there's a small sample document in the editor.

File: Open, Download, Clear

Open — opens a file dialog and loads a local file (.json or .txt). Valid JSON lands directly as a data structure; if the content isn't valid JSON, it's loaded as raw text (with a notice) so you can still repair it.
Download — saves the current content as a file named data.json (formatted, two-space indentation). The file is created in the browser; nothing goes to a server.
Clear — empties the editor (after a confirmation prompt) and deletes the saved state from local storage.

Transform actions: Format, Compact, Repair, Sort

Format (beautify) — indents the JSON cleanly (two spaces per level) and makes it readable. Works only with valid JSON; if the content is broken, you get an error message with the cause.
Compact — minifies the JSON: all extra whitespace and line breaks are removed so it sits on a single line — the state for shipping or embedding. The effect is visible in the Text view; in the tree view the structure keeps rendering unchanged.
Repair — re-parses the current content and reports the result: if the JSON is valid, it confirms so ("already valid"); if it's broken, it reports the error. This button does not repair broken JSON itself — that's handled by the Text view's auto-repair (details under Validation and repair).
Sort — sorts all object keys recursively, alphabetically. Array elements keep their order — only object keys are sorted, at every level. This changes the document; undo reverts it.

Clipboard: Copy, Paste

Copy — copies the formatted JSON text to the clipboard.
Paste — pastes the clipboard content. Valid JSON is taken in as a data structure; if it isn't valid JSON, it lands as raw text in the editor (with a notice).

View: Tree, Table, Text

Three buttons switch between the three views. The active mode is highlighted and remembered in the browser, so the editor starts in the same view next time.

Fullscreen

The fullscreen button hides everything around the editor and gives it the whole screen — handy for large documents. Esc leaves fullscreen again.

The three views

All three views show the same document; you can switch at any time without losing data.

Tree view

The default view: the JSON as an expandable tree.

Expand and collapse nodes to survey the structure.
Edit keys and values inline.
Reorder or move entries via drag-and-drop.
A context menu (right-click) offers actions like insert, duplicate, delete, and launching the Transform tool.
A search (keyboard shortcut in the editor) highlights matches in the tree.

Table view

A tabular view, ideal for an array of objects (e.g. an API list). The objects' fields become columns and each entry becomes a row.

Edit like a spreadsheet, cell by cell.
Sort columns by clicking.
Add and remove rows.
Nested fields are fanned out into composite columns.

For deeply nested or irregular structures the table is less useful than for flat, uniform records — in those cases the tree or text view is often the better choice.

Text view (code)

The plain code view, based on CodeMirror 6.

Syntax highlighting and line numbers.
Code folding (folding whole objects/arrays).
Search & replace right in the text.
When you paste compact JSON, the editor offers to format it automatically.

This is where you see the JSON the way it exists as a file — the right view for repairing raw text or checking the exact structure.

Validation and repair

The editor validates in real time: on every change the content is parsed, and syntax errors are shown with their position. Important for context — this is a syntax check (is this even well-formed JSON?), not schema validation: the editor doesn't check whether your data conforms to a particular JSON schema or contract, only whether the JSON syntax is correct.

An auto-repair is built into the Text view: paste invalid JSON there and the editor flags it as broken and offers an inline repair. Typical cases it can fix:

trailing commas (,] / ,}),
single instead of double quotes,
unquoted keys,
comments inside the JSON,
missing quotes or brackets in simple cases.

The repair is heuristic: what can be corrected unambiguously gets corrected — fundamentally ambiguous or structurally broken input can't be saved even by it. If an error remains afterwards, the spot stays flagged with its position, and you fix it by hand in the text view.

This is distinct from the toolbar Repair button: it only re-parses the current content and reports the result — "already valid" for valid JSON, or the error for broken JSON. That button doesn't repair broken JSON itself; that's what the Text view's auto-repair is for.

Transform: filter, sort, pick fields

The built-in Transform tool (in the tree view's context menu or menu) reshapes JSON without manual editing. A wizard lets you:

filter — keep only entries that satisfy a condition,
sort — by a field, ascending or descending,
pick fields (projection) — keep only certain fields.

A live preview shows the result before you apply it. Advanced users can write a query directly in the JavaScript query language instead of using the wizard. For everyday use the wizard is enough — the query language is meant for more complex reshaping.

Search and replace, undo/redo

All views offer a search that highlights matches; the text view adds replace. Every change can be reverted and reapplied via undo/redo — the history covers the whole session.

Storage in the browser (local storage)

The editor saves your work automatically to your browser's local storage — on every change. Reload the page or come back later and your last content (and the most recently used view) is there again; a notice confirms the restore. The Local Storage badge in the toolbar signals the status.

Two consequences:

Convenience: you don't lose your work to an accidental reload.
Privacy on shared machines: the content stays in the browser until you hit Clear (or clear the browser's data). On someone else's or a shared device, use Clear after working with sensitive data.

The data lives locally only — it's never sent to a server.

Limits

Syntax, not schema: validation checks well-formedness, not conformance to a JSON schema.
Repair is heuristic: the Text view's auto-repair fixes common, unambiguous mistakes — not structurally broken or ambiguous input.
The table needs structure: the table view shines for flat arrays of objects; for deeply nested data, tree/text is better.
Very large documents: the underlying library is built for large files (nominally up to the hundreds-of-MB range), but the real limit is your browser's memory — very large files can get sluggish.
No account, no sync: your work lives only in the current browser's local storage; it doesn't travel between devices.

For the introduction and target audiences see the overview page. The examples show concrete workflows, the tips & tricks the finer points. You can try it all directly in the tool.