JSON Formatter

Format JSON text, validate structure, and minify output.

Open tool Back to tools
// about

About this Tool

JSON text can look like a giant block of messy words. This tool automatically arranges it with clean line breaks and spaces so you can easily read, check, or fix your data.

How to use it

  1. Paste your messy JSON text into the top box.
  2. Click 'Run' to format it, or check 'Minify' if you want a compact version.
  3. Copy your clean text and use it in your code or documents.

Why people use this tool

  • Makes hard-to-read data look neat and organized in one click.
  • Helps you spot missing commas or wrong characters right away.
  • Lets you shrink your text size (minify) when you want to send data faster.

Frequently Asked Questions

What is JSON?

JSON is a simple way computers share list data and information using curly brackets and quotes.

Will my data be stored on your server?

No, everything is processed directly in your web browser. Your data stays private.

What if I see an error message?

It usually means a quotation mark or comma is missing in your input text. Double check your formatting!

Guides · Data · 7 min read

Fixing JSON Syntax Errors: The 7 Most Common Mistakes and How to Clean Up JSON

API responses, configuration files and logs: JSON is the data format developers read most. Yet a single comma or quote can trigger an 'Unexpected token' error. Here is how to find the cause quickly.

JSON (JavaScript Object Notation) is a text format standardised in RFC 8259 and ECMA-404. It came from JavaScript but is now supported by almost every language. There are only six value types: string, number, boolean (true/false), null, array and object.

{
  "id": 1024,
  "name": "AIBIZAP",
  "active": true,
  "tags": ["tools", "guides"],
  "owner": null
}
JSON basics, seven mistakes that cause parse errors, pitfalls with big numbers and dates, and how to turn JSON into classes or database tables.
Read guide →

Related guides

Data 7 min read

CSV vs JSON: When to Use Each and What to Watch When Converting

Structural differences between CSV and JSON, why Excel garbles UTF-8 CSV files, quoting rules for commas and quotes, and how to flatten nested data.

Read guide
Build it with AI

Build this tool yourself with AI

Want your own version of this tool? Copy the work-order prompt into an AI chat, or save the skill file for an AI coding agent. Both describe the features, edge cases and test cases we used when building it.

AI work-order prompt

Paste it as-is into an AI chat such as Claude, ChatGPT or Gemini.

You are an experienced full-stack web developer. Build a web tool called "JSON Formatter" that meets the requirements below.

## Goal

Build a tool that validates JSON and pretty-prints or minifies it.

## Core features

- Validation with error line and column
- Indent with 2 spaces, 4 spaces or tabs
- Minify mode
- Optional alphabetical key sorting
- Copy result and download as .json

## Inputs

- JSON text
- Indentation, sorting and mode options

## Outputs

- Formatted or minified JSON
- Error message with position

## Edge cases and handling rules

- Explain common errors such as trailing commas, single quotes and comments in plain language
- Preserve integers larger than 2^53 exactly
- Strip a leading BOM
- Stay responsive with multi-megabyte input

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- '{"a":1,}' is reported as a trailing comma error
- Formatting then minifying keeps the same meaning
- 12345678901234567890 is preserved

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

Skill (SKILL.md)

Save it as .claude/skills/build-json-formatter/SKILL.md for AI coding agents such as Claude Code to reuse whenever you build or change this tool.

---
name: build-json-formatter
description: Use when building or changing a JSON Formatter tool. Build a tool that validates JSON and pretty-prints or minifies it.
---

# Build: JSON Formatter

## Goal

Build a tool that validates JSON and pretty-prints or minifies it.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Validation with error line and column
- Indent with 2 spaces, 4 spaces or tabs
- Minify mode
- Optional alphabetical key sorting
- Copy result and download as .json

## Inputs

- JSON text
- Indentation, sorting and mode options

## Outputs

- Formatted or minified JSON
- Error message with position

## Rules

- Explain common errors such as trailing commas, single quotes and comments in plain language
- Preserve integers larger than 2^53 exactly
- Strip a leading BOM
- Stay responsive with multi-megabyte input
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] '{"a":1,}' is reported as a trailing comma error
- [ ] Formatting then minifying keeps the same meaning
- [ ] 12345678901234567890 is preserved

Tips for working with AI

  • Tell the AI your stack (for example React, Vue or plain HTML) on the first line so the code matches your project.
  • Ask it to run the listed test cases and show the results before you accept the code.
  • Never paste real secrets, customer data or API keys into the prompt; use sample values instead.