JSON Formatter: Beautify & Validate JSON

What Is JSON Formatter?

JSON Formatter is a browser-based tool that takes raw or malformed JSON text and produces cleanly indented, readable output in seconds. Developers encounter unreadable JSON constantly — from API responses compressed into a single line, to copied config fragments that lost their whitespace, to manually edited files with subtle syntax errors. This tool solves all three problems at once: it formats with configurable indentation, validates the syntax, and repairs common mistakes automatically using the jsonrepair library.

Unlike server-side alternatives, the JSON formatter runs entirely in your browser. Your data never leaves your machine. There is no account, no rate limit, and no cost.

Key Features

• Format with customizable indentation (2 or 4 spaces) — Choose your preferred indent size from the action bar dropdown before clicking Format. The selection persists between sessions when combined with preset saving.
• Validate JSON syntax with error messages — The tool runs JSON.parse after attempting auto-repair and surfaces the exact error message if the input is unparseable, displayed in the output panel with an accessible role="alert" attribute.
• Auto-repair malformed JSON — The jsonrepair library patches single-quoted strings, trailing commas, unquoted keys, and other common deviations before parsing. If repair is applied, a distinct toast notification tells you so.
• Minify JSON (remove whitespace) — Produces a single-line output with all formatting whitespace stripped, useful for embedding JSON in configuration files or reducing payload size.
• Copy formatted output to clipboard — One-click copy using the Clipboard API with a fallback for older browsers.
• Download as .json file — Saves output as formatted.json with application/json MIME type.
• Schema Validator tab — Paste JSON data and a JSON Schema draft-07 document; the tool reports every violation with its exact path (e.g., root.user.email).
• Schema Generator tab — Paste any JSON object; the tool infers a JSON Schema draft-07 document including detected formats (email, date, UUID, URI).
• Tree Viewer tab — Renders the parsed JSON as an interactive collapsible tree with color-coded types, search highlighting, expand/collapse all, and one-click path copying.

How to Use JSON Formatter

Step 1: Paste Your JSON

Open the Format/Minify tab (the default view). Paste your JSON into the Input panel on the left side. The textarea accepts any size input and can be resized vertically by dragging the bottom edge. If you are loading a shared link from a colleague, the tool reads the input from the URL automatically and shows a toast notification.

Step 2: Choose Indentation

In the action bar below the panels, open the indent dropdown. Select either 2 spaces (the default) or 4 spaces. This controls how many spaces are used per nesting level in the output. A 4-space indent is common in Python projects and some style guides; 2-space is standard in JavaScript and Node.js ecosystems.

Step 3: Click Format

Click the Format button or press Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux). The formatted JSON appears in the read-only Output panel on the right. If the input contains fixable issues — such as trailing commas or unquoted keys — a toast notification reads "JSON formatted and repaired" to confirm the repair was applied. If the JSON is invalid beyond repair, an error message appears below the output panel with the specific parse error.

Example input (compressed API response):

{"user":{"id":4821,"name":"Maria Santos","email":"maria@example.com","roles":["admin","editor"],"active":true,"lastLogin":null}}

Output with 2-space indent:

{
  "user": {
    "id": 4821,
    "name": "Maria Santos",
    "email": "maria@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "active": true,
    "lastLogin": null
  }
}

Step 4: Minify (Optional)

To reduce the JSON back to a single line, click Minify or press Cmd+Shift+M / Ctrl+Shift+M. This is useful when you have formatted JSON that needs to be embedded in an environment variable or a configuration string.

Step 5: Copy or Download the Output

Click Copy to place the output on your clipboard. Click Download to save formatted.json to your downloads folder. The Copy button is disabled until output exists, preventing accidental empty clipboard operations.

Using the Schema Validator

Switch to the Schema Validator tab. Paste your JSON data in the left panel and a JSON Schema document in the right panel, then click Validate. Results appear below with a green checkmark for valid data or a red list of violations. Each violation shows its dot-notation path (e.g., root.addresses[0].postalCode) and a plain-English description of what failed (e.g., "String does not match pattern: ^\\d{5}$").

Using the Schema Generator

Switch to the Schema Generator tab. Paste a sample JSON object and click Generate Schema. The tool produces a JSON Schema draft-07 document inferred from the sample, including format hints for strings that look like emails, dates (YYYY-MM-DD), ISO date-times, UUIDs, and URIs.

Using the Tree Viewer

Switch to the Tree Viewer tab. Paste JSON and the tree builds automatically after a 500ms debounce (no button press needed). Click any object or array node to expand or collapse it. Use the search box to highlight nodes whose key or value matches your term. Click Expand All to open the entire structure at once, or hover any node to reveal a copy-path button that copies the dot-notation path to that field.

Practical Examples

Debugging an API Response

A REST API returns a compressed user profile for troubleshooting:

{"profile":{"id":"a3f8-bc21","created":"2025-11-03","tier":"pro","quota":{"used":14200,"limit":50000},"features":["export","api","webhooks"]}}

Paste it, click Format with 2-space indent. The output immediately shows the nesting hierarchy, making it clear that quota is a nested object with two fields and features is an array of three strings. Copy the result and paste it into your bug report.

Validating a Config File Against a Schema

Your application expects a config with a required port integer between 1 and 65535 and a required host string. Paste the config JSON in the Schema Validator's left panel and a schema like:

{
  "type": "object",
  "required": ["host", "port"],
  "properties": {
    "host": { "type": "string" },
    "port": { "type": "integer", "minimum": 1, "maximum": 65535 }
  }
}

