How to Format JSON, HTML, CSS, and SQL Online

Working with messy, unformatted code is one of the most common frustrations in web development. Whether you've received minified JSON from an API response, inherited a legacy HTML file with no indentation, or need to debug a long SQL query that's been written as a single line — having a quick way to format code is essential for productivty. This guide covers how to format the most common web languages online using DevTools Pro.

Why Format Code Online?

While IDE extensions like Prettier and Black exist for local formatting, there are many scenarios where an online formatter is more practical:

• Quick one-off tasks: When you receive a snippet in Slack, an email, or a Stack Overflow answer and want to read it quickly.
• No local setup: You're on a machine without your development environment (a colleague's computer, a school lab, or a tablet).
• Cross-language needs: You're working with JSON, HTML, SQL, and CSS in the same session. Rather than configuring four different formatters, one web tool handles everything.
• Privacy-safe: DevTools Pro processes code entirely in your browser. Nothing is sent to a server, so you can safely format proprietary code.

Formatting JSON

JSON (JavaScript Object Notation) is the most common data interchange format on the web. API responses, configuration files, package.json, and database exports all use JSON. When it's minified or compressed, it becomes a wall of text that's nearly impossible to read.

To format JSON with DevTools Pro:

1. Open DevTools Pro
2. Select "JSON" from the language dropdown
3. Paste your minified JSON into the editor
4. Click "Format" — your JSON is instantly indented with proper spacing

The formatter handles nested objects, arrays, escaped strings, and unicode characters. It also validates your JSON — if there's a syntax error (missing comma, extra bracket, unquoted key), the formatter will highlight the issue so you can fix it.

Formatting HTML

HTML files can become deeply nested and hard to follow, especially when mixed with inline styles, scripts, and template syntax. Proper indentation reveals the document structure and makes it much easier to find specific elements.

DevTools Pro's HTML formatter:

• Properly indents nested elements maintaining parent-child relationships
• Formats attributes across lines when they exceed reasonable lengths
• Preserves inline content (like short paragraphs and spans)
• Handles self-closing tags, void elements, and HTML5 doctype

Formatting CSS

CSS files — especially minified production builds — are notoriously hard to read. Properties are compressed onto single lines, whitespace is removed, and selectors blur together. Formatting restores readability:

• Each property gets its own line with proper indentation
• Selectors are separated with line breaks
• Media queries and nested rules are properly indented
• Consistent spacing around colons and semicolons

This is especially useful when debugging CSS specificity issues or understanding how a third-party stylesheet works.

Formatting SQL

SQL queries can grow extremely long, particularly when joining multiple tables or using subqueries. A single-line query with 500+ characters is almost impossible to understand or debug. DevTools Pro's SQL formatter:

• Places keywords (SELECT, FROM, WHERE, JOIN, ORDER BY) on their own lines
• Indents column lists and conditions
• Aligns JOIN clauses for easy visual parsing
• Formats subqueries with proper nesting

Formatted SQL is dramatically easier to review in code reviews and helps catch logical errors like missing JOIN conditions or incorrect WHERE clauses.

Other Supported Languages

Beyond the four most common languages, DevTools Pro supports formatting for:

• JavaScript / TypeScript: Indentation, semicolons, bracket spacing, and arrow function formatting
• Python: PEP 8 compliant indentation and spacing
• XML / SVG: Element nesting with proper attribute formatting
• YAML: Consistent indentation for configuration files
• Markdown: Clean heading hierarchy and list formatting
• PHP, Java, C#, Go, Ruby, Rust: Language-appropriate formatting conventions

Privacy and Security

A critical advantage of DevTools Pro over many online formatters: all processing happens locally in your browser. Your code is never transmitted to any server. This makes it safe to format proprietary code, internal API responses, database queries containing real data, and any other sensitive content. There's no risk of data leakage because the data never leaves your device.

Common Formatting Errors and How to Fix Them

Even experienced developers run into formatting issues. Here are the most frequent problems and their solutions:

JSON: "Unexpected token" errors

This usually means there's a trailing comma after the last item in an array or object (e.g., ["a", "b",]). JSON does not allow trailing commas, unlike JavaScript. Another common cause is using single quotes instead of double quotes for strings. JSON strictly requires double quotes.

HTML: Tags appearing as text on the page

If your HTML formatter shows angle brackets as literal text (<div> instead of <div>), the HTML has been HTML-encoded. This often happens when HTML is stored in a database or passed through an API. The formatter handles this correctly — just paste the raw encoded string and it will be decoded and formatted properly.

SQL: Subqueries not formatting correctly

Complex nested subqueries sometimes produce unexpected indentation. If the formatted output looks off, try breaking the query at major clause boundaries before pasting. Modern SQL formatters handle most cases automatically, but extremely complex queries with multiple levels of nesting can occasionally produce inconsistent results.

CSS: @media rules losing formatting

CSS media queries and nested at-rules require the formatter to understand block scoping. If media query contents appear unindented, check that all opening and closing braces are properly balanced. A single missing brace will cause the formatter to misinterpret the entire structure.

When to Minify vs. When to Format

Formatting and minification serve opposite purposes — formatting is for human readability, minification is for production performance. Here's when to use each:

Best Practices for Code Formatting in Teams

While online formatters are great for one-off tasks, production codebases benefit from systematic formatting:

• Adopt a project-wide formatter: Tools like Prettier (JavaScript/TypeScript/CSS/HTML), Black (Python), or gofmt (Go) automate formatting as part of the development workflow, eliminating style disagreements in code reviews.
• Use .editorconfig files: Standardize basic settings like indentation size, line endings, and file encoding across all team members' editors.
• Add pre-commit hooks: Automatically format code before every commit using Husky (JavaScript) or pre-commit (Python). This ensures no unformatted code enters the repository.
• Configure CI/CD checks: Run formatting validation in your CI pipeline. Reject pull requests where code is not properly formatted.
• Document your style guide: Even with automated tools, document the reasoning behind your formatting choices so new team members understand the standards.

Frequently Asked Questions