How to Use JSON Formatter

Steps to Use

Paste your JSON data in the input box on the left.
Click the "Format" button to format JSON data into a readable form.
Click the "Minify" button to compress JSON data into a single line.
Click the "Auto Fix" button to automatically fix common JSON syntax errors.
Click the "Copy" button to copy the result to clipboard.
Click the "Clear" button to clear both input and output areas.
Use the "Escape Output" toggle to escape output for embedding in program code.
Use the "Dark Mode" toggle to switch the display theme.

Escape Output Example

When escape output is enabled, JSON strings are escaped for direct embedding in program code. For example:

Normal Output::

{
  "message": "Hello \"World\"",
  "newline": "Line 1\nLine 2"
}

Escaped Output::

{\n \"message\": \"Hello \\\"World\\\"\",\n \"newline\": \"Line 1\\nLine 2\"\n}

Features

Auto Format: Beautify your JSON data with proper indentation and line breaks.
Syntax Validation: Check for syntax errors in your JSON data and provide error messages.
Syntax Highlighting: Mark JSON key-value pairs and data types with different colors.
Minify Function: Convert formatted JSON into a compact single-line form to reduce data size.
Auto Fix: Automatically fix common JSON syntax errors like unquoted keys and trailing commas.
Escape Output: Escape JSON strings for direct embedding in program code.
Local Processing: All data processing is done in your browser, nothing is uploaded to servers.
Real-time Processing: Input changes are automatically processed and results are updated.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is based on a subset of the JavaScript language, but it is a completely language-independent text format supported by most programming languages for parsing and generation. JSON was proposed by Douglas Crockford in the early 2000s and was standardized in ECMA-404 and RFC 8259.

JSON Syntax Rules

Data is represented as key/value pairs
Data is separated by commas
Curly braces {} hold objects
Square brackets [] hold arrays
Keys must be strings enclosed in double quotes
Values can be strings, numbers, objects, arrays, booleans, or null

JSON Data Types

Type	Description	Example
String	Sequence of Unicode characters enclosed in double quotes	`"Hello World"`
Number	Integer or floating-point number, non-numeric values not supported	`42`, `3.14`
Object	Unordered collection of key/value pairs	`{"name": "John"}`
Array	Ordered collection of values	`[1, 2, 3]`
Boolean	true or false	`true`
null	Empty value	`null`

JSON Formatting Algorithm

The JSON formatting process primarily involves two steps: parsing and regeneration. First, the parser reads the JSON string and builds a memory representation, then the formatter regenerates the string with specific indentation and line breaks. Here is a simplified formatting process:

// Simplified JSON formatting implementation
function formatJSON(jsonStr, indentSize = 2) {
  try {
    // Step 1: Parse JSON string to JavaScript object
    const obj = JSON.parse(jsonStr);
    
    // Step 2: Convert object back to string with indentation
    return JSON.stringify(obj, null, indentSize);
  } catch (e) {
    // Handle invalid JSON
    throw new Error("Invalid JSON: " + e.message);
  }
}

// Usage example
const uglyJson = '{"name":"John","age":30,"city":"New York"}';
const prettyJson = formatJSON(uglyJson);
console.log(prettyJson);
/*
Output:
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

Comparison of JSON and XML

Feature	JSON	XML
Syntax	Concise, using curly braces and square brackets	More complex, using tags and attributes
File Size	Typically smaller than XML	Typically larger than JSON
Parse Speed	Faster	Slower
Data Types	Supports basic data types	All data is text
Namespaces	Not supported	Supported
Comments	Not supported	Supported
Usability	More developer-friendly	More structured and rigorous

Common Problems and Solutions

Problem: JSON parsing error - missing comma or bracket

Solution: Check all closing brackets of objects and arrays, ensure each key/value pair is followed by a comma (except the last one).

Problem: JSON parsing error - invalid key value

Solution: Ensure all keys are enclosed in double quotes, single quotes or unquoted key names are not supported.

Problem: JSON data size issue

Solution: For large JSON data, consider using the compressed version for transmission, then format it for display on the client.

For more official information about JSON, please refer to the following resources: JSON.org | RFC 8259 | Wikipedia: JSON

JSON Formatter

Input JSON

Formatted Result