JSON formatter online

Processed locally

app.formatter.view

You can also load data via #data={"name":"Ada"} or #url=... It is cleared from the address bar after it is read.

Expand a one-line API response into a readable structure. Paste to validate syntax, indent the document, and optionally sort keys. Everything stays in the current tab—useful when debugging production payloads you do not want to send to a third-party site. Minified JSON copied from the Network panel or a one-line log line can be pasted here to inspect nesting.

Auto beautify

Detects objects, arrays, and nesting, then indents with 2 spaces, 4 spaces, or Tab. Deeper nesting makes indentation more useful for aligning sibling fields so you are not counting brackets by eye.

Similar to Prettier or a language service in an editor, but you do not need a new file or a plugin. Handy for a quick look at a response body.

Syntax check

Mismatched brackets or missing/extra commas stop on the input side with an error. Other common issues include single quotes, unquoted keys, and trailing commas copied from a JS object literal.

If the source is JSON5 (with comments), convert it to standard JSON with the JSON5 tool first, then format here.

Load via address bar

You can use #data={...} or #url= to fill the page on open. After it is read, it is cleared from the address bar. Useful for sharing a link from a doc, ticket, or script so the other person sees the same data.

Remote #url= is limited by browser CORS. Only this site’s static files or URLs that already allow cross-origin access can be fetched.

Example

Input (minified)

 {"user":{"id":1001,"name":"Alice","roles":["admin","editor"]}}

Formatted result

{
  "user": {
    "id": 1001,
    "name": "张三",
    "roles": [
      "admin",
      "editor"
    ]
  }
}

Will it change my field values?

No. It only adjusts whitespace and line breaks. Values stay the same; object key order is rearranged only if you check “Sort keys.”

How is this different from minify?

Format is for reading; Minify is for transport. You can switch between them.

Is data uploaded?

No. Parsing and layout run in the current browser memory. Refresh or close the tab and the content is gone.

What file size works well?

A few MB is usually fine. Over about 2 MB it may slow down and warn; over 10 MB, split the file or use a local CLI such as jq .

Recommended workflow

Paste raw JSON from an API, a log, or the clipboard into the left pane, or click “Load sample” to learn the UI.
After syntax checks out, choose 2 spaces, 4 spaces, or Tab. Check “Sort keys” when you need to compare with another document.
Use “Copy” to take the beautified result back to an editor, ticket, or test. For production, minify to strip whitespace.
For deep structures, switch to tree view. To extract a few fields, use JSONPath.

During integration, format first so you can see the structure, then Diff or convert to YAML. That is less error-prone than editing fields on a minified single line.