Home / Tools / Dev Tools / Code Beautifier

✨

Code Beautifier & Formatter

Beautify, format, and indent messy code instantly. Supports JavaScript, HTML, CSS, JSON, XML, SQL and more. Minify or prettify — 100% browser-based and free.

🖥️ Choose Language

🔒 100% Private — All processing in your browser. No code uploaded to any server.

Popular⚡JavaScriptJS / ES6+ / TypeScript

🌐HTMLHTML / XML markup

🎨CSSCSS / SCSS styles

Fast📦JSONJSON data format

📄XMLXML documents

🗄️SQLSQL queries

✏️ Code Editor

📂 Drop or click to upload code file (.js .html .css .json .xml .sql .ts .jsx .py)

📝 Input JavaScript

✨ Output Beautified

Language

Input Size

0 B

Output Size

0 B

Lines

Change

⚙️ Formatting

Braces on new line (Allman style)

Ensure semicolons (JS)

Add trailing commas

🎯 Whitespace

Trim trailing whitespace

Remove extra empty lines

Add final newline

🔧 Advanced

Auto-detect language

Wrap long lines (80 chars)

Sort JSON keys alphabetically

⚡ Key Features

⚡

Instant Formatting

Beautify messy code in milliseconds with one click.

🖥️

6+ Languages

JS, HTML, CSS, JSON, XML, SQL — all supported.

📦

Minify Too

Compress code for production — remove whitespace.

🔒

100% Private

Code never leaves your browser. Zero server uploads.

⚙️

Custom Options

Indent style, braces, semicolons, trailing commas.

📂

File Upload

Drag & drop any code file to beautify instantly.

🔤

Auto-Detect

Automatically detects language from your code.

⬇️

Download

Download beautified or minified code as a file.

🔄

Undo / Swap

Undo last action or swap input/output panels.

💡 How It Works

1️⃣

Choose Language

JS, HTML, CSS, JSON…

2️⃣

Paste Code

Or upload a file

3️⃣

Beautify / Minify

One click formatting

4️⃣

Copy / Download

Get your clean code

🖥️ Supported Languages

⚡

JavaScript

JS / ES6+ / TS / JSX

🌐

HTML

HTML5 / XHTML

🎨

CSS

CSS3 / SCSS / LESS

📦

JSON

JSON / JSONC

📄

XML

XML / SVG / RSS

🗄️

SQL

MySQL / PostgreSQL

🐍

Python

Coming Soon

☕

Java

Coming Soon

❓ Frequently Asked Questions

🔗 Related Tools

📦

