How to Format Code Online: JSON, CSS, HTML, SQL (No Upload, No Login)

You can format JSON, CSS, HTML, and SQL instantly using brevio Code Formatter — paste your code, pick the language tab, and get clean output in seconds. No upload, no account, no third-party service receiving your code.

Inconsistent code formatting is one of the most common sources of noise in code reviews and diffs. A 300-line file that has been reformatted touches every line — reviewers can't see the actual logic change buried in the whitespace noise. Formatting before committing (or at minimum before creating a PR) eliminates this problem entirely.

Why Formatting Matters Beyond Aesthetics

Formatting isn't about personal preference — it affects real productivity. Consistently indented code reduces cognitive load when scanning for structure. Consistently ordered SQL keywords make queries scannable at a glance. Minified CSS is unreadable during debugging; formatted CSS exposes the cascade structure. Most importantly, version control diffs are much cleaner when every commit uses the same formatting: you see what changed, not how whitespace was reorganised.

JSON Formatting

JSON formatting uses the browser's native JSON.parse() and JSON.stringify(). This means it validates as well as formats — invalid JSON produces an error, not silently corrupted output. The formatter supports 2-space and 4-space indentation. All JSON keys remain in their original order (JavaScript preserves insertion order for string keys).

A common use case: prettifying minified API responses for debugging. When you fetch data from an API and log it, response bodies are often minified. Pasting the minified JSON and formatting it with 2-space indent makes nested structures readable in seconds.

// Before
{"user":{"id":123,"name":"Alice","roles":["admin","editor"],"profile":{"avatar":"https://...","bio":"..."}}}

// After (2-space indent)
{
  "user": {
    "id": 123,
    "name": "Alice",
    "roles": [
      "admin",
      "editor"
    ]
  }
}

CSS Formatting

CSS formatting expands minified stylesheets into readable form with one property per line. This is useful when debugging compiled stylesheets from CSS preprocessors (Sass, Less) or when inspecting a third-party stylesheet that shipped minified. The formatter handles the most common patterns: selectors, properties, media queries.

Note that the built-in formatter is a regex-based approximation — it handles typical CSS patterns well but may not handle edge cases like nested CSS (from PostCSS plugins) or complex selector patterns. For production-grade CSS formatting, prettier or stylelint --fix provides full parser-based formatting.

HTML Formatting

HTML formatting adds indentation to reflect the document tree. It handles standard tags and increments indentation depth for each opening tag, decrementing for closing tags. Void elements (br, img, input, etc.) do not increment depth. This is most useful for reading minified HTML or debugging template output.

SQL Formatting

SQL formatting puts each major keyword (SELECT, FROM, WHERE, JOIN, ORDER BY, GROUP BY) on its own line. This transforms a compact one-liner into a readable query structure where each clause is visually separated. The formatter is keyword-aware and case-insensitive — it will rewrite mixed-case keywords to uppercase (the conventional SQL style).

-- Before
SELECT u.id, u.name, o.total FROM users u INNER JOIN orders o ON u.id = o.user_id WHERE u.active = 1 ORDER BY o.total DESC LIMIT 20

-- After
SELECT u.id, u.name, o.total
FROM users u
INNER JOIN orders o
ON u.id = o.user_id
WHERE u.active = 1
ORDER BY o.total DESC
LIMIT 20

DevTools Verification

1. Open DevTools with F12 (Windows/Linux) or ⌘⌥I (Mac).
2. Go to the Network tab, filter to Fetch/XHR.
3. Paste code containing sensitive values (API keys, query parameters with credentials).
4. Click Format — observe that no network requests are made. All processing uses native browser APIs.

Code Formatter Comparison

Frequently Asked Questions

Why use an online formatter instead of an IDE?

Online formatters are useful when you're working with a snippet outside your normal IDE — pasting from a Slack message, debugging an API response in a browser, or quickly checking a config file structure. For production code that lives in a repository, configure a formatter in your project (Prettier, eslint --fix, sqlfluff) so formatting is automated and consistent.

Does the JSON formatter preserve key order?

Yes. JavaScript's JSON.stringify preserves the insertion order of string keys in objects, which matches the order in the original JSON. If you paste {"b":1,"a":2}, the formatted output will have b before a. Some formatters sort keys alphabetically — brevio does not.

Can I format minified CSS from a production bundle?

Yes, that is the primary use case. Copy minified CSS from DevTools, paste it into the CSS tab, and click Format. The regex-based formatter handles typical property-value pairs and selector blocks well. Complex cases like @charset, @keyframes, or deeply nested selectors may require a full CSS parser (postcss-cli prettify or stylelint).

Is the SQL formatter case-sensitive?

The formatter detects SQL keywords case-insensitively and normalises them to uppercase (SELECT, FROM, WHERE, etc.). Your identifiers (table and column names) retain their original casing. This follows the SQL community convention where reserved keywords are uppercase and identifiers use the casing from your database schema.