Beautify with color
🎨 Color-coded tokens
Each token type gets its own color: keys in bold blue, strings in green, numbers in amber, booleans in purple, null in gray. Scan complex JSON instantly.
🌗 Theme-aware
Colors adapt to your theme — light mode uses bright, contrasting colors; dark mode uses softer, eye-friendly tones. Toggle with the theme button in the header.
⚡ Live beautification
Output updates as you type (debounced for performance). See the result instantly without clicking a button.
⚙️ Flexible indentation
Choose 2 spaces, 4 spaces, or tabs. Optionally sort keys alphabetically for cleaner diffs and easier scanning.
📋 One-click copy
Copy the beautified output to your clipboard, or download as a .json file. The copied text is plain (no HTML), ready to paste anywhere.
💾 Auto-save
Your input is saved to localStorage automatically. Close the tab, come back tomorrow, and your work is still there.
Beautifying JSON — common questions
What's the difference between JSON formatting and beautifying?
They're often used interchangeably. Both add whitespace (line breaks and indentation) to make JSON readable. The Beautifier specifically includes syntax highlighting on top of pretty-printing — color-coded tokens make different value types visually distinct. The Formatter focuses on the structural transformation.
If you just need pretty-printed JSON without colors, use the Formatter. If you want the visual experience with colors, use this Beautifier. Both produce identical plain-text output when copied.
What colors are used for syntax highlighting?
The default color scheme follows popular editor conventions:
• Keys: bold blue or dark color
• Strings: green
• Numbers: amber/orange
• Booleans: purple
• Null: gray, italic
• Punctuation: neutral gray
Colors adapt to your theme — switch between light and dark using the moon/sun icon in the header.
Does the Beautifier change my JSON data?
No — only whitespace and visual presentation are modified. The underlying JSON value is identical: keys are not renamed, values are not changed, and order is preserved (unless you enable "Sort keys"). The beautified output parses back to the exact same value as your input.
Can I copy the beautified output without the colors?
Yes. The colors are visual only — they're CSS styles applied to HTML spans. When you click the Copy button, the plain text is copied to your clipboard (no HTML, no color codes). You can paste it into any text editor or IDE and get clean, formatted JSON.