How to Format and Validate JSON Online Free (No Upload) [2026]

What is JSON formatting and why it matters

JSON (JavaScript Object Notation) is a text-based data interchange format. It looks like this in its raw, minified form as received from an API:

{"user":{"id":1,"name":"Alice","email":"alice@example.com","roles":["admin","editor"],"active":true}}

That single line is valid JSON, but it is nearly impossible to inspect at a glance. After formatting with 2-space indentation, the same data looks like this:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "active": true
  }
}

Both representations are semantically identical. JSON.parse() produces the same JavaScript object from either. The difference is purely presentational: the formatted version makes structure, nesting depth, key names, and value types immediately visible without any mental parsing.

A JSON formatter does two things simultaneously. It prettifies: it re-emits the JSON with consistent indentation, newlines, and spacing. It also validates: before it can format the JSON, it must parse it. If the JSON contains any syntax error, the formatter cannot parse it and instead reports where the error is. This dual function makes a formatter the first tool to reach for when debugging API responses, configuration files, webhook payloads, or any JSON data source.

Common scenarios where formatting saves significant time: reading paginated API responses while building an integration, debugging a webhook payload that triggers a 400 error, reviewing a configuration file before committing it, comparing two JSON responses to find what changed, and inspecting localStorage or IndexedDB values in a browser application.

JSON vs JavaScript objects: key differences

The single biggest source of JSON confusion is that JSON looks like a JavaScript object literal, but the two formats have different rules. Understanding this difference prevents the most common syntax errors.

Keys must be double-quoted strings. In a JavaScript object, keys can be unquoted identifiers or single-quoted strings: {name: "Alice"} and {'name': 'Alice'} are both valid JavaScript. In JSON, keys must always be double-quoted: {"name": "Alice"}. Any other form is a syntax error.

String values must use double quotes. Single quotes around string values are valid JavaScript but invalid JSON. {"name": 'Alice'} will cause a JSON parse error. Always use double quotes for both keys and string values.

No trailing commas. {"name": "Alice", "age": 30,} is invalid JSON because of the comma after 30. Modern JavaScript (ES5+) and most linters allow trailing commas in object and array literals. The JSON specification does not.

No comments. JSON has no comment syntax. // comment and /* comment */ are syntax errors in JSON. If you need comments in a configuration format, look at JSONC (used by VS Code settings) or JSON5.

No undefined, NaN, Infinity, or functions. JSON supports only six value types: string, number, object, array, boolean (true / false), and null. JavaScript values like undefined, NaN, Infinity, and function references are not representable in JSON. When you call JSON.stringify on an object with undefined properties, those properties are silently dropped from the output.

Common JSON syntax errors and how to fix them

These are the errors that appear most frequently when formatting or parsing JSON. See the companion article for a complete reference with error messages.

1. Trailing comma

The most common JSON error. A comma after the last item in an object or array.

// Invalid JSON
{
  "name": "Alice",
  "age": 30,   // trailing comma here
}

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

Fix: remove the comma after the last property or array element. The error message from JSON.parse is typically Unexpected token }.

2. Single quotes instead of double quotes

Valid JavaScript, invalid JSON.

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

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

Fix: replace all single quotes with double quotes for both keys and string values. The error message is typically Unexpected token '.

3. Unquoted keys

Unquoted object keys are valid JavaScript but invalid JSON.

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

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

Fix: add double quotes around every key. The error message is typically Unexpected token n (or whatever the first letter of the unquoted key is).

4. Comments

// Invalid JSON
{
  "host": "localhost", // database host
  "port": 5432
}

Fix: remove the comment entirely. If you need comments in a config file, rename the file .jsonc and use a JSONC-aware parser. The error message is Unexpected token /.

5. Missing comma between items

// Invalid JSON
{
  "name": "Alice"
  "age": 30
}

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

Fix: add the missing comma after the previous key-value pair. The error is Unexpected string or Unexpected token ".

6. Undefined or NaN values

// Invalid JSON
{"score": NaN, "result": undefined}

// Valid JSON (use null when value is absent)
{"score": null, "result": null}

Fix: replace NaN, undefined, and Infinity with null or remove the property entirely.

For a complete reference of all JSON.parse error messages, causes, and fixes with more examples, read the companion article: Common JSON Errors and How to Fix Them.

Why you should not paste production JSON into random sites

Most developers format JSON constantly throughout the day: API responses, configuration payloads, webhook bodies, database query results. The reflex is to paste JSON into the first search result for "JSON formatter online." This is a habit worth reconsidering.

Many popular JSON formatter sites process data server-side. Your JSON is transmitted to their server, formatted there, and returned to your browser. For most JSON this is harmless. But consider what JSON payloads typically contain in production environments:

