JSON Formatter + Tree Viewer + Graph Visualizer

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. Need to generate TypeScript types from JSON? The JSON to TypeScript tool converts sample data into typed interfaces. Working with YAML, TOML, or XML instead? The Data Converter transforms between formats. Format SQL or CSS instead? The Code Formatter handles those too.