WebBeautify

Format JSON, SQL, HTML, YAML — you name it

A code formatter pretty-prints with consistent indent: JSON formatter / JSON pretty print, SQL formatter, XML formatter, YAML formatter, HTML formatter, GraphQL, Markdown. You paste a one-line API body or a log query and get something a human can review.

Compact JSONJSON pretty print{"ok":true,"n":1}{"ok": true,"n": 1}Same document. Formatter, beautifier, pretty-print — people search all three.
Formatters tools

Why people use an online JSON formatter

REST and GraphQL responses arrive as one line. Config files mix tabs. A JSON pretty printer (same job as JSON beautifier for most pastes) uses two-space indent, keeps key order from the parser, and fails loudly on trailing commas and single quotes — those are JavaScript objects, not JSON. Validate first if you already suspect the file is illegal; pretty-print first if you cannot even see the braces.

SQL format is for the query in a log: `SELECT` / `FROM` / `WHERE` on their own lines so a missing join condition shows up. YAML format is for CI configs — and remember YAML 1.1 treated `NO` as boolean-ish, so quote country codes. XML format makes a sitemap or SOAP envelope into a tree you can stare at.

Compact JSONJSON pretty print{"ok":true,"n":1}{"ok": true,"n": 1}Same document. Formatter, beautifier, pretty-print — people search all three.
A JSON formatter pretty-prints keys and arrays with stable indent.

How to format without changing meaning

Paste. Run. Copy. Do not sort JSON keys “for beauty” on a signed payload — `{"b":1,"a":2}` can HMAC differently as a string. Do not strip the two trailing spaces that Markdown uses as a `<br>`. GraphQL commas are optional; format can keep them for reading. TypeScript formatters indent braces; they do not type-check.

Tools in this hub

HTML Formatter

Format HTML online. Consistent indent for templates, emails, and partials. Same engine as the HTML beautifier, formatter-first UI.

CSS Formatter

Format CSS online. Indent rulesets and declarations. Built for stylesheet reviews and pasted DevTools output.

JavaScript Formatter

Format JavaScript online. Indent functions, wrap statements, and clean minified bundles for reading.

JSON Formatter

Format JSON online. Pretty-print and catch parse errors. The everyday JSON tool for APIs and configs.

JSON Pretty Print

Pretty print JSON online. Expand compacted API responses with two-space indent. Copy or download the result.

XML Formatter

Format XML online. Indent nested elements for RSS, sitemaps, SOAP, and Android-style resources.

PHP Formatter

Format PHP online. Indent blocks and restore structure in snippets pulled from logs or one-liners.

SQL Formatter

Format SQL online. Break clauses onto new lines and uppercase keywords for readable queries.

YAML Formatter

Format YAML online. Normalize indent for CI configs, front matter, and Compose-style files.

Markdown Formatter

Format Markdown online. Trim lines, normalize blank lines, and tidy lists in README-style text.

GraphQL Formatter

Format GraphQL queries online. Indent selection sets so nested fields are easy to scan.

TypeScript Formatter

Format TypeScript online. Indent types and functions in TS snippets. Conservative JS-family beautifier.

JSX Formatter

Format JSX/TSX-like markup. Indent tags in React snippets when you need a quick tidy, not a full Prettier install.

Questions about formatters

Should I format JSON before I validate it?

Validate first if you suspect the file is illegal. Format first if you cannot even see the braces. {"ok":true,"n":1} pretty-prints into a two-space tree. If that fails, you probably have a trailing comma or single quotes — JavaScript, not JSON.

Does formatting JSON sort keys?

A normal formatter keeps the parser’s order. Do not sort “for beauty” on a signed payload. {"b":1,"a":2} and {"a":2,"b":1} are equal as data, not always equal as a string you HMAC.

What is a tiny JSON format example?

Minified: {"tools":["minify","format"]}. Formatted: "tools" on its own line, array items indented. Same document. Fun fact: JSON forbids comments, trailing commas, and NaN.

Why format SQL if the engine ignores whitespace?

Humans do not ignore it. Keywords on their own lines make a missing JOIN condition obvious. select id from users where active=1 becomes SELECT / FROM / WHERE. Fun fact: "User" and "user" might still be different identifiers — format keywords, leave quotes alone.

Can I format TypeScript the same way as JavaScript?

The shape is the same family: braces, indent, line breaks. Types vanish at runtime anyway. Formatting interface User { id: string } does not change a byte of the JavaScript that actually runs. It also does not type-check.

What about YAML and the word `NO`?

Fun fact: YAML 1.1 treated yes, on, and NO as boolean-ish. A country code can become false. Keep quotes when a string looks like a word: country: "NO".

Does Markdown format care about trailing spaces?

Yes. Two spaces at the end of a line is a <br>. A “helpful” strip of trailing space can delete a line break you meant. Format blank lines; do not vacuum every space.

GraphQL commas — keep or drop?

GraphQL ignores commas. tool { name, slug } and tool { name slug } are the same query. Format for reading; minify can drop the commas and the server will not miss them.