JSON Formatter + Tree Viewer + Graph Visualizer

Paste JSON to pretty-print, minify, validate, or visualize as an interactive graph. Syntax highlighting, tree view, and graph view with export.

100% client-side. Your data never leaves your browser.

Loading editor...

Loading editor...

Converters & Examples

Format a JSON API Response: Pretty Print Example

Pretty-print a minified JSON API response with proper indentation. Covers indent conventions, jq usage, minification trade-offs, and common syntax mistakes.

 Minify JSON Online: Compact JSON Tool

Remove whitespace from JSON to reduce file size. One-click minification for API payloads, config files, and log entries.

 Validate JSON Syntax: Online JSON Validator

Paste JSON and instantly see if it parses. Common syntax errors caught: trailing commas, single quotes, unquoted keys, missing brackets.

Related Tools

b64
Base64 Encode/Decode

Encode and decode Base64 strings online. Handles UTF-8 text, emoji, and binary data with full round-trip support. No server, no signup.

 jwt
JWT Decoder

Decode and inspect JSON Web Tokens in your browser. View the header, payload claims, and expiration status without sending your token to any server.

 %20
URL Encoder & HTML Entity Encoder

Encode text for URLs with encodeURIComponent or encodeURI, and escape HTML special characters to named or numeric entities. All processing happens in your browser.

 +/-
Diff Checker

Compare two blocks of text side by side or inline with character-level highlighting. Find additions, removals, and changes instantly in your browser.

 sha
Hash Generator

Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text or files. Uses the browser's Web Crypto API for SHA hashes with a pure JS fallback for MD5.

 </>
SQL / CSS / HTML Formatter

Format and minify SQL queries, CSS stylesheets, and HTML markup with syntax highlighting. Indent, beautify, or compress code in your browser.

JSON Formatter, Validator, and Graph Visualizer Online

JSON (JavaScript Object Notation) is the standard data format for APIs, config files, and data exchange. Paste minified or messy JSON here to format it with proper indentation, validate the syntax, explore nested structures in the tree view, or visualize the entire structure as an interactive graph. Catches trailing commas, missing brackets, and unquoted keys as you type.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format that uses human-readable text to store and transmit data objects consisting of key-value pairs and arrays. It is the most common format for APIs, configuration files, and data exchange between systems. JSON is language independent (despite its JavaScript-derived syntax), and most programming languages have built-in or library support for parsing and generating JSON. A typical JSON document looks like {"name": "John", "age": 30, "active": true}. JSON is defined by RFC 8259 and is supported by every modern web browser and API.

How to Use

  1. Paste JSON into the input editor on the left
  2. Format or Minify using the buttons in the toolbar
  3. View the output as formatted text, switch to Tree view, or click Graph for a visual diagram
  4. Adjust indentation with the dropdown (2 spaces, 4 spaces, or tabs)
  5. Copy the formatted result with one click

Features

Syntax Highlighting

The editor provides full JSON syntax highlighting powered by CodeMirror 6, with bracket matching, line numbers, and active line highlighting. The dark theme is designed for comfortable reading.

Real Time Validation

JSON is validated as you type. Errors are shown with descriptive messages and position information, so you can quickly find and fix issues like missing commas, unclosed brackets, or invalid values.

Tree View

The interactive tree view lets you expand and collapse objects and arrays to explore deeply nested structures. Values are color coded by type: strings in green, numbers in blue, booleans in orange, and null in gray.

Graph Visualization

The graph view renders your JSON as an interactive hierarchical diagram. Zoom with scroll, pan by dragging, and click nodes to expand or collapse subtrees. Nodes are color coded by value type. Export the graph as PNG or SVG for sharing or documentation.

Minification

The minify function removes all whitespace from valid JSON, producing the most compact representation. This is useful when you need to reduce payload size for API requests or storage.

Decoded a JWT and want to inspect the payload? The JWT Decoder extracts the JSON, and you can paste it here to format or explore the claims in the tree view. If you need to send JSON as a query parameter, run the minified output through the URL Encoder first. Need to compare two JSON structures? The Diff Checker shows exactly what changed. Hash the formatted JSON for integrity verification with the Hash Generator. Format SQL or CSS instead? The Code Formatter handles those too.