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, the File menu and every toolbar button, repair, validation against a JSON Schema, loading from a URL, the Transform tool and in-browser storage. Button and view names appear exactly as they do in the tool's interface.

Under the hood it uses the open-source library vanilla-jsoneditor by Jos de Jong (opens in a new tab); the code view is based on CodeMirror 6. Alongside it run lossless-json (opens in a new tab) as the parser, jsonrepair (opens in a new tab) for repairs and @cfworker/json-schema (opens in a new tab) for schema validation. The tool runs in the browser — the one exception is loading from a URL, which goes through a proxy on the website's server.

How the interface is laid out

The header of the editor card holds the title JSON Editor, a badge for the storage status (initially Local storage, see storage) and — only while a schema is active — a yellow Schema badge. Next to them sits the toolbar: the File dropdown, the Format/Compact/Repair/Sort keys group, the Schema button and, at the far right, Fullscreen. On narrower screens the buttons show only their icon, and the toolbar wraps onto a second line when it needs to.

Below that is the editor itself with its own menu bar (view switching, search, undo/redo, Transform and further actions depending on the view), a navigation bar (a breadcrumb showing the path to your current position) and a status bar. The card's footer shows statistics for the document and a reminder that you can simply drop a .json file onto the card.

On first open there's a small sample document in the editor — a coffee shop with a product list. It deliberately contains the number 9007199254740993, which plain JavaScript can't represent exactly (see exact numbers).

The toolbar in detail

The File menu

The File dropdown bundles everything to do with loading, saving and the clipboard:

• Open file… (Ctrl+O) — opens a file dialog offering .json, .geojson, .jsonc, .json5, .map and .txt. The browser reads the file locally. Valid JSON goes straight into the editor; if the content isn't valid JSON, it opens in the Text view and a notice names the error with line and column ("Invalid JSON: … — try Repair."). Instead of using the dialog you can also drag and drop a file onto the editor card.
• Load from URL… — loads JSON from a public address; see loading from a URL.
• Download (Ctrl+S) — saves the current content as a file. The text is saved unchanged — just as it was loaded, typed or produced by Format, Compact or Repair, whichever view is open. It's formatted with two-space indentation only if your last change to the document was made in Tree or Table (including Sort keys there). To be sure of a formatted file, click Format first. The file name follows the file you opened: open orders.json and the download is orders.json again. With no file opened it's data.json, after Load example it's example.json, and after Replace with clipboard it's pasted.json. The name sticks (across visits, too) until you load a new source or choose Clear — typing or Ctrl+V in the editor doesn't change it.
• Download compact (.min.json) — saves the document minified as <name>.min.json without touching the editor content.
• Copy — copies the content to the clipboard (same rule as the download: unchanged, formatted only after a change made in Tree or Table).
• Copy compact — copies the minified version.
• Replace with clipboard — replaces the whole document with the clipboard content. The browser may ask for permission first; if it denies access, paste with Ctrl+V directly in the editor instead. Invalid JSON lands in the Text view, just as it does when opening a file.
• Load example — loads the sample document.
• Clear — empties the editor. If the document holds your own data, you're asked to confirm first. The empty state is then saved to local storage as well, overwriting the old copy there.

Every load operation — opening a file, loading from a URL, replacing from the clipboard, loading the example, clearing — is one undo step: Ctrl+Z brings back the previous document.

Transform actions: Format, Compact, Repair, Sort

• Format — indents the JSON with two spaces per level and switches to the Text view to show it. Works only with valid JSON; if the content is broken, you get a message with line, column and the hint "try Repair first".
• Compact — minifies the JSON: all whitespace and line breaks between elements are removed, and the document sits on a single line. Compact also switches to the Text view so you can see the result.
• Repair — repairs invalid JSON using the jsonrepair library and shows the result in the Text view. If the JSON is already valid, the button just reports "The JSON is already valid." What the repair fixes is covered under validation and repair.
• Sort keys — sorts all object keys recursively, at every level. The order of array elements stays untouched. Sorting is "natural" and case-insensitive: key2 comes before key10, and B lands between a and c. The current view is kept; in the Text view the sorted result comes back indented with two spaces.

Ctrl+Z undoes all four actions. On large screens the buttons carry their name; on smaller ones they show only the icon (the tooltip names the function).

Schema