If port is "8080" (a string instead of an integer), the validator reports: root.port — Expected integer, got string.

Generating a Schema for a New API Contract

You have a sample response from a new third-party API and need to write a JSON Schema for it quickly. Paste the sample in the Schema Generator tab and click Generate Schema. The tool produces a draft-07 schema in seconds, which you can then refine manually by adding constraints like minLength, pattern, or enum values.

Tips and Best Practices

Use the keyboard shortcuts. Cmd+Enter formats and Cmd+Shift+M minifies without reaching for the mouse. On the YAML Formatter the equivalent shortcut is Cmd+Shift+J for JSON conversion, but on this tool Cmd+Shift+M always means minify.

Check the repair notification. If the success toast says "formatted and repaired" rather than "formatted successfully," review your original source. The repair may have corrected a genuine mistake in a config file that should be fixed at the source.

The tree viewer auto-builds. You do not need to click Build Tree — the tree renders 500ms after you stop typing. This is useful for quickly exploring an unknown data structure while you are still editing the input.

Copy paths for JavaScript access. In the Tree Viewer, hover any node and click the copy icon that appears. The copied path (e.g., root.users[2].address.city) is the exact dot-bracket notation you need to access that value in JavaScript after JSON.parse().

The schema generator marks all existing keys as required. After generating a schema, review the required array and remove fields that are genuinely optional in your data model.

Common Issues and Troubleshooting

"Invalid JSON syntax" error after pasting — The input could not be repaired automatically. Common causes are escaped quotes that were double-escaped during copy (\\" instead of \"), or binary characters pasted from a terminal. Try selecting the JSON in its source application and copying again, or check for invisible characters.

Output is empty after clicking Format — The input field is empty or contains only whitespace. The Format button is disabled when the input is blank, but if it somehow triggers, the error message "Please enter JSON to format" appears below the output panel.

Schema Validator shows "Invalid JSON data" — The text in the left panel of the Schema Validator is not valid JSON. Unlike the Format tab, the Schema Validator does not apply auto-repair. Paste to the Format tab first, copy the corrected output, then return to the Schema Validator.

Tree Viewer shows "Invalid JSON" — The tree viewer parses with JSON.parse without repair. If your JSON has minor issues, format it on the Format tab first to get a clean copy, then paste that into the Tree Viewer.

Download produces a file named formatted.json every time — This is by design. Rename the file after downloading.

Privacy and Security

JSON Formatter processes everything in your browser using JavaScript. No input — including sensitive API keys, tokens, passwords, or personal data embedded in JSON — is transmitted to any server. The tool works fully offline after the page is loaded. There are no analytics hooks on the formatting logic itself. You can safely paste production secrets, database credentials, or PII into this tool without data leaving your machine.

Frequently Asked Questions

Is JSON Formatter free? Yes, the JSON Formatter is completely free to use with no usage limits. The Format, Minify, Schema Validator, Schema Generator, and Tree Viewer tabs are all available at no cost. Premium Glyph Widgets supporter features like saved presets, session history, and tool notes are available for supporters, but the core formatting functionality requires nothing.

Does it work offline? Yes. Once the page has loaded in your browser, all formatting and validation operations run locally in JavaScript. You can disconnect from the internet and continue using the tool without any loss of functionality.

Is my data safe to paste here? Yes. All processing happens in your browser. The input text is never sent to a server, logged, or stored anywhere outside your browser session. You can safely format JSON that contains API keys, passwords, or personal data.

What JSON formats does the auto-repair handle? The tool uses the jsonrepair library, which handles single-quoted strings, trailing commas in objects and arrays, unquoted property keys, comments (// and / /), missing closing brackets, and several other common deviations from the JSON specification.

What constraints does the Schema Validator support? The validator supports type, enum, required, properties, additionalProperties, minProperties, maxProperties, minLength, maxLength, pattern, format (email, uri, date, date-time, ipv4, ipv6, uuid), minimum, maximum, exclusiveMinimum, exclusiveMaximum, multipleOf, minItems, maxItems, uniqueItems, and items.

What formats does the Schema Generator detect automatically? The generator detects email addresses, ISO dates (YYYY-MM-DD), ISO date-times, UUIDs, and URIs. It also distinguishes between integer and number types for numeric values.

Can I validate an array instead of an object? Yes. The schema validator and schema generator both accept any valid JSON value at the root level — including arrays, strings, numbers, and booleans, not only objects.

What is the keyboard shortcut to format? Press Cmd+Enter on macOS or Ctrl+Enter on Windows and Linux to trigger Format. Press Cmd+Shift+M or Ctrl+Shift+M to Minify. These shortcuts only activate when the Format/Minify tab is active.

Can the tool handle very large JSON files? The tool stores up to 10,000 characters per history entry, but the formatting itself has no built-in limit beyond browser memory. Very large files (multiple megabytes) will format correctly but may cause the textarea to feel sluggish on lower-end devices.

What schema draft does the generated schema target? The generator produces JSON Schema draft-07 documents, identified by "$schema": "http://json-schema.org/draft-07/schema#" in the output.

Related Tools

XML Formatter — Format and validate XML documents with the same indentation controls and minification support.

YAML Formatter — Format YAML files and convert them directly to JSON output with configurable indentation.

JSON Converter — Convert JSON to and from CSV, XML, YAML, and other data formats.

Try JSON Formatter now: JSON Formatter