handyman
Hazuu Tools

JSON Editor

Edit JSON data with an interactive tree editor or code view.

JSON Editor
info

About JSON Editor

JSON Editor is a free online tool that lets you modify the actual content of a JSON document — changing values, renaming keys, adding properties, removing nodes, formatting whitespace, and minifying output — all without installing any software. It provides two complementary editing modes side by side: a code view with a plain text area where you type raw JSON with Format and Minify shortcuts, and an interactive tree view that renders every object and array as an expandable, clickable hierarchy you can edit directly by double-clicking any value or key name.

The tree editor is what sets this tool apart from a plain formatter or viewer. In tree mode you can double-click any string, number, boolean, or null to edit it inline; double-click an object key to rename it without touching surrounding syntax; hover over any object or array node to reveal an add (+) button that inserts a new key-value pair or array element; and click the delete button to remove a node cleanly — brackets, commas, and indentation all stay correct automatically. Switching back to code view serialises your tree edits to properly formatted JSON text.

Everything runs entirely inside your browser using standard JavaScript. Your JSON is never uploaded, transmitted to a server, or stored anywhere. That means you can paste API credentials, internal configuration files, and production data without any privacy concern. There are no file-size limits, no accounts, and no cost.

star

Key Features

check_circle

Interactive tree editor

Expand objects and arrays as a clickable hierarchy. Edit any value inline by double-clicking, rename keys without touching surrounding syntax, add properties, and delete nodes — commas and brackets stay correct automatically.

check_circle

Dual code and tree views

Switch freely between a raw text editor and the interactive tree. Edits made in tree mode are serialised to correctly formatted JSON the moment you return to code view.

check_circle

Format and Minify in one click

In code view, Format re-indents your JSON with two-space indentation; Minify strips all whitespace to produce the smallest possible string. Both operations validate the JSON first and show an inline error if parsing fails.

check_circle

File upload support

Load any .json or .txt file directly from your machine using the upload button. The file is read locally by the FileReader API — no network request is made.

check_circle

Inline syntax validation

As soon as the JSON becomes invalid during code editing, a red error bar appears showing the exact parse error message, so you can fix problems before switching to tree view.

check_circle

100% client-side privacy

All parsing, editing, formatting, and validation happen in your browser with no server calls. Paste API keys, production configs, or any sensitive data without concern.

help

How to Use

01

Load Your JSON

Paste JSON into the code editor, upload a .json file, or click "Sample" to load example data.

02

Edit Your Data

Use Code view to edit raw text with Format and Minify buttons, or switch to Tree view to visually edit values, add properties, rename keys, and delete nodes.

03

Copy the Result

Click the copy button to copy your edited JSON to the clipboard, ready to use in your project.

code_blocks

Example

Paste a minified or messy JSON string into code view, click Format, then switch to tree view to rename a key or change a value inline — the result is clean, edited JSON ready to copy.

Raw / minified JSON (code view)
{"user":{"id":42,"name":"alice","role":"viewer","active":true},"tags":["beta","trial"],"quota":null}
Formatted and edited JSON (after tree edit)
{
  "user": {
    "id": 42,
    "name": "alice",
    "role": "admin",
    "active": true
  },
  "tags": [
    "beta",
    "trial"
  ],
  "quota": null
}
lightbulb

Common Use Cases

  • arrow_circle_right

    Patching API response fixtures

    Grab a live API response, paste it in, and use tree view to change specific field values — user IDs, status flags, nested settings — before saving it as a test fixture. No regex surgery on raw JSON strings.

  • arrow_circle_right

    Editing app configuration files

    Configuration files like package.json, tsconfig.json, or custom app configs are easier to modify in tree view when you need to add a new key inside a deeply nested object without risking a stray comma.

  • arrow_circle_right

    Renaming keys during data migration

    When a schema changes and field names need updating — for example renaming "userId" to "user_id" across a payload — the inline key-rename feature lets you do it accurately without touching surrounding JSON syntax.

  • arrow_circle_right

    Building mock data for frontend development

    Construct realistic nested mock objects by starting with the Sample data, then editing values and adding or removing properties in tree view to match the shape your components expect.

  • arrow_circle_right

    Preparing JSON for size-sensitive environments

    Use the Minify button in code view to strip all whitespace before embedding JSON in an environment variable, a URL parameter, or an HTTP body where payload size matters.

quiz

Frequently Asked Questions

What is a JSON Editor? expand_more
A JSON Editor is a tool designed to help you modify JSON data through a visual interface. It offers a code view for raw text editing and a tree view where you can expand objects and arrays, edit values by double-clicking, add new keys, rename properties, and delete nodes — all without manually managing brackets and commas.
How do I edit values in Tree view? expand_more
Double-click any value in the tree to edit it inline. Press Enter to confirm or Escape to cancel. The editor automatically detects the data type — numbers, booleans (true/false), null, and strings are all handled correctly. You can also double-click object keys to rename them.
Can I add or remove properties? expand_more
Yes. Hover over any object or array node in Tree view to reveal an add (+) button. Click it to insert a new key-value pair (for objects) or a new element (for arrays). Each node also has a delete button that appears on hover to remove it from the structure.
Is my data sent to a server? expand_more
No. All parsing, editing, formatting, and validation happen entirely in your browser using JavaScript. Your JSON data is never transmitted to any external server, making it safe to use with sensitive or private data.
How is the JSON Editor different from the JSON Formatter? expand_more
The JSON Formatter only re-indents and pretty-prints your JSON text — it does not let you change any values, rename keys, or add/remove properties. The JSON Editor includes that formatting capability plus a full interactive tree editor that lets you modify the actual content of the document.
How is it different from the JSON Viewer? expand_more
The JSON Viewer is read-only: it displays your JSON as a navigable tree so you can explore the structure without being able to change anything. The JSON Editor uses the same tree layout but every node is editable — you can update values, rename keys, and restructure the document.
What happens if my JSON has a syntax error? expand_more
In code view, any parse error shows an inline red error bar with the exact message from the JSON parser so you can locate and fix the problem. Tree view will remain empty until the JSON is valid, but your code view text is preserved.
Can I load a .json file from disk? expand_more
Yes. Click the upload button in the toolbar to select any .json or .txt file from your machine. The file is read locally using the FileReader API — no network request is made and the file is never sent anywhere.