Free · Instant · No sign-up

Online Code Formatter
& Beautifier

Paste your messy code and get it formatted instantly. Supports HTML, CSS, JavaScript, JSON, SQL, and XML.

Input (JSON)
Output (Formatted)

      

    

    

      Input: 0 chars
      Output: 0 chars
      Lines: 0
      Ready
    

  


  

    

      

      
Multi-Language Support

      
Formats JSON, JavaScript, HTML, CSS, SQL, and XML with language-specific rules and best practices.

    

    

      

      
Private & Secure

      
All formatting happens in your browser. Your code is never sent to any server. 100% private.

    

    

      

      
Instant Results

      
No waiting, no loading, no sign-ups. Paste your code and format it in milliseconds.

    

  


  

    
Code Formatter FAQs

    
Common questions about code formatting and beautification.

    

      
      
Code formatting (also called beautifying or pretty-printing) converts compressed, minified, or poorly indented code into a human-readable format with consistent indentation, line breaks, and spacing. This makes it easier to read, debug, and maintain code. It's especially useful for minified JavaScript/CSS files or API responses in JSON format.

    

    

      
      
No. All formatting operations happen entirely in your browser using JavaScript. Your code never leaves your device. This makes it safe to format sensitive code like API keys, configuration files, or proprietary algorithms.

    

    

      
      
