JSON Formatter & Validator

How to Use the JSON Formatter

This free online JSON formatter and validator helps you quickly format, validate, and minify JSON data. Simply paste your JSON into the input field and click "Format" to beautify it with proper indentation, or "Minify" to compress it into a single line.

Features

• Instant JSON formatting with customizable indentation (2 spaces, 4 spaces)
• JSON validation with clear error messages showing exactly where the issue is
• One-click minification to reduce JSON file size
• Copy formatted output to clipboard with a single click
• Works entirely in your browser - no data is ever sent to a server

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is easy for humans to read and write, and easy for machines to parse and generate. JSON is widely used for API responses, configuration files, and data storage. Properly formatted JSON improves readability and makes debugging much easier.

Common JSON Errors

The most common JSON errors include missing commas between key-value pairs, trailing commas after the last element, using single quotes instead of double quotes, and unescaped special characters in strings. Our validator will catch all of these and show you exactly where the problem is.

JSON Formatter & Validatorの使い方

このツールはJSONデータの整形・検証・圧縮をブラウザ上で即座に実行できます。JSONを入力欄に貼り付け、「整形」ボタンでインデント付きの読みやすい形式に変換するか、「圧縮」ボタンで不要な空白を削除してファイルサイズを削減できます。構文エラーがある場合は、エラー箇所が表示されます。

実務での活用例

1. APIレスポンスのデバッグ

本番APIから返ってきた1行の巨大JSONをブラウザに貼って整形すると、ネストの深いフィールドが一目で把握できます。 個人情報やAPIキーが含まれることもありますが、本ツールはブラウザ内完結のためサーバーに送信されません。

2. よくある構文エラーと原因

• Unexpected token , in JSON at position ... → 末尾カンマ。配列・オブジェクトの最後の要素の後に付けるとエラー
• Unexpected token ' in JSON at position 1 → シングルクォート。JSONはダブルクォートのみ有効
• Unexpected end of JSON input → 閉じカッコ不足。コピペで末尾が欠けている可能性
• Unexpected token N in JSON at position ... → NaN や Infinity はJSONに存在しない。nullに置換するか文字列化する

3. 整形後の活用

整形したJSONをさらに加工する場合、JSON to TypeScriptで型を自動生成したり、JSONPath Testerで特定フィールドを抽出できます。 レスポンスの差分比較はDiff Checkerが便利です。

よくあるエラーと対処 / Common Errors and Fixes

JSON.parse で遭遇する頻度の高いエラーを V8 (Chrome/Node.js) のメッセージ基準でまとめました。

The errors most commonly thrown by JSON.parse, based on V8 (Chrome/Node.js) messages.

言語別コード例 / Code Examples by Language

整形・検証をアプリ側で再現するための最小サンプル。

Minimal snippets to format and validate JSON programmatically.

JavaScript / TypeScript

// 整形 / Pretty-print (2-space indent)
const pretty = JSON.stringify(JSON.parse(input), null, 2);

// 圧縮 / Minify
const min = JSON.stringify(JSON.parse(input));

// 検証 / Validate
try { JSON.parse(input); }
catch (e) { console.error((e as Error).message); }

Python

import json

# 整形 / Pretty-print
pretty = json.dumps(json.loads(s), indent=2, ensure_ascii=False)

# 圧縮 / Minify
minified = json.dumps(json.loads(s), separators=(",", ":"))

# 検証 / Validate
try:
    json.loads(s)
except json.JSONDecodeError as e:
    print(e)

Go

import "encoding/json"

var v any
if err := json.Unmarshal([]byte(s), &v); err != nil {
    // invalid JSON
}
pretty, _ := json.MarshalIndent(v, "", "  ")

Shell (jq)

# 整形 / Pretty-print
echo "$JSON" | jq .

# 圧縮 / Minify
echo "$JSON" | jq -c .

Before / After 実例 / Before & After

例1: 1行の巨大レスポンスを可読化 / Pretty-print a single-line response

{"user":{"id":42,"name":"Koba","roles":["admin","editor"]},"ok":true}

↓

{
  "user": {
    "id": 42,
    "name": "Koba",
    "roles": ["admin", "editor"]
  },
  "ok": true
}

例2: 末尾カンマを除去 / Fix trailing comma

{
  "a": 1,
  "b": 2,   // ← NG
}

↓

{
  "a": 1,
  "b": 2
}

例3: JS 風オブジェクトを JSON に / From JS-like to JSON

{ name: 'Koba', age: 30 }

↓

{ "name": "Koba", "age": 30 }

シングルクォート→ダブルクォート、キーをクォートで囲む、が必須。

Replace single quotes with double quotes, and quote every key.

Why browser-only? / なぜブラウザ完結か

JSON payloads frequently contain user identifiers, access tokens, or proprietary business data. Pasting them into a server-hosted formatter sends that content to a third party, even when the response is "only formatted." DevToolBox runs JSON.parse andJSON.stringify entirely in your browser — no network request is made, and you can verify this yourself: open DevTools → Network, use the tool, and the tab stays empty.

JSON には個人 ID、アクセストークン、業務データが含まれることが多く、サーバで動く整形ツールへ貼ると、 「整形結果が返るだけ」でも中身は第三者へ送信されます。DevToolBox は JSON.parse / JSON.stringify を すべてブラウザ内で実行します。ネットワーク通信は発生せず、DevTools → Network タブが空のままであることで検証できます。