JSON Formatter

JSONPath Query

Input JSON

Formatted Result


                            
                        
Current Path: Click a node in tree view to see its path

Key Features

Smart Formatting

Beautify JSON data in one click with 2-space, 4-space or Tab indentation for clear structure

Tree View

Collapsible tree structure for inspecting deeply nested JSON, click nodes to extract paths

JSONPath Query

Supports $.key, $..recursive, $.arr[0], $..arr[*] syntax to locate and filter JSON nodes

Statistics

Real-time display of node count, max depth, key count, array items, chars and file size

Error Location

JSON syntax errors show exact line and column numbers for quick debugging

Local Processing

All operations run in your browser, data never leaves your device, protecting your privacy

How to Use

1

Enter JSON Data

Paste or type JSON data in the left input box, or click "Sample" to load example JSON. Input is parsed and validated automatically.

2

Choose Indent & View

Select indentation (2/4 spaces/Tab), switch between "Text View" for highlighted code or "Tree View" for collapsible structure.

3

Format or Minify

Click "Format" to beautify JSON structure, or "Minify" to remove spaces and line breaks. Result shows on the right in real time.

4

JSONPath Query & Path Extraction

Enter a JSONPath expression (e.g. $.user.name) to highlight matching nodes. In tree view, click any node to copy its full path.

Use Cases

API Debugging

Inspect API JSON responses, quickly locate fields and troubleshoot interface issues

Config Files

Format JSON config files, inspect hierarchy in tree view, ensure correct structure

Data Extraction

Use JSONPath to batch extract target fields from JSON for data cleaning

Frontend-Backend Integration

Validate JSON format exchanged between frontend and backend, pinpoint syntax errors

Learning & Teaching

Tree view intuitively shows JSON structure, stats help understand hierarchy concepts

Log Analysis

Format JSON logs, expand/collapse to inspect key fields, boost analysis efficiency

JSON Knowledge

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format based on a subset of JavaScript. It uses a language-independent text format to store and represent data. Its concise and clear hierarchy makes it an ideal data exchange language, widely used in web development, APIs, and configuration files.

Example:{"name": "Easy Utils", "version": 1.0, "tags": ["tools", "online"], "active": true}

What data types does JSON support?

JSON supports six data types: Object, Array, String, Number, Boolean, and null. JSON does not support functions, dates, or regular expressions like JavaScript; these must be serialized as strings.

JSON vs XML?

JSON is more concise than XML, parses faster, and takes less space. JSON is natively supported by JavaScript while XML needs DOM parsing. JSON supports arrays natively; XML requires nested tags. Most modern APIs use JSON as the data exchange format.

What is JSONPath?

JSONPath is an expression language for querying JSON data, similar to XPath for XML. Using syntax like $.key, $..key, $.arr[0], you can quickly locate nodes in JSON. It is an essential tool for handling complex JSON data.

JSONPath Syntax Guide

JSONPath is an expression language for querying JSON data. This tool supports a common syntax subset. Examples:

Root Node

$

Represents the entire JSON document root

Child Access

$.user
$.user.name

Dot notation for object fields, supports chaining

Array Index

$.items[0]
$.items[-1]

Access array elements by index, supports negative (from end)

Recursive Descent

$..name

Recursively find all fields named "name" at any level

Wildcard

$.items[*]
$.user.*

Match all array elements or all object fields

Bracket Notation

$['user-name']
$.items[0]['name']

Use bracket strings for keys with special characters

FAQ

Q1: Is the JSON formatter online tool free?
A: Completely free, no registration or login required, no usage limits. All operations run locally in your browser, no data is uploaded to any server.
Q2: What is the difference between JSON formatting and JSON minifying?
A: JSON formatting adds indentation and line breaks to make the structure clear and readable, suitable for human inspection; JSON minifying removes all spaces and line breaks to reduce data size, commonly used for network transmission and storage.
Q3: What is JSONPath query?
A: JSONPath is a JSON query language similar to XPath, using syntax like $.key, $..key, $.arr[0] to quickly locate nodes in JSON. This tool supports a common JSONPath syntax subset.
Q4: What is the difference between tree view and text view?
A: Text view displays JSON as highlighted code, suitable for copying and reading; tree view shows a collapsible tree structure, ideal for inspecting deeply nested JSON and extracting node paths by clicking.
Q5: Do JSON keys require double quotes?
A: Yes, the strict JSON specification requires keys to be enclosed in double quotes. Although JavaScript object literals may omit quotes or use single quotes, standard JSON requires double quotes or parsing will fail.
Q6: Will my JSON data be saved?
A: No. This is a pure front-end local application. All parsing, formatting and queries run in your browser. Data is never uploaded to any server or recorded.