How to Format JSON, HTML, CSS, and SQL Code Online
Quick Answer
Use an online code formatter to instantly beautify your code. Paste your code, select the language (or use auto-detect), and click Format. The tool adds proper indentation, line breaks, and syntax highlighting.
Code Beautifier Tool
Format JSON, HTML, CSS, SQL, JavaScript, XML, and YAML in one place
Open Tool →Why Format Code
Unformatted code is hard to read and debug. APIs return minified JSON, copied code loses its structure, and manually written code often lacks consistent formatting. A code formatter solves these problems instantly.
- Readability — See the structure at a glance
- Debugging — Find errors faster in well-organized code
- Collaboration — Share readable code with teammates
- Learning — Understand third-party code more easily
Formatting JSON
JSON
JSON (JavaScript Object Notation) is commonly returned by APIs in minified form. Formatting makes the data structure visible.
Before Formatting
{"users":[{"id":1,"name":"Alice","email":"alice@example.com"},{"id":2,"name":"Bob","email":"bob@example.com"}],"total":2}After Formatting
{
"users": [
{
"id": 1,
"name": "Alice",
"email": "alice@example.com"
},
{
"id": 2,
"name": "Bob",
"email": "bob@example.com"
}
],
"total": 2
}JSON formatting also validates your data. If the formatter shows an error, your JSON has syntax issues.
Formatting HTML
HTML
HTML from minifiers or templates often lacks proper nesting visibility. Formatting reveals the document structure.
Before Formatting
<div class="container"><header><h1>Title</h1></header><main><p>Content</p></main></div>After Formatting
<div class="container">
<header>
<h1>Title</h1>
</header>
<main>
<p>Content</p>
</main>
</div>HTML formatting handles self-closing tags (like <br>, <img>) correctly and won't add unnecessary closing tags.
Formatting CSS
CSS
CSS from preprocessors or minifiers loses readability. Formatting groups properties and shows selector hierarchy.
Before Formatting
.container{max-width:1200px;margin:0 auto;}.container .header{background:#fff;padding:20px;}.container .header h1{font-size:24px;color:#333;}After Formatting
.container {
max-width: 1200px;
margin: 0 auto;
}
.container .header {
background: #fff;
padding: 20px;
}
.container .header h1 {
font-size: 24px;
color: #333;
}Formatted CSS makes it easier to spot duplicate properties and identify selector specificity issues.
Formatting SQL
SQL
SQL queries from logs or generated by ORMs are often one-liners. Formatting breaks them into readable clauses.
Before Formatting
SELECT u.id, u.name, o.total FROM users u LEFT JOIN orders o ON u.id = o.user_id WHERE o.status = 'completed' AND o.total > 100 ORDER BY o.total DESC LIMIT 10After Formatting
SELECT
u.id,
u.name,
o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
AND o.total > 100
ORDER BY o.total DESC
LIMIT 10SQL formatting highlights keywords and makes complex joins and subqueries much easier to understand.
Step-by-Step: How to Use the Formatter
- Paste your code — Copy the unformatted code and paste it into the input area. You can also use the Paste button.
- Select the language — Choose from the dropdown, or use Auto Detect to let the tool identify the format automatically.
- Click Beautify — The formatter processes your code and displays the result with syntax highlighting.
- Copy or download — Use Copy to clipboard, or Download as a file. You can also Replace Input to continue editing.
Formatting Options
Most formatters let you customize the output:
- Indent Size — 2 or 4 spaces are common. Some teams prefer tabs.
- Indent Style — Spaces or tabs. Spaces are more consistent across editors.
- Preserve Empty Lines — Keep blank lines that separate logical sections.
- Wrap Long Lines — Break long lines to fit within a certain width.
Common Issues and Fixes
| Problem | Cause | Solution |
|---|---|---|
| "Invalid JSON" error | Missing quotes, trailing commas, or unescaped characters | Check the error line number and fix syntax |
| HTML looks wrong | Unclosed tags or malformed markup | Use an HTML validator first |
| Wrong language detected | Code has ambiguous syntax | Manually select the correct language |
| Formatting lost after copy | Editor settings overriding indentation | Check your editor's tab/indent settings |