JS/CSS Formatter
JS/CSS Formatter — runs in your browser. Inputs are not stored.
Basic JS / CSS indent
Simple brace-based indentation. Not a Prettier-level parser.
How to use
- Under mode, choose JavaScript or CSS.
- Put one-line or broken-indent code in source.
- Press Format to get a result with lines split on braces and semicolons.
- If needed, take it with Copy result.
- Reset clears input/output and restores mode to JavaScript.
Key concepts
The JS/CSS formatter is not a language parser like Prettier. It only counts brace depth and adds two-space indent. A semicolon starts a new line; a closing brace lines up one level out. JavaScript and stylesheet modes are labeled separately on screen but share the same indent rules. It helps unfold a minified one-liner for humans. Empty lines are reduced and only content lines are reattached at depth, which suits unfolding a packed draft for review.
Braces inside strings or template literals can be mistaken for structure, so complex syntax is more stable in a dedicated formatter. This JS/CSS formatter does not build an AST, so it does not apply import sort, quote style, or trailing-comma rules. It runs only in the browser and does not upload source. It fits best as a helper step to unfold a snippet you minified, then review. Format output fills only the read-only field, so you can keep the original and compare side by side.
Example
Put .box{color:red;margin:0} in source, CSS mode, and Format: declarations indent two spaces on the line after the opening brace, and the closing brace matches the original depth. In JavaScript mode, function a(){return 1;} indents inside the braces the same way. Copy result takes the cleaned code immediately.
Related: JS/CSS minifier · HTML formatter · SQL formatter
Frequently asked questions
Is the JS/CSS formatter the same as Prettier?
No. It only indents by brace and semicolon positions. There are no plugin rules or per-language parsers.
Do JavaScript and CSS use different algorithms in the JS/CSS formatter?
Only the on-screen mode differs; indent logic is the same. Selectors and functions both count brace depth the same way.
Does the JS/CSS formatter unfold one-line minified code?
If there are braces and semicolons, lines split. Short expressions without semicolons may stay on one line.
Can braces inside strings break JS/CSS formatter indent?
Yes. It counts braces character by character, so symbols inside template strings can be treated as structure.
Is JS/CSS formatter source saved on a server?
No. Format and copy run only in the browser. Reset clears the fields.
What happens to mode after JS/CSS formatter Reset?
The JavaScript radio is selected again and source and result text are both cleared.
Last reviewed: 2026-09-04