JSON Formatter & Validator: The Complete Guide

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. It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition, but is completely language-independent, making it an ideal data exchange format for APIs, configuration files, and data storage.

JSON represents structured data in two universal structures: objects (collections of key/value pairs) and arrays (ordered lists of values). Most modern programming languages have built-in support for JSON parsing and serialization.

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation syntax, but the format is text only and strictly defined. Here are the essential rules:

Data Types

Structure Rules

• Objects are enclosed in curly braces {}
• Arrays are enclosed in square brackets []
• Keys must be double-quoted strings ("key", not key or 'key')
• Key/value pairs in objects are separated by commas (,)
• Values in arrays are separated by commas
• No trailing commas allowed (before closing } or ])

{
  "name": "WhetKit",
  "version": 1.0,
  "features": ["formatter", "validator"],
  "isFree": true,
  "metadata": null
}

Common JSON Pitfalls

Trailing Commas

The most common JSON error. JavaScript allows trailing commas, but JSON does not.

// Invalid JSON (trailing comma after last item)
{
  "name": "Alice",
  "age": 30,   // <- BAD
}

// Valid JSON
{
  "name": "Alice",
  "age": 30
}

Single Quotes

JSON requires double quotes for strings and keys. Single quotes are not valid.

// Invalid JSON
{ 'name': 'Alice' }

// Valid JSON
{ "name": "Alice" }

Unquoted Keys

Unlike JavaScript objects, JSON requires all keys to be quoted.

// Invalid JSON
{ name: "Alice" }

// Valid JSON
{ "name": "Alice" }

Comments

JSON does not support comments. Use a separate metadata field or preprocessor if you need annotations.

// Invalid JSON
{
  "name": "Alice" // this is a comment
}

// Alternative: use a _comment key
{
  "_comment": "User profile",
  "name": "Alice"
}

Nested Depth

Deeply nested JSON can be hard to read and slow to parse. Most JSON formatters handle 10+ levels, but consider restructuring if you find yourself going deeper.

Formatting & Indentation

Proper formatting makes JSON readable and maintainable. Our formatter supports four indentation options:

Minification

Minified JSON removes all whitespace, reducing file size for transmission. Our tool provides a "Minify" button alongside "Format / Validate" so you can switch between the two instantly.

// Formatted (readable)
{"name":"WhetKit","version":1.0,"features":["formatter","validator"]}

// Minified (compact)
{"name":"WhetKit","version":1.0,"features":["formatter","validator"]}

Key Sorting

The "Sort keys" option alphabetically orders all keys in your JSON objects. This is useful for:

• Comparing two JSON files side by side
• Creating consistent output for version control
• Organizing configuration files by key name

// Before sorting
{ "zebra": 1, "apple": 2, "monkey": 3 }

// After sorting (alphabetical)
{ "apple": 2, "monkey": 3, "zebra": 1 }

Validation & Error Messages

When you paste invalid JSON into the formatter, the error message tells you exactly what went wrong and where. Here are common error messages and what they mean:

Practical Examples

API Response Formatting

When debugging API responses, paste the raw response into the formatter to make it readable. A typical REST API response goes from this:

{"status":"ok","data":{"users":[{"id":1,"name":"Alice","email":"alice@example.com"},{"id":2,"name":"Bob","email":"bob@example.com"}],"total":2},"meta":{"page":1,"per_page":20}}

To this after formatting:

{
  "status": "ok",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Alice",
        "email": "alice@example.com"
      },
      {
        "id": 2,
        "name": "Bob",
        "email": "bob@example.com"
      }
    ],
    "total": 2
  },
  "meta": {
    "page": 1,
    "per_page": 20
  }
}

Configuration File Validation

Before deploying a configuration file (like .eslintrc.json, tsconfig.json, or manifest.json), validate it with the formatter. A trailing comma or missing quote can break your entire build.

JSON Best Practices

• Use consistent indentation: Pick 2 or 4 spaces and stick with it across your project.
• Validate before writing: Always run your JSON through a validator before using it in code or saving to a file.
• Avoid deep nesting: More than 4-5 levels of nesting makes JSON hard to read. Normalize data or use references when possible.
• Use meaningful keys: Keys should be descriptive and consistent. Prefer firstName over fn.
• No trailing commas: JSON parsers are strict about trailing commas. Always check.
• Keep it UTF-8: Always save JSON files as UTF-8 to avoid encoding issues.
• Use arrays for ordered data: If order matters, use an array of items instead of an object with numeric keys.