The Schema button opens the dialog for checking against a JSON Schema — described under JSON Schema validation. While a schema is active, the button is highlighted in yellow.

View: Tree, Table, Text

You switch views with the three buttons text, tree and table on the left of the editor's menu bar (see the three views). The browser remembers the last view you used, so the editor starts in it on your next visit.

Fullscreen

The Fullscreen button gives the editor the whole screen — handy for large documents. Esc leaves fullscreen again, but only when nothing else needs the key: if a dialog, a context menu, the File menu or the search is open, or you're in the middle of editing a key or value, Esc doesn't end fullscreen. Alternatively, click the button 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 — all at once via the menu bar, too.
• Edit keys and values inline (double-click).
• Reorder or move entries via drag-and-drop.
• A context menu (right-click) offers actions such as edit, copy, paste, duplicate, remove, sort and launching the Transform tool.
• A search (Ctrl+F) 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, duplicate and remove rows (context menu).
• 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.
• Its own format and compact buttons in the menu bar (Ctrl+I and Ctrl+Shift+I).
• When you paste compact JSON, the editor asks whether it should format it.

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. That's why Format, Compact and Repair from the toolbar switch here automatically.

Exact numbers and duplicate keys

The editor and every toolbar action parse with lossless-json instead of the browser's built-in JSON parser. The difference is in the numbers: the standard parser turns every number into a 64-bit floating-point value. Big integers such as 64-bit IDs lose their last digits, 1.10 becomes 1.1, and 1e400 becomes null. In the JSON Editor the digits stay exactly as they are in the file — through Format, Compact, Sort keys and Download:

{"id":12345678901234567890,"price":1.10,"huge":1e400}

The editor is just as strict about duplicate keys. An object like {"a": 1, "a": 2} can be read syntactically, but a normal parser silently keeps only the last value. The JSON Editor instead reports the key ("Duplicate key 'a' …") and leaves the document as text in the Text view, so no value gets lost. Tree and Table only become available again once you've removed the duplicate by hand — Repair won't make that decision for you either.

Validation and repair

The editor validates in real time: on every change the content is parsed, syntax errors are shown with their position, and the statistics in the footer name the error with line and column. That's a syntax check — whether your data matches an agreed contract is what JSON Schema validation is for.

There are two ways to deal with broken JSON:

• The Repair button in the toolbar repairs the whole document with jsonrepair, whichever view you're in, and shows the result in the Text view.
• When there's a parse error, the editor's Text view offers Auto repair itself, plus Show me, which jumps to the error.

Typical cases these fix:

• trailing commas (,] / ,}),
• single instead of double quotes,
• unquoted keys,
• comments inside the JSON,
• JSONP wrappers such as callback({...}),
• Python constants such as True, False and None,
• missing closing brackets at the end of a truncated document.

The repair leaves the original's line breaks and indentation in place; tidy up afterwards with Format. It's heuristic: whatever can be corrected unambiguously gets corrected — structurally wrecked input is beyond it. If an error remains afterwards, the button reports "Repaired, but: …" with the cause, and you fix that spot by hand in the Text view. Duplicate keys survive the repair (see above). The repair, too, can be undone with Ctrl+Z.

JSON Schema validation

The Schema button lets you check whether your document conforms to a JSON Schema — whether required fields are present, types match and values stay within the allowed range. The JSON Schema validation dialog offers:

• a text area to paste the schema into,
• Open schema file… — loads the schema from a local .json file and validates right away,
• Validate — takes the schema from the text area and validates,
• Remove schema — switches validation off and deletes the stored schema.

Supported drafts are 4, 7 (draft 6 is treated as draft 7), 2019-09 and 2020-12. The tool reads which one applies from the schema's $schema keyword; without it, 2020-12 is used. External $refs pointing to other files or URLs are not fetched — the schema has to be self-contained. If the schema itself isn't valid JSON, the dialog says so ("Invalid schema: …").

The result appears in the dialog: "The document is valid.", "The document is not valid JSON yet." (when even the syntax is off) or the number of problems with a list of the first 20 findings including their path (/products/2/price: …). In the editor the affected values are marked as warnings. Only the innermost error per spot is reported, so the same place doesn't show up several times.

An active schema stays active: the editor re-validates on every change, and the schema is saved to local storage and silently switched back on at your next visit. The yellow Schema badge in the card header shows this. Validation runs in the browser; the library doesn't generate any code at runtime to do it.