• Authentication tokens and API keys. JWT payloads, OAuth tokens, API response bodies from internal services. These should never leave your network.
• Personal data. User records, email addresses, phone numbers, addresses. Pasting this into a third-party tool may violate GDPR, CCPA, or your company's data handling policy.
• Financial data. Payment responses, order records, pricing data. Even if stripped of card numbers, transaction data can reveal business-sensitive information.
• Internal API structures. The shape of your internal API can be valuable competitive intelligence or help an attacker map your system.

The safe alternative is a browser-based formatter that processes JSON locally. The SammaPix JSON Formatter uses JSON.parse() and JSON.stringify() in your browser tab. No HTTP request carries your data anywhere. You can verify this: open DevTools, go to the Network tab, paste and format a large JSON payload, and observe that no request is made to any external server with your data.

The same privacy principle applies to other developer utilities: URL decoders, base64 decoders, hash generators. Always prefer tools that explicitly state and demonstrably run client-side. See also: Hash Generator: why in-browser hashing protects your files.

How to format JSON in your browser, step by step

1. Open the JSON Formatter. Go to sammapix.com/tools/json-formatter in any modern browser. No signup required.
2. Paste your JSON. Click the input area and paste your raw or minified JSON. You can paste anything from a single JSON object to a large nested API response.
3. Click Format. The tool parses the JSON, validates it, and outputs prettified JSON with 2-space indentation. If there is a syntax error, the error message and position are shown instead.
4. Fix any errors. If validation fails, correct the reported error in the input, then format again. Common fixes: remove trailing commas, replace single quotes with double quotes, add missing commas between properties.
5. Copy or download. Copy the formatted JSON to your clipboard or download it as a .json file. Your data has not left your browser.

Formatting vs minifying: when to use each

Formatting and minifying are opposite operations. Both produce valid JSON that parses to the same JavaScript object. The difference is whitespace.

Use formatted JSON when you are reading, debugging, reviewing, or documenting. Formatted JSON is also the standard for JSON files committed to version control: diffs are line-by-line and reviewers can see exactly what changed. Many style guides recommend 2-space indentation for JSON files.

Use minified JSON for HTTP API responses and anywhere network payload size matters. Whitespace in JSON responses is pure overhead. A deeply nested API response formatted with 2-space indentation can be 30 to 60% larger than its minified equivalent. For high-volume APIs, minification meaningfully reduces bandwidth and parse time.

In JavaScript: JSON.stringify(obj) produces minified JSON. JSON.stringify(obj, null, 2) produces formatted JSON with 2-space indentation. JSON.stringify(obj, null, 4) uses 4-space indentation. The second argument (the replacer) can also be an array of keys to include or a function to transform values.

Formatting JSON in browser DevTools

If you are working on a web application and need to inspect API responses, browser DevTools already includes a JSON formatter. Here is how to use it in Chrome (the pattern is identical in Firefox and Edge):

1. Open DevTools. Press F12 or right-click and choose Inspect.
2. Go to the Network tab. Make the request that returns JSON (click a button, reload the page, etc.).
3. Click the request. In the right panel, click the Preview or Response tab. Chrome automatically prettifies JSON responses in the Preview tab with a collapsible tree view.
4. Copy and paste if needed. If you need to format a JSON string from the Console, run JSON.stringify(JSON.parse(yourString), null, 2) in the Console to get a formatted version.

DevTools is useful for live network inspection but cannot format a JSON string you have copied from a log file, email, or ticket. For that, a dedicated formatter like the SammaPix JSON Formatter is more practical.

Formatting JSON in VS Code and editors

VS Code has built-in JSON formatting. Open a .json file and press Shift+Alt+F (Windows/Linux) or Shift+Option+F (Mac) to format the document. VS Code also supports JSONC (.jsonc extension), which allows // comments. The settings.json and launch.json files in VS Code are actually JSONC.

Prettier, the popular code formatter, handles JSON with the command prettier --write *.json or via its VS Code extension. If you have a project with many JSON files, Prettier is the right tool to format them consistently on save.

For one-off formatting of JSON from an API, a log, or a clipboard: a browser-based formatter is faster than opening a file in an editor. Paste, format, copy, done. No file saved, no editor opened.

Related tools

• JSON Formatter: format, prettify, minify, and validate JSON entirely in your browser. No upload, no account. See also: Common JSON errors reference.
• URL Encode / Decode: encode or decode percent-encoded URLs in your browser. Useful for decoding JSON that arrives URL-encoded in API query parameters. See the full URL encoding guide.
• Hash Generator: generate MD5, SHA-256, SHA-512 checksums from text or files in your browser. No upload. See Hash Generator guide.
• Image to Base64: encode images to Base64 strings for embedding in JSON payloads, HTML, or CSS. Runs entirely in your browser.