🌳 JSON Visualizer

📝 JSON / JSON Lines Input

⚡ Quick Actions

🧭 Input Format

Detected:Parsing as: {{ formatLabel }} · {{ recordCount }} records, one JSON value per line

📁 Load a File

📁

Drop file here! Drag and drop a .json or .jsonl file here, or anywhere on this page

or

Up to 25 MB. Files are read locally in your browser and never uploaded.

Selected Files ({{ selectedFiles.length }})
Total Files: {{ fileCount }} Total Size: {{ formatFileSize(totalSize) }}
⏳ Reading file…
❌ {{ fileError }}
ℹ️ {{ fileNotice }}

🎛️ Controls

✅ Valid {{ formatLabel }} ❌ Invalid {{ formatLabel }} {{ recordCount }} records ({{ jsonInput.length }} characters)
{{ validationError }}
  • Line {{ lineError.line }}: {{ lineError.message }}
  • …and {{ lineErrors.length - 10 }} more

🌳 JSON Tree View

{{ nodeCount }} nodes
null
❌ Invalid JSON
{{ validationError }}
📋 Paste JSON or JSON Lines
Enter valid data above, or drop a .json / .jsonl file anywhere on this page

📊 JSON Statistics

Total Keys:
{{ statistics.totalKeys }}
Max Depth:
{{ statistics.maxDepth }}
Arrays:
{{ statistics.arrays }}
Objects:
{{ statistics.objects }}

ℹ️ About JSON Visualizer

JSON Visualizer turns JSON and JSON Lines into an expandable tree so API responses, configuration files, logs, webhooks, and nested payloads are easier to inspect than a flat text blob. Paste text, or drag and drop a local .json, .jsonl, or .ndjson file anywhere on this page.

JSON is a text-based data interchange format standardized by RFC 8259 and aligned with ECMA-404. The visualizer parses objects, arrays, strings, numbers, booleans, and null, then reports node count, total keys, maximum depth, array count, and object count.

JSON Lines (JSONL, also called NDJSON) stores one JSON value per line and is the usual shape of structured log files, streaming exports, and bulk API dumps. The visualizer shows a JSON Lines input as an array with one element per record; blank lines are skipped, and parse failures are reported with their line numbers. Detection is automatic: when the input is not a single JSON document but most of its lines parse on their own, it is treated as JSON Lines. Use the input format selector to force JSON or JSON Lines, for example to view a one-line .jsonl file as a single-element array.

Useful for:

  • Reviewing REST, GraphQL, webhook, and queue payloads before saving them into documentation or bug reports.
  • Opening exported .json and .jsonl files from disk without leaving the browser.
  • Browsing JSON Lines log files and event streams record by record, with nested fields collapsed until needed.
  • Finding deeply nested IDs, feature flags, timestamps, and error fields inside large objects or arrays.
  • Checking whether a minified response is valid JSON before formatting, converting, or generating a schema from it.
  • Comparing structural complexity with quick counts for keys, arrays, objects, total nodes, and maximum depth.

Example: an input such as {"users":[{"id":1,"roles":["admin"]}],"meta":{"total":1}} expands into object and array nodes for users, roles, and meta, making nested values easier to scan and copy. Two lines such as {"id":1,"level":"info"} and {"id":2,"level":"error"} are detected as JSON Lines and shown as a two-record array.

Limitations: comments, trailing commas, single-quoted strings, NaN, and Infinity are JavaScript-like extensions, not valid JSON. Duplicate object keys can be lossy when parsed by JavaScript, and very large numbers may lose precision. Files are limited to 25 MB because the whole document is held in memory by the editor and the tree. For JSON Lines input the wrapping array counts as one array node and one level of depth in the statistics. The context-menu path helper is for quick navigation; it is not a complete RFC 6901 JSON Pointer or RFC 9535 JSONPath evaluator.

The interactive page runs parsing and tree statistics in your browser, and dropped files are read locally with the File API and never uploaded. If you use the API example, the JSON text is sent to the server endpoint, so avoid submitting secrets, tokens, or customer data unless your workflow allows it.

API Usage Example:

POST /api/tools/format/json-visualizer
Content-Type: application/json

{
    "json": "{\"name\":\"Ada\",\"active\":true,\"scores\":[1,2],\"profile\":{\"city\":\"London\"}}",
    "format": "auto"
}
Ready