' }, css:{ lang:"css", code:'*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Segoe UI",sans-serif;background:#f5f6fa;color:#1a1a2e;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background:linear-gradient(135deg,#8b5cf6,#7c3aed);padding:60px 20px;text-align:center;color:#fff}.header h1{font-size:36px;font-weight:900;margin-bottom:12px}.header p{font-size:16px;opacity:.85;max-width:600px;margin:0 auto}.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.08);border:1px solid #e0e0ef;margin-bottom:20px;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.12)}.btn{display:inline-block;padding:12px 28px;background:#8b5cf6;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}.btn:hover{background:#7c3aed;transform:translateY(-2px)}@media(max-width:768px){.header{padding:30px 16px}.header h1{font-size:24px}.card{padding:16px}}' }, json:{ lang:"json", code:'{"name":"John Doe","age":30,"email":"john@example.com","active":true,"address":{"street":"123 Main St","city":"New York","state":"NY","zip":"10001","country":"USA"},"phones":[{"type":"home","number":"555-1234"},{"type":"work","number":"555-5678"},{"type":"mobile","number":"555-9012"}],"skills":["JavaScript","Python","React","Node.js","SQL","Docker"],"experience":[{"company":"Tech Corp","role":"Senior Developer","years":5,"current":true},{"company":"Startup Inc","role":"Junior Developer","years":2,"current":false}],"settings":{"theme":"dark","notifications":true,"language":"en","timezone":"America/New_York"}}' }, xml:{ lang:"xml", code:'John SmithThe Great AdventureFiction29.992024-01-15An epic tale of adventure and discovery across unknown lands.AliceAmazing book!BobVery good read.Jane DoeLearning XMLTechnical39.992024-03-20A comprehensive guide to XML for beginners and experts.CharlieBest XML book ever!Mike WilsonData Science BasicsTechnical45.002024-06-10Introduction to data science concepts and tools.' }, sql:{ lang:"sql", code:'SELECT u.id, u.name, u.email, o.order_id, o.total_amount, o.status, p.product_name, p.price, oi.quantity FROM users u INNER JOIN orders o ON u.id = o.user_id INNER JOIN order_items oi ON o.order_id = oi.order_id INNER JOIN products p ON oi.product_id = p.id WHERE u.active = 1 AND o.created_at >= "2024-01-01" AND o.total_amount > 100 AND o.status IN ("completed", "shipped", "processing") AND p.category NOT IN ("archived", "deleted") GROUP BY u.id, o.order_id HAVING COUNT(oi.id) > 2 ORDER BY o.total_amount DESC, u.name ASC LIMIT 50 OFFSET 0; INSERT INTO audit_log (user_id, action, timestamp, details) VALUES (1, "login", NOW(), "User logged in from IP 192.168.1.1"); UPDATE users SET last_login = NOW(), login_count = login_count + 1 WHERE id = 1; CREATE TABLE IF NOT EXISTS user_preferences (id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, preference_key VARCHAR(100) NOT NULL, preference_value TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE);' } }; if(samples[type]){ setLangSilent(samples[type].lang); document.getElementById("codeInput").value=samples[type].code; updateStats(); MSG("📄 Loaded "+type+" sample!"); } } /* ===== FAQ ===== */ var faqs=[ ["What is a Code Beautifier?","A Code Beautifier (also called Code Formatter or Pretty Printer) takes messy, minified, or poorly formatted code and transforms it into clean, readable, and properly indented code. It adds proper line breaks, indentation, and spacing while preserving the code's functionality. It's essential for code readability and maintenance."], ["What languages are supported?","Currently we support JavaScript (including ES6+, TypeScript, JSX), HTML (HTML5, XHTML), CSS (CSS3, SCSS, LESS), JSON, XML (including SVG, RSS), and SQL (MySQL, PostgreSQL). Python and Java support are coming soon. The tool can auto-detect the language from your code."], ["What's the difference between Beautify and Minify?","Beautify makes code readable by adding indentation, line breaks, and proper spacing. Minify does the opposite — it removes all unnecessary whitespace, comments, and line breaks to reduce file size. Beautify is for development/reading, minify is for production/deployment."], ["Can I customize the formatting style?","Yes! You can choose between spaces or tabs for indentation, select indent size (2, 4, or 8), control brace placement style (same line or new line/Allman), add/remove semicolons, handle trailing commas, trim whitespace, remove empty lines, and more."], ["Does it validate my code?","The JSON beautifier validates your JSON and will show an error if the JSON is invalid. For other languages, the tool formats whatever you provide but doesn't perform full syntax validation. Invalid code may not format perfectly."], ["Is my code private and secure?","100% yes! All code processing happens entirely in your browser using JavaScript. No code is ever sent to any server, stored anywhere, or logged in any way. When you close the page, all data is gone. This is completely client-side."], ["Can I upload code files?","Yes! You can drag and drop files directly onto the editor, or use the file upload button. Supported file types include .js, .ts, .jsx, .html, .css, .scss, .json, .xml, .sql, .py, .java, .md, .txt, .yaml, and many more text-based formats."], ["What keyboard shortcuts are available?","Ctrl+Enter to beautify, Ctrl+Shift+M to minify, Ctrl+Shift+C to copy output, and Tab to insert indentation in the editor. You can also drag and drop files directly onto the input area."] ]; var fqH=""; for(var i=0;i▼

'+faqs[i][1]+'

'; } document.getElementById("fz").innerHTML=fqH; /* ===== MOBILE MENU ===== */ document.getElementById("hmBtn").addEventListener("click",function(){ document.getElementById("mobMenu").classList.toggle("open"); }); /* ===== SCROLL TO TOP ===== */ window.addEventListener("scroll",function(){ var b=document.getElementById("tp"); if(window.scrollY>400)b.classList.add("sh"); else b.classList.remove("sh"); }); /* ===== GLOBAL KEYBOARD ===== */ document.addEventListener("keydown",function(e){ if(e.ctrlKey&&e.key==="Enter"&&document.activeElement.id!=="codeInput"){e.preventDefault();doBeautify()} }); /* ===== DROP ZONE FILE ===== */ var dzEl=document.querySelector(".drop-mini"); dzEl.addEventListener("dragover",function(e){e.preventDefault();dzEl.style.background="#ede9fe";dzEl.style.borderColor="#8b5cf6"}); dzEl.addEventListener("dragleave",function(){dzEl.style.background="#faf5ff";dzEl.style.borderColor="#c4b5fd"}); dzEl.addEventListener("drop",function(e){ e.preventDefault(); dzEl.style.background="#faf5ff";dzEl.style.borderColor="#c4b5fd"; var file=e.dataTransfer.files[0]; if(file){ var reader=new FileReader(); reader.onload=function(ev){ document.getElementById("codeInput").value=ev.target.result; autoDetect(ev.target.result); var ext=file.name.split(".").pop().toLowerCase(); var extMap={js:"js",jsx:"js",ts:"js",tsx:"js",html:"html",htm:"html",css:"css",scss:"css",less:"css",json:"json",xml:"xml",svg:"xml",sql:"sql"}; if(extMap[ext])setLangSilent(extMap[ext]); updateStats(); MSG("📂 Loaded: "+file.name); }; reader.readAsText(file); } }); /* ===== INIT ===== */ updateStats();