📋 JSON Formatter & Tree Viewer

Formatting and Inspecting JSON Payloads

JSON (JavaScript Object Notation) is the lightweight data-interchange standard of the web. While its syntax is simple, large JSON strings are often minified for transport, making them completely unreadable for developers. This tool allows you to beautify minified JSON, minify formatted JSON, and explore complex objects dynamically.

Step-by-Step Guide

1. Input JSON — Paste your JSON string into the left input editor.
2. Beautify or Minify — Click Beautify to format with spaces, or Minify to strip whitespace.
3. Inspect Output — Select the Tree View mode on the right to inspect nested objects and arrays using a collapsible tree view.
4. Copy Output — Copy or download your formatted result.

Interactive Tree Inspection

Our interactive tree viewer allows you to inspect complex JSON payloads:

• Collapsible Nodes — Click any object {} or array [] prefix to collapse or expand its content.
• Type Color Coding — Values are color-coded to identify data types immediately:
  • Strings appear in green.
  • Numbers appear in blue.
  • Booleans appear in purple.
  • Null values appear in red.

Code Snippets

Validate and Format JSON in Vanilla JavaScript

function formatJson(jsonString, spaces = 2) {
  try {
    const parsed = JSON.parse(jsonString);
    return {
      valid: true,
      formatted: JSON.stringify(parsed, null, spaces),
      error: null
    };
  } catch (err) {
    return {
      valid: false,
      formatted: null,
      error: err.message
    };
  }
}

// Example usage
const result = formatJson('{"name":"Bob","age":30}');
if (result.valid) {
  console.log(result.formatted);
} else {
  console.error("Invalid JSON:", result.error);
}

Common JSON Validation Mistakes

JSON syntax is much stricter than standard JavaScript object literals:

• No Trailing Commas — Trailing commas at the end of lists (e.g., [1, 2,]) will crash standard parsers.
• Double Quotes Only — Property keys and string values must use double quotes: {"key": "value"}. Single quotes ({'key': 'value'}) are invalid.
• No Comments — JSON does not support inline comments (// or /* */).
• No Special Types — Values like undefined or raw function declarations are invalid. Use null for empty states.
• Unescaped Quotes — Quotes inside a string must be properly escaped (e.g., "He said \"hello\"").

Understanding these strict parsing rules is essential when debugging REST APIs and configurations.