JS/CSS Formatter
FreeReformats minified or inconsistently indented JavaScript or CSS into readable, properly indented code, with adjustable indent style and before/after size stats.
Runs entirely in your browser. Your code is never uploaded anywhere.
What this tool does
Paste minified or messily indented JavaScript or CSS, choose an indentation style, and this tool reformats it into readable code with consistent indentation and line breaks.
How It Works
The tool parses your code into tokens (keywords, brackets, operators, strings), then re-prints those tokens with new line breaks and indentation based on nesting depth, using the open-source js-beautify engine for JavaScript and CSS respectively. The underlying tokens and their order are never changed, only the whitespace around them.
Problems it solves
- Making a single-line minified JS or CSS file readable again for debugging or review.
- Normalizing inconsistent indentation (mixed tabs and spaces, inconsistent widths) across a file.
- Quickly inspecting third-party or vendor code that ships minified.
- Converting between 2-space, 4-space, and tab indentation to match a project style guide.
Frequently asked questions
›Does this tool also minify code?
No, this tool only formats (beautifies) code by adding proper indentation and line breaks. If you need to shrink code size by removing whitespace, use a dedicated minifier tool instead.
›Will formatting change how my code behaves?
No. Formatting only changes whitespace, indentation, and line breaks. It never changes identifiers, logic, or string contents, so the formatted code behaves identically to the original.
›Why does my JavaScript look wrong after formatting?
If the input has a syntax error (an unclosed bracket, a stray comma, invalid JSON used as JS, and so on), the formatter may misread the structure. Check the browser console or a JavaScript linter for the exact syntax issue, fix it, and format again.
›Can I format SCSS or LESS with this?
Basic SCSS and LESS syntax (nesting, variables, comments) generally formats fine since it is still CSS-like, but preprocessor-specific features such as mixins or functions are not specifically understood and may be reformatted imperfectly.
›Why choose tabs vs. spaces for indentation?
It is purely a style preference, both are functionally identical in JavaScript and CSS. Pick whichever matches your project's existing style guide or editor configuration.
Related Tools
Text
Backronym Generator
Turn any acronym or word into a backronym across 6 tones and 5 sentence patterns, with custom words per letter and Memorability/Pronounceability scoring.
FreeText
Bandwidth Calculator
Convert between data units, estimate file transfer time, size website bandwidth from traffic, and convert between a monthly data allowance and a sustained connection speed.
FreeText
Bar Graph Maker
Turn simple label,value data into a customizable bar chart with 8 color themes, orientation, sorting, negative-value support, instant stats, and SVG/PNG export.
FreeText
Base64 Encode/Decode
Encode text to base64 or decode base64 back to text, live as you type, with full Unicode support and an optional URL-safe variant.
FreeText
Number Base Converter
Convert a number between binary, octal, decimal, hexadecimal, BCD, Gray Code, and any custom base from 2 to 36, all at once from a single input.
FreeText
Bcrypt Hash Generator Checker
Generate and verify bcrypt password hashes entirely in your browser using WebAssembly, with an adjustable cost factor and salt.
FreeText
Bionic Reading Converter
Convert any text into bionic reading format by bolding the first portion of each word to help you read faster and focus better.
FreeText
Blake2b Hash Generator
Compute the BLAKE2b hash of text or a file in your browser, with adjustable output length and optional keyed hashing (MAC).
Comments (0)
Found this tool useful? Leave a comment, share a tip, or tell us how we can make it better.
No comments yet. Be the first to share your thoughts!