Code comes in two shapes. One is written for people: indented, spaced out and easy to scan. The other is written for machines: squeezed into as few characters as possible so it loads quickly. This tool moves your code between the two. Paste in a messy block and tidy it up, or paste in readable code and shrink it for your site. It works with JSON, CSS and HTML.
Choose the language: JSON, CSS or HTML.
Paste your code into the input box.
Click Format to make it readable, or Minify to make it as small as possible.
Check the result, then copy it into your project.
For formatting, you can pick how far to indent: two spaces, four spaces or a tab.
Formatting (also called beautifying or pretty-printing) adds line breaks and indentation so the structure is clear at a glance. It’s what you want when you’re reading, debugging or reviewing code, and it’s the first thing to try when someone hands you a wall of text.
Minifying does the opposite. It strips out whitespace, line breaks and comments that the computer doesn’t need. The code behaves the same way, but the file is smaller, so it downloads faster.
JSON
Here’s a response from an API, squashed onto one line:
json
{"name":"Sara","age":28,"skills":["css","js"],"address":{"city":"Tetouan","country":"Morocco"}}
After formatting with a two-space indent:
json
{
"name": "Sara",
"age": 28,
"skills": [
"css",
"js"
],
"address": {
"city": "Tetouan",
"country": "Morocco"
}
}
Minifying the formatted version gets you back to the single line.
CSS
Before:
css
body{margin:0;padding:0}.btn{color:#fff;background:#3498db}
After formatting:
css
body {
margin: 0;
padding: 0;
}
.btn {
color: #fff;
background: #3498db;
}
HTML
Before:
html
<ul><li>One</li><li>Two</li></ul>
After formatting:
html
<ul>
<li>One</li>
<li>Two</li>
</ul>
Smaller files mean quicker pages. Every character in a stylesheet or script has to be downloaded before the browser can use it, and on slower connections that adds up. Minifying removes the spaces and comments that don’t change how the code works.
How much you save depends on how the original was written. Heavily commented, widely spaced code shrinks the most. Keep in mind that web servers usually also compress files in transit (with gzip or Brotli), which reduces the extra benefit of minifying a little. The two work well together, though, and for production sites it’s still standard practice.
JSON is strict. A single misplaced character makes the whole thing invalid, and the error messages in many programs aren’t much help. Pasting your JSON in and clicking Format is a quick way to find out whether it’s valid. If it isn’t, the most common causes are:
A trailing comma after the last item, as in {"name": "Sara", "age": 28,}
Single quotes instead of double quotes. JSON only accepts double quotes.
Unquoted keys. In JSON, {name: "Sara"} is invalid, while {"name": "Sara"} is correct.
Comments. JSON doesn’t allow // or /* */ comments, even though they work in many other formats.
A missing comma between two items, or a missing closing bracket or brace.
Unescaped special characters inside strings, such as a raw line break or a stray double quote.
Formatting HTML is generally safe, but minifying it needs care.
Whitespace can matter. Browsers treat a space between two inline elements, such as two links or two <span> tags, as a visible gap. Removing or adding it can change how the page looks.
Preformatted text. Whitespace inside <pre> and <textarea> is displayed as written, so it must stay.
Inline scripts and styles. If your HTML contains <script> or <style> blocks, check them after minifying. A script with line breaks that depend on automatic semicolon insertion can break if it’s squashed carelessly.
Always preview the page after minifying HTML.
Keep the readable version. Minified code is nearly impossible to maintain. Store the original and generate the minified file from it.
Use a build tool for real projects. Bundlers and build pipelines can minify automatically and produce source maps, which let you debug minified code as if it were the original.
Don’t paste secrets. Even if a tool runs in your browser, it’s a good rule never to paste passwords, API keys, tokens or private customer data into any online tool.
Test after minifying. Run the page or the app and make sure nothing changed.
Be consistent. Pick one indentation style for a project and stick to it.
Does formatting change what my code does?
For JSON and CSS, no. It only changes the layout. For HTML, it usually doesn’t, but spacing between inline elements can sometimes affect how the page renders, so check the result.
Is minified code safe to use in production?
Yes, that’s what it’s for. Just keep your original files, so you can edit them later.
Will minifying break my JSON?
No. Minified JSON contains exactly the same data. The only change is that the extra whitespace is gone.
Can I format JSON that contains comments?
Standard JSON doesn’t allow comments, so the tool will report an error. Remove the comments first, or use a format that supports them if you need them, such as JSON5.
Why does my formatted CSS look different from my original?
The formatter applies its own consistent layout: one declaration per line and a set indentation. The rules themselves are unchanged.
Does it work with very large files?
It handles typical files with no trouble. Very large ones, several megabytes or more, can slow the page down because the work is done in your browser.
Are very large numbers in JSON handled correctly?
Tools that run in the browser usually rely on JavaScript, which can only represent whole numbers exactly up to 9,007,199,254,740,991. If your data contains longer integers, such as some IDs, double-check them after formatting, or keep those values as strings.
Is my code sent anywhere?
Your code is processed in your browser and isn’t sent to our servers. Even so, avoid pasting anything confidential.
This tool is provided for convenience. Always check the output and test it in your own environment before using it in a live project.