Loading from a URL (Load from URL)

File → Load from URL… opens the Load JSON from URL dialog. Enter an http or https address and click Load. Unlike everything else in this tool, the request goes through a proxy on the website's server: your browser asks the jpkc.com server to fetch the address and gets the response back unchanged.

The proxy follows fixed rules:

• public addresses only — targets on the local network, loopback and other private or reserved ranges are rejected, even when only a redirect points there,
• a response size of at most 2 MB ("The file is too large."),
• a 10-second timeout per hop, up to five redirects, 30 seconds in total,
• a rate limit per IP address (when exceeded: "Too many requests"),
• a plain request without custom headers or credentials — APIs that require a token can't be loaded this way.

The loaded response replaces the document as one undo step; Ctrl+Z brings back the previous state. The download file name comes from the last path segment of the URL. If the address doesn't return valid JSON, the editor opens the response as text.

Transform: filter, sort, pick fields

The built-in Transform tool (in the editor's menu bar, or the context menu in Tree and Table) 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. Behind the scenes the wizard writes a query in JSONQuery, vanilla-jsoneditor's query language; you can also edit it directly in the dialog for more complex reshaping. Like any other change, a transformation can be undone.

Search and replace, undo/redo

All views offer a search (Ctrl+F) that highlights matches, plus replace: in the Text view the replace fields sit right in the search bar, in Tree and Table you show them with Ctrl+H or the toggle in the search box. Every change can be reverted and reapplied via undo/redo (Ctrl+Z / Ctrl+Shift+Z or the arrows in the menu bar) — including the toolbar actions and loading a new document. In the Text view the editor merges quick successive keystrokes into one undo step.

Statistics in the footer

Shortly after every change, the footer of the editor card shows statistics for the document. The exception is Sort keys: afterwards the old statistics stay put until your next change to the document. For the sample document it looks like this:

647 B · depth 4 · 6 objects · 5 arrays · 29 keys · 31 values

• the size in bytes (UTF-8, as the file would be on disk),
• depth — the deepest nesting level,
• objects, arrays, keys — the number of objects, arrays and keys,
• values — the number of plain values (strings, numbers, booleans, null).

If the JSON is invalid, the line shows the size and the parse error with line and column instead. For very large documents (over 20 million characters) the footer shows only the size.

Keyboard shortcuts

Shortcut	Action
Ctrl+O	Open a file
Ctrl+S	Download the document
Ctrl+Z / Ctrl+Shift+Z	Undo / redo
Ctrl+F	Search
Ctrl+I / Ctrl+Shift+I	Format / compact (Text view)
Ctrl+D	Duplicate the selection (Tree/Table)
Esc	Leave fullscreen (when no dialog, menu or input is open)

On a Mac, use Cmd instead of Ctrl. Ctrl+O and Ctrl+S work even while the cursor is in the editor — in place of the browser's own dialogs.

Storage in the browser (local storage)

The editor saves your work automatically to your browser's local storage: shortly (0.8 seconds) after your last change, and again when you leave the page. It keeps the document text, the file name for the download, the last view you used and an active JSON Schema. Reload the page or come back later and everything is there again. Work saved by older versions of the tool is picked up on the first load.

The badge in the card header tells you honestly what happened:

• Saved locally — saved (or restored when the page opened).
• Not saved — too large — documents over 2 million characters aren't saved; an older copy is deleted so that no stale version turns up on your next visit. Whatever you want to keep, save with Download.
• Not saved — the storage is full or disabled in the browser.

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 empty it with Clear (or clear the browser's data). A stored schema is removed only by Remove schema in the Schema dialog. On someone else's or a shared device, use both after working with sensitive data.

The stored data lives locally only and isn't sent to a server.

Limits

• Self-contained schemas only: schema validation doesn't fetch external $refs. Numeric constraints such as maximum are checked with ordinary floating-point precision — so not down to the last digit for numbers beyond 2^53.
• Repair is heuristic: Repair and Auto repair fix common, unambiguous mistakes — not structurally broken or ambiguous input, and not duplicate keys.
• The table needs structure: the table view shines for flat arrays of objects; for deeply nested data, tree/text is better.
• Loading by URL: public addresses only, at most 2 MB, no credentials.
• Very large documents: the real limit is your browser's memory — very large files can get sluggish. Above 2 million characters the tool no longer saves your work to local storage.
• 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.