# JSON Formatter & Validator

> Format, validate, minify, and explore JSON data with syntax highlighting, error detection, and structure analysis

**Category:** Dev
**Keywords:** json, format, validate, minify, pretty, print, syntax, developer, api
**URL:** https://complete.tools/json-formatter

## How it works

The tool begins by accepting your raw JSON text input. When you click the action button, the input is first passed through the native JSON.parse function, which attempts to deserialize the string into a JavaScript object. If parsing succeeds, the data is valid JSON. For formatting, the parsed object is then re-serialized using JSON.stringify with the selected indentation level (2 spaces, 4 spaces, or a tab character) as the third argument. For minification, JSON.stringify is called without any indentation argument, producing the most compact representation. The validation mode simply checks whether JSON.parse succeeds or throws an error. When an error occurs, the tool examines the SyntaxError message to extract position information. It then converts the character offset into a human-readable line number and column position by counting newline characters in the input string up to the error position. Statistics are computed by recursively traversing the parsed data structure. At each node, the algorithm checks whether the value is an object, array, or primitive. For objects, it counts the number of keys and recurses into each value. For arrays, it increments the array counter and recurses into each element. The maximum depth is tracked throughout the traversal by passing a depth counter that increments at each level of nesting. The byte size is determined using the Blob constructor, which accurately measures the string size in UTF-8 encoding. The syntax highlighting engine is a simple tokenizer that walks through the formatted JSON string character by character. It identifies string tokens (handling escape sequences), numbers, boolean literals, null, and structural characters like braces, brackets, colons, and commas. Each token is wrapped in a span element with an inline style object specifying its color. Keys are distinguished from string values by checking whether the string is followed by a colon. The tree view is built by recursively transforming the parsed JSON into a tree of node objects, where each node stores its key name, data type, display value for primitives, and an array of child nodes for objects and arrays. These nodes are rendered using the Accordion component to provide collapsible sections.

## Who should use this

Software developers debugging API responses or constructing request payloads who need to quickly validate and format JSON data. Frontend and backend engineers working with REST APIs, GraphQL responses, or configuration files stored in JSON format. Data analysts and data engineers inspecting JSON datasets, log outputs, or database exports. DevOps engineers working with infrastructure-as-code tools that use JSON configuration files, such as AWS CloudFormation templates or Terraform state files. QA testers verifying that API endpoints return correctly structured JSON responses. Technical writers documenting API specifications who need consistently formatted JSON examples. Students learning about data interchange formats and wanting to understand JSON structure visually through the tree explorer.

## Worked examples

Example 1: Formatting a compact API response. Suppose you receive a minified API response like: {"users":[{"id":1,"name":"Alice","email":"alice@example.com"},{"id":2,"name":"Bob","email":"bob@example.com"}],"total":2}. Pasting this into the tool and clicking Format with 2-space indentation produces a neatly indented version where each key-value pair appears on its own line, objects are wrapped in braces with proper indentation, and the array elements are clearly separated. The stats panel shows 7 keys, a max depth of 3, 2 objects nested inside 1 array, and the byte size of the input.

Example 2: Minifying a configuration file. You have a large, well-formatted JSON configuration file that is 4,200 bytes. You need to embed it in a URL parameter or reduce its size for storage. Switching to Minify mode and processing the input compresses it by removing all indentation and newlines, resulting in a single-line string that may be 2,800 bytes, a reduction of approximately 33 percent.

Example 3: Catching a syntax error. You paste JSON that has a trailing comma after the last element in an array: {"items": [1, 2, 3,]}. The validator identifies the error and reports "Unexpected token } at line 1, column 20", pointing directly to the closing brace that follows the illegal trailing comma.

## Limitations

The tool processes JSON using the browser's native JSON.parse, which strictly follows the JSON specification. This means it does not accept JSON5 features such as comments, trailing commas, single-quoted strings, or unquoted keys. Very large JSON documents (tens of megabytes or more) may cause the browser tab to become slow or unresponsive during parsing and formatting, as all processing occurs on the main thread. The syntax highlighting is a simple tokenizer and does not handle every edge case of Unicode escape sequences in display, though the underlying parsing and formatting remain correct. The tree view for extremely large or deeply nested structures may generate many DOM nodes, which can affect rendering performance. The error position reported for invalid JSON depends on the browser's implementation of the SyntaxError message, and exact line and column numbers may not be available in all browsers.

## FAQs

**Q:** Is my data sent to any server when I use this tool?


**A:** No. All processing happens entirely within your web browser using JavaScript. Your JSON data never leaves your machine and is not transmitted over the network.


**Q:** What indentation options are available for formatting?


**A:** You can choose between 2 spaces, 4 spaces, or tabs. The selection is made through a dropdown control above the input area.


**Q:** Can I use this tool with JSON that contains comments?


**A:** No. Standard JSON does not support comments. If your data includes comments (as in JSON5 or JSONC formats), you will need to remove them before validation and formatting will succeed.


**Q:** How accurate is the error position for invalid JSON?


**A:** The tool extracts position information from the browser's native SyntaxError message. In most modern browsers, this provides the character position, which the tool converts to a line and column number. The accuracy depends on the browser's error reporting.


**Q:** What is the maximum file size I can process?


**A:** There is no hard limit, but practical performance depends on your device and browser. JSON documents up to a few megabytes should process instantly. Documents larger than 10 megabytes may cause noticeable delays.


**Q:** Can I save the formatted output?


**A:** Yes. You can copy the output to your clipboard with the Copy button or download it as a .json file using the Download button.

---

*Generated from [complete.tools/json-formatter](https://complete.tools/json-formatter)*