Common JSON errors include: trailing commas (not allowed in JSON), single quotes instead of double quotes for strings, unquoted property names, and comments (JSON doesn't support comments). The error message will show you where in your code the problem occurred. Make sure all strings use double quotes and objects/arrays are properly closed.

    

    

      
      
It's a style preference. 2 spaces is preferred in JavaScript/TypeScript communities (ESLint default, Google Style Guide) and keeps code more compact. 4 spaces is common in Python (PEP 8) and C-family languages. Tabs are preferred by some because they allow each developer to set their own display width. Use whichever matches your team's style guide.

    

  





Copied to clipboard!


    Test    

Hello World
This is a paragraph with a link.
    ',
    css: 'body{margin:0;padding:0;font-family:Arial,sans-serif;background:#f5f5f5;}.container{max-width:1200px;margin:0 auto;padding:0 20px;}.header{background:#333;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;}',
    sql: 'SELECT u.id,u.name,u.email,o.order_date,p.product_name,oi.quantity,oi.price FROM users u INNER JOIN orders o ON u.id=o.user_id INNER JOIN order_items oi ON o.id=oi.order_id INNER JOIN products p ON oi.product_id=p.id WHERE o.order_date>=\'2024-01-01\' AND u.active=1 ORDER BY o.order_date DESC LIMIT 100;',
    xml: 'John Doe30
123 Main StNew York
ReadingCoding'
  };

  function setLang(lang, btn) {
    currentLang = lang;
    document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const names = {json:'JSON',js:'JavaScript',html:'HTML',css:'CSS',sql:'SQL',xml:'XML'};
    document.getElementById('input-label').textContent = `Input (${names[lang]})`;
    document.getElementById('input-code').placeholder = `Paste your ${names[lang]} code here...`;
    document.getElementById('input-code').value = '';
    document.getElementById('output-code').textContent = '';
    updateStatus(0, 0, 0, 'Ready');
  }

  function getIndent() {
    const v = document.getElementById('indent-size').value;
    return v === 'tab' ? '\t' : ' '.repeat(parseInt(v));
  }

  function format() {
    const code = document.getElementById('input-code').value.trim();
    if (!code) { document.getElementById('input-code').value = samples[currentLang]; format(); return; }
    let result = '';
    let statusMsg = '';
    try {
      if (currentLang === 'json') result = formatJSON(code);
      else if (currentLang === 'js') result = formatJS(code);
      else if (currentLang === 'html') result = formatHTML(code);
      else if (currentLang === 'css') result = formatCSS(code);
      else if (currentLang === 'sql') result = formatSQL(code);
      else if (currentLang === 'xml') result = formatXML(code);
      statusMsg = '✅ Formatted successfully';
    } catch(e) {
      result = '⚠ Error: ' + e.message;
      statusMsg = '❌ Parse error';
    }
    document.getElementById('output-code').textContent = result;
    updateStatus(code.length, result.length, result.split('\n').length, statusMsg);
  }

  function formatJSON(code) {
    const obj = JSON.parse(code);
    const indent = getIndent();
    return JSON.stringify(obj, null, indent);
  }

  function formatJS(code) {
    const indent = getIndent();
    let result = '', depth = 0, i = 0, inString = false, strChar = '';
    const lines = [];
    let currentLine = '';
    while (i < code.length) {
      const ch = code[i];
      if (inString) {
        currentLine += ch;
        if (ch === strChar && code[i-1] !== '\\') inString = false;
        i++; continue;
      }
      if (ch === '"' || ch === "'" || ch === '`') { inString = true; strChar = ch; currentLine += ch; i++; continue; }
      if (ch === '{' || ch === '[') {
        depth++;
        lines.push(currentLine.trim() + ch);
        currentLine = indent.repeat(depth);
        i++; while (code[i] === ' ' || code[i] === '\n' || code[i] === '\r') i++;
      } else if (ch === '}' || ch === ']') {
        if (currentLine.trim()) lines.push(currentLine.trim());
        depth = Math.max(0, depth - 1);
        currentLine = indent.repeat(depth) + ch;
        i++;
        if (code[i] === ';') { currentLine += ';'; i++; }
        lines.push(currentLine.trim());
        currentLine = indent.repeat(depth);
      } else if (ch === ';') {
        currentLine += ch;
        lines.push(currentLine.trim());
        currentLine = indent.repeat(depth);
        i++;
      } else if (ch === '\n' || ch === '\r') {
        if (currentLine.trim()) lines.push(currentLine.trim());
        currentLine = indent.repeat(depth);
        i++; while (code[i] === ' ' || code[i] === '\n' || code[i] === '\r') i++;
      } else {
        currentLine += ch; i++;
      }
    }
    if (currentLine.trim()) lines.push(currentLine.trim());
    // Re-indent properly
    return lines.filter(l=>l).map(l => indent.repeat(depth < 0 ? 0 : 0) + l).join('\n');
  }

  function formatHTML(code) {
    const indent = getIndent();
    const voids = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);
    let result = '', depth = 0;
    const tokens = code.split(/(<[^>]+>)/g);
    tokens.forEach(token => {
      token = token.trim();
      if (!token) return;
      if (token.startsWith('')) {
        const tag = (token.match(/<(\w+)/) || [])[1] || '';
        result += indent.repeat(depth) + token + '\n';
        if (!voids.has(tag.toLowerCase())) depth++;
      } else {
        result += indent.repeat(depth) + token + '\n';
      }
    });
    return result.trim();
  }

  function formatCSS(code) {
    const indent = getIndent();
    let result = '';
    const cleaned = code.replace(/\s+/g,' ').trim();
    let i = 0, depth = 0;
    while (i < cleaned.length) {
      const ch = cleaned[i];
      if (ch === '{') {
        result += ' {\n'; depth++;
        i++; while (cleaned[i]===' ') i++;
      } else if (ch === '}') {
        depth = Math.max(0,depth-1);
        result += '\n' + indent.repeat(depth) + '}\n\n';
        i++; while (cleaned[i]===' ') i++;
      } else if (ch === ';') {
        result += ';\n' + indent.repeat(depth);
        i++; while (cleaned[i]===' ') i++;
      } else {
        if (depth > 0 && result.endsWith('{\n')) result += indent.repeat(depth);
        result += ch; i++;
      }
    }
    return result.trim().replace(/\n{3,}/g,'\n\n');
  }

  function formatSQL(code) {
    const kws = ['SELECT','FROM','WHERE','JOIN','LEFT JOIN','RIGHT JOIN','INNER JOIN','OUTER JOIN','ON','GROUP BY','ORDER BY','HAVING','LIMIT','OFFSET','INSERT INTO','VALUES','UPDATE','SET','DELETE FROM','CREATE TABLE','ALTER TABLE','DROP TABLE','UNION','AND','OR','NOT','AS','DISTINCT','COUNT','SUM','AVG','MIN','MAX'];
    let result = code.replace(/\s+/g,' ').trim();
    kws.sort((a,b)=>b.length-a.length).forEach(kw => {
      const re = new RegExp('\\b'+kw.replace(' ','\\s+')+'\\b','gi');
      result = result.replace(re, '\n'+kw+' ');
    });
    return result.trim().replace(/^\n+/,'');
  }

  function formatXML(code) {
    const indent = getIndent();
    let result = '', depth = 0;
    const tokens = code.split(/(<[^>]+>)/g);
    tokens.forEach(token => {
      token = token.trim();
      if (!token) return;
      if (token.startsWith('') && !token.startsWith(' showToast()).catch(() => { const el=document.getElementById('output-code'); const r=document.createRange(); r.selectNode(el); window.getSelection().removeAllRanges(); window.getSelection().addRange(r); document.execCommand('copy'); showToast(); });
  }

  function showToast() {
    const t = document.getElementById('toast');
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 2500);
  }

  function toggleFaq(btn) { btn.classList.toggle('open'); btn.nextElementSibling.classList.toggle('open'); }
  document.getElementById('input-code').addEventListener('input', () => {
    const v = document.getElementById('input-code').value;
    updateStatus(v.length, 0, 0, 'Ready');
  });