Code formatter & minifier. Readable or tiny, locally.
Your code never leaves your browser. Nothing is uploaded.
JSON uses a strict parser. CSS, HTML and JS use conservative formatters that preserve strings, comments and your code, they re-indent and normalize whitespace rather than rewriting syntax.
Formatting, without the toolchain
Sometimes you just need one config file readable or one snippet small, without installing Prettier, spinning up Node, or pasting proprietary code into a stranger's server. This formatter tokenizes your input first, so strings, template literals, regex and comments are never touched; only structure and whitespace change. JSON goes through the browser's strict parser, so errors come back with the exact line and column. Minifying shows the honest before → after byte count and percentage saved. Pick your indent, copy or download, done, no account, nothing uploaded, free forever.
How to use the Code Formatter and Minifier
This tool makes JSON, CSS, HTML and JavaScript either readable or small. JSON goes through the browser's own strict parser. CSS and JavaScript are first split into strings, comments and code so the insides of strings are left alone, HTML is split into tags and text, and then the indentation and whitespace are rebuilt. It is for developers and site owners who need one file tidied or shrunk without installing anything.
Step by step
-
Pick the language
Press JSON, CSS, HTML or JavaScript at the top. JSON is selected first. If the Input box already holds code, switching language formats it again with the new rules. If the last run ended in an error, switching only clears the Output panel, so press Beautify again.
-
Add your code
Paste code into Input, or press Load sample to try an example in the current language. The label above the box shows the line count and size. Inside the box the Tab key inserts two spaces instead of moving to the next control.
-
Choose the indent
Open the indent menu and pick 2 spaces, 4 spaces or Tab. The default is 2 spaces. Changing it formats the input again straight away.
-
Beautify or Minify
Press Beautify for readable, indented code, or Minify to strip comments and extra whitespace. Both work on what is in Input, not on what is in Output, and the result replaces the Output panel.
-
Copy or download
Press Copy to put the output on your clipboard, or Download to save it as formatted.json, formatted.css, formatted.html or formatted.js to match the language. Press Clear to empty both panels.
Reading the result
- After Beautify the status line above Output shows a tick, the word Beautified and the size of the result, for example 172 B for the JSON sample.
- After Minify it shows the size before and after and the share saved. Paste the 172 B beautified sample into Input and press Minify, and it reads 172 B → 114 B (34% smaller).
- Sizes are counted in bytes as UTF-8, and 1 KB is 1,024 bytes.
- A red border means the input could not be formatted. For JSON the panel shows the parser's message, and when the browser reports a position it adds the line and column, which the status line repeats after the word Error.
Tips and common mistakes
- JSON mode is strict. Trailing commas, single quoted strings, comments and unquoted keys all fail, so fix the first error shown and run it again.
- JSON is parsed and written back out, so a key that appears twice keeps only its last value, and whole numbers longer than about 16 digits lose precision.
- Changing the indent or the language runs Beautify again. If you wanted the small version, press Minify once more.
- CSS Minify removes the spaces around plus signs, which breaks a calc() expression such as 100% + 10px. Check calc() after minifying.
- HTML Minify joins the lines inside script, style and pre blocks, so preformatted text and scripts that rely on line breaks instead of semicolons can break. HTML Beautify also puts every tag on its own line and escapes the text again, so apostrophes become ' and an existing & becomes &. Check text with entities after beautifying.
- Minify only removes comments and whitespace. It does not shorten variable names or remove unused code the way a build tool does.
Privacy and limits
Everything runs in your own browser. Your code is not uploaded and not saved, so reloading the page clears both panels. Download creates the file on your device.
Four languages, both directions.
- Beautify JSON with strict parsing and clear error messages showing the exact line and column.
- Format CSS into readable, properly indented blocks while preserving strings and comments.
- Prettify HTML with consistent indentation and correct handling of void tags and raw blocks (
script,style,pre,textarea). - Format JavaScript conservatively, strings, template literals, regex literals and comments are tokenized first and never altered.
- Minify any supported language and see the exact byte savings and percentage reduction in the status line.
- Choose your indent style, 2 spaces, 4 spaces or tabs, then copy or download the result instantly.
Frequently asked questions.
Is the Code Formatter free?
Is it private? Is my code uploaded anywhere?
Will it change how my code behaves?
Why does my JSON fail to format?
How much smaller does minifying make my files?
Does it work offline?
Published · Last updated .
