JSON Editor

What is a JSON editor?

A JSON editor combines a code editor with a structured view of the same data. Code view is useful for precise text changes, search and replace, and syntax diagnostics. Tree view makes deeply nested objects and arrays easier to understand and edit without manually tracking commas and brackets.

How to edit JSON online

1. Paste JSON, open a local .json or .txt file, drag in a file, or select Example.
2. Edit the document in Code view or change keys, values, and data types in Tree view.
3. Use the syntax diagnostics to correct invalid JSON.
4. Select Format for readable indentation or Minify for compact output.
5. Copy the result or download it as a JSON file.

On desktop, Code and Tree stay visible side by side. On a smaller screen, use the Code and Tree tabs to switch views.

JSON editing example

The built-in example includes an object, an array, a Boolean, and nested settings:

{
  "project": "Bitty Coder",
  "active": true,
  "release": 1,
  "tags": ["json", "browser", "developer-tools"],
  "settings": {
    "theme": "system",
    "autosave": false
  }
}

Change active to false, add a tag, or edit settings.theme in Tree view. The same changes appear in Code view, ready to format, copy, or download.

Code view vs Tree view

Code view provides syntax highlighting, line numbers, folding, bracket matching, search and replace, Tab indentation, word wrap, and undo or redo. Tree view supports structural edits, search, and expandable objects and arrays.

JSON validation and data integrity

The editor validates strict JSON as you type and reports the line, column, cause, and available suggestion. Selecting a diagnostic moves Code view to the relevant range. The status bar also reports the cursor position, total lines, character count, and UTF-8 file size.

When Code contains valid JSON, Tree updates automatically. If the text is temporarily invalid or contains duplicate keys, Tree keeps the last valid version until the issue is fixed. Structured editing uses a lossless number parser, so large integers and very small decimal values are not rounded through JavaScript’s native Number conversion.

Format, minify, and export JSON files

Format JSON with your selected indentation or minify it without changing string content. The original file name is retained when possible, and a missing .json extension is added automatically. Invalid work can still be preserved with the explicit Download .txt option.

The optional Restore local draft setting keeps the current editor state across a refresh. Clear requires confirmation and also removes that saved draft.

Common JSON editing problems

• Property names and strings must use double quotes.
• Object members and array items need commas between them, but not after the final item.
• JSON does not support comments, undefined, NaN, or Infinity.
• Duplicate keys are ambiguous and cannot be represented safely in Tree view.
• A JSON document may contain an object, array, string, number, Boolean, or null at its root.

JSON editor vs formatter and viewer

A JSON editor changes keys, values, types, and structure. A JSON Formatter only adjusts whitespace, while a JSON Viewer provides a read-only tree. Use the JSON Validator when you only need a syntax report, or JSON Repair when you intentionally want common non-standard input corrected.

Frequently asked questions

Can I edit nested JSON objects and arrays?

Yes. Expand an object or array in Tree view to change values, add or remove items, and edit nested structures without manually managing commas and brackets.

Why is Tree showing an older version?

Code view currently contains a syntax error or duplicate key, or automatic Tree sync is paused in Settings. Fix the reported issue or choose Sync now.

Does JSON allow comments or trailing commas?

No. Strict JSON does not allow comments, trailing commas, single-quoted strings, or unquoted property names. The editor reports these as syntax errors instead of changing them automatically.

Can I create a new JSON file?

Yes. Select Clear, confirm the action, enter a new JSON value in Code view, and use Download when the document is ready.

Can I edit a large JSON file?

Files over 10 MB can be opened, but browser responsiveness varies by device and document structure. Pause automatic Tree sync while making a large batch of text edits, then update Tree when ready.

Will Code and Tree preserve large integers?

Yes. Tree view uses lossless JSON parsing so values outside JavaScript’s safe integer range are not silently rounded during synchronization.