# Code Formatter

Beautify and re-indent minified or messy HTML, CSS, JavaScript, or JSON. Auto-detect the language, choose spaces or tabs, and format locally in your browser.

## Run it

- **CLI:** `gizza tool code-formatter "Paste HTML, CSS, JavaScript, or JSON…"`
- **Web:** https://gizza.ai/tools/code-formatter/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/code-formatter/tool.json

## Inputs

- `code` — Code to format _(field)_
- `language` — Language _(field)_
- `indent` — Spaces per level (1–8) _(field)_
- `indent_char` — Indent character _(field)_

## Output

- Formatted code (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `code` — Code to format
- `language` — Language
- `indent` — Spaces per level (1–8)
- `indent_char` — Indent character

Example: `https://gizza.ai/tools/code-formatter/?code=Paste%20HTML%2C%20CSS%2C%20JavaScript%2C%20or%20JSON%E2%80%A6&language=auto&indent=2&indent_char=space`

---

## What this tool does

Paste a **minified or messy** HTML, CSS, JavaScript, or JSON snippet and get it
back cleanly **re-indented and line-broken**. Leave the language on **auto** to
detect it from the snippet, or pick one explicitly when auto-detect guesses
wrong. Choose how many spaces to indent per nesting level, or switch to tabs.

Everything runs locally in your browser. For HTML, CSS, and JavaScript only the
**whitespace and line breaks** change — nothing is renamed, reordered, or
dropped. JSON is parsed, validated, and re-serialized with **key order
preserved**.

## Languages

- **HTML** — a forgiving tokenizer indents nested elements. Void tags
  (`<br>`, `<img>`, …) don't nest, and the contents of `pre`, `textarea`,
  `script`, and `style` are preserved verbatim.
- **CSS** — indents rule blocks and nested at-rules (`@media { … }`),
  normalizes `prop: value;` spacing, and preserves string literals and
  `/* comments */`.
- **JavaScript** — a token-aware pretty-printer re-indents blocks, statements,
  and object literals without changing what the code does.
- **JSON** — parsed and re-serialized. Invalid JSON is reported as an error
  instead of being silently mangled.

## Worked example

Input (minified JSON):

```json
{"name":"gizza","tags":["a","b"],"nested":{"x":1}}
```

Language: `auto` · Indent: `2` spaces

Output:

```json
{
  "name": "gizza",
  "tags": [
    "a",
    "b"
  ],
  "nested": {
    "x": 1
  }
}
```

Switch **Indent character** to `tab` (or raise the space count to 4) to change
the indentation width; switch **Language** to `css`, `html`, or `javascript` to
format those instead.

## Limits and edge cases

- This is a **formatter**, not a linter, minifier, or transpiler — it only
  re-whitespaces the input (JSON is re-serialized).
- Auto-detect is a best-effort heuristic. CSS vs JavaScript can be ambiguous;
  pick the language explicitly if the guess is wrong.
- JSON must be valid — trailing commas, comments, and single quotes are not
  standard JSON and produce an error. HTML, CSS, and JS are formatted
  best-effort even if slightly malformed.
- The contents of HTML `pre`, `textarea`, `script`, and `style` are left
  untouched, so code inside `<script>` is not itself re-indented.
- Comments and string contents are preserved, not reflowed. Long lines are not
  wrapped to a maximum width.
- Spaces-per-level is clamped to 1–8; tabs ignore the spaces setting.

## FAQ

<details>
<summary>Does formatting change what my code does?</summary>

No. For HTML, CSS, and JavaScript only whitespace and line breaks change —
nothing is renamed, reordered, or removed. JSON is parsed and re-serialized with
the original key order preserved, so the data is identical.

</details>

<details>
<summary>What happens if the language auto-detect guesses wrong?</summary>

Set the **Language** field to `html`, `css`, `javascript`, or `json` instead of
`auto`. Auto-detect reliably recognizes HTML (a leading `<`) and valid JSON, but
CSS and JavaScript can look similar, so choose one explicitly when needed.

</details>

<details>
<summary>Can I indent with tabs instead of spaces?</summary>

Yes. Set **Indent character** to `tab` and each nesting level is indented with a
single tab. The spaces-per-level number is ignored in tab mode. For spaces,
choose any width from 1 to 8.

</details>

<details>
<summary>Why did my JSON fail to format?</summary>

The JSON formatter validates the input first, so anything that isn't standard
JSON — trailing commas, `//` comments, single-quoted strings, or unquoted
keys — is reported as an error rather than being guessed at. Fix the reported
issue, or pick a different language if the snippet isn't actually JSON.

</details>

<details>
<summary>Is my code uploaded anywhere?</summary>

No. The formatter runs entirely in your browser via WebAssembly. Your snippet
never leaves your machine and there are no network requests.

</details>

## Related tools

- [HTML Formatter](https://gizza.ai/tools/html-formatter/): Pretty-print and beautify HTML with consistent indentation, in your browser. Handles void elements, comments, and preserves pre/script/style. Nothing is uploaded.
- [JavaScript Beautifier](https://gizza.ai/tools/js-beautify/): Re-indent minified or obfuscated JavaScript into clean, readable source — strings, regex and comments preserved. Free, in your browser; nothing uploaded.
- [JSON Beautifier](https://gizza.ai/tools/json-beautify/): Pretty-print minified or messy JSON with configurable indentation (or minify it), validating it in the process. Runs in your browser; nothing is uploaded.
- [Extract Action Items from Meeting Notes](https://gizza.ai/tools/action-item-extractor/): Extract action items, owners, and decisions from meeting notes or daily notes with deterministic rules. Markdown checklist or JSON, private in-browser.
- [Amazon Order Analyzer](https://gizza.ai/tools/amazon-order-analyzer/): Paste an Amazon order-history CSV export to summarize total spend by month, top items, and category breakdowns. Browser-only, private, with Markdown or JSON output.