# JSON Formatter: Debug Your API Responses Like a Pro

2026-04-17

https://toolblip.com/blog/json-formatter-guide

You know the pain. You open a fetch response in your browser DevTools and see:

```
{"id":1,"name":"Product","price":29.99,"in_stock":true,"tags":["electronics","sale","new"],"metadata":{"weight_kg":0.5,"dimensions":{"width":10,"height":20,"depth":5}}}
```

All on one line. Good luck finding the bug.

A **JSON formatter** solves this - it takes your compressed JSON and turns it into something a human can actually read. This guide covers what makes a formatter useful, what features to look for, and how to debug JSON errors faster.

## What Is a JSON Formatter?

A JSON formatter takes minified or poorly-structured JSON and pretty-prints it with:

- **Proper indentation** (usually 2 or 4 spaces per level)
- **Consistent spacing** between key-value pairs
- **Syntax highlighting** so you can distinguish strings from numbers from booleans
- **Line breaks** between top-level keys

The same tool usually doubles as a **JSON validator** - it tells you whether your JSON is actually valid, and shows parser error text. The displayed message is not guaranteed to include a line or column.

## Why JSON Goes Wrong

### Trailing Commas

JavaScript allows trailing commas, but JSON does not:

```json
{
  "name": "Product",
  "price": 29.99,  ← valid JS, invalid JSON
}
```

### Single Quotes

JSON requires double quotes for all keys and string values. Single quotes are a syntax error:

```json
{
  'name': 'Product'  ← invalid JSON
}
```

### Unquoted Keys

JavaScript object notation allows unquoted keys, but JSON requires them:

```json
{
  name: "Product"  ← valid JS, invalid JSON
}
```

### Comments

JSON has no comment syntax. If you paste something like:

```json
{
  // This is the product name
  "name": "Product"
}
```

That will fail validation.

## The Anatomy of a Good JSON Formatter

### 1. Syntax Highlighting

Strings, numbers, booleans, null, and keys should each be a different color. This makes it dramatically faster to scan a large response:

```
{                                        ← punctuation (white/gray)
  "id": 1,                               ← key (cyan), number (orange)
  "name": "Product",                     ← key (cyan), string (green)
  "in_stock": true,                      ← key (cyan), boolean (blue)
  "price": null                          ← key (cyan), null (red)
}
```

### 2. Error Pinpointing

When JSON is invalid, the formatter should tell you:

- **Which line and column** the error is on
- **What the error is** ("Unexpected character at position 42")
- **A visual indicator** showing exactly where the parser choked

This is the difference between spending 20 minutes hunting for a missing quote and spending 20 seconds.

### 3. Collapsible Tree View

For deeply nested JSON, the separate [JSON Tree View](/tools/json-tree-view) lets you collapse and expand nodes:

```javascript
{
  "data": {
    "users": [  ← [2 items] - click to expand
      { ... },
      { ... }
    ]
  }
}
```

### 4. Query/Path Navigation

Some formatters let you query the JSON using JSONPath or a simple dot-notation accessor:

```
data.users[0].name
→ "John Doe"
```

This is incredibly useful for finding a specific value in a large response without manually expanding every level.

## Common JSON Errors and How to Fix Them

### Error: "Unexpected end of JSON input"

This usually means a string was never closed:

```javascript
// What you pasted:
{"name": "Product}

// What JSON expects:
{"name": "Product"}
```

Fix: Check for unclosed strings, missing quotes, or truncated data.

### Error: "Unexpected token"

Could be a trailing comma, single quotes, or an invalid character:

```javascript
// This:
{"name": "Product",}

// JSON expects no trailing comma:
{"name": "Product"}
```

### Error: "Expected property name or }"

Often means a comma where there shouldn't be one:

```javascript
{"name": "Product",,}  ← double comma
```

### Error: "Invalid escape sequence"

You used a backslash that JSON doesn't recognize:

```javascript
// This:
{"path": "C:\Users\name"}

// JSON requires escaped backslashes:
{"path": "C:\\Users\\name"}
```

## JSON Formatter Use Cases

### 1. Debugging API Responses

The most common use case. You're building a frontend against an API and something's breaking. The API returns a 200 with JSON, but your code fails to parse it. Pop it in a formatter to see what's actually coming back.

### 2. Comparing Two JSON Objects

Copy two JSON payloads side by side. Look for differences in structure, missing keys, or unexpected values. Useful when debugging why a newer API version behaves differently.

### 3. Config File Validation

Your `tsconfig.json`, `.eslintrc`, or `package.json` is rejecting the JSON parser. Paste it in to find the typo.

### 4. Learning API Structures

When you're exploring a new API and want to understand the response shape. Formatter + tree view gives you a quick map of everything available.

## How to Validate JSON in JavaScript

The native `JSON.parse()` method is the simplest validator:

```javascript
function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}
```

To get the error message and position:

```javascript
function parseJSON(str) {
  try {
    return { success: true, data: JSON.parse(str) };
  } catch (e) {
    return {
      success: false,
      error: e.message,
      position: e.message.match(/position (\d+)/)?.[1],
    };
  }
}
```

## JSON vs JavaScript Objects

A common source of confusion: **JSON is a string format**. It's not the same as a JavaScript object.

```javascript
// This is a string - valid JSON
const jsonString = '{"name": "Product", "price": 29.99}';

// This is a JavaScript object - NOT JSON
const jsObject = { name: "Product", price: 29.99 };

// You can't send a JS object over HTTP - it must be serialized:
JSON.stringify(jsObject);  // → '{"name":"Product","price":29.99}'

// And to parse an incoming JSON string:
JSON.parse(jsonString);   // → { name: 'Product', price: 29.99 }
```

## Pretty-Printing in JavaScript

Native pretty-print without a library:

```javascript
const obj = JSON.parse(jsonString);
const pretty = JSON.stringify(obj, null, 2);  // 2-space indent
const compact = JSON.stringify(obj);           // minified
```

## Try It Now

The [JSON Formatter on Toolblip](/tools/json-formatter) validates, formats, and minifies JSON as you type. It shows parser errors in its text output. Use [JSON Tree View](/tools/json-tree-view) separately to explore nested structures.

---

JSON formatter tools are deceptively simple - they seem like a commodity, but a good one with fast validation, clear error messages, and a tree view will save you hours of debugging time over the course of a project.