usemagictools.github.io/code-formatter.html at main · usemagictools/usemagictools.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CT8E5N460D"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-CT8E5N460D');</script>
  <title>Code Formatter - Free JSON/SQL/JS Beautifier | No Ads</title>
  <meta name="description" content="Free online code formatter and beautifier for JSON, JavaScript, TypeScript, HTML, CSS, Markdown, and SQL. ✅ No ads ✅ No signup ✅ No limits.">
  <meta name="keywords" content="code formatter, json beautifier, sql formatter, javascript formatter, no ads, no signup, no login, no watermark, free unlimited, browser-based, no installation, local processing">
  <meta name="author" content="UseMagicTools"><meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><meta name="googlebot" content="index, follow"><meta name="bingbot" content="index, follow"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><meta name="distribution" content="global"><meta name="language" content="en">
  <link rel="canonical" href="https://www.usemagictools.com/code-formatter.html"><link rel="alternate" hreflang="en" href="https://www.usemagictools.com/code-formatter.html"><link rel="alternate" hreflang="zh-CN" href="https://www.usemagictools.com/code-formatter.html"><link rel="alternate" hreflang="fr" href="https://www.usemagictools.com/code-formatter.html"><link rel="alternate" hreflang="es" href="https://www.usemagictools.com/code-formatter.html"><link rel="alternate" hreflang="x-default" href="https://www.usemagictools.com/code-formatter.html">
  <meta property="og:type" content="website"><meta property="og:url" content="https://www.usemagictools.com/code-formatter.html"><meta property="og:title" content="Code Formatter - Free JSON/SQL/JS Beautifier | No Ads"><meta property="og:description" content="Beautify and format source code in browser."><meta property="og:image" content="https://www.usemagictools.com/screenshots/code-formatter-v1.webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="zh_CN"><meta property="og:site_name" content="Magic Toolbox">
  <meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@usemagictools"><meta name="twitter:creator" content="@usemagictools"><meta name="twitter:title" content="Code Formatter - Free JSON/SQL/JS Beautifier | No Ads"><meta name="twitter:description" content="Format JSON, SQL, JS, HTML, CSS, and Markdown online."><meta name="twitter:image" content="https://www.usemagictools.com/screenshots/code-formatter-v1.webp">

  <script src="https://unpkg.com/prettier@2.8.8/standalone.js"></script>
  <script src="https://unpkg.com/prettier@2.8.8/parser-babel.js"></script>
  <script src="https://unpkg.com/prettier@2.8.8/parser-html.js"></script>
  <script src="https://unpkg.com/prettier@2.8.8/parser-postcss.js"></script>
  <script src="https://unpkg.com/prettier@2.8.8/parser-markdown.js"></script>
  <script src="https://unpkg.com/prettier@2.8.8/parser-typescript.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sql-formatter@15.4.0/dist/sql-formatter.min.js"></script>

  <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Code Formatter","alternateName":["代码格式化器","JSON Beautifier","SQL Formatter"],"url":"https://www.usemagictools.com/code-formatter.html","description":"Free online code formatter for JSON, SQL, JS, HTML, CSS, and Markdown.","inLanguage":["en","zh-CN","fr","es"],"applicationCategory":"DeveloperApplication","operatingSystem":"Web Browser","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"author":{"@type":"Person","name":"UseMagicTools"},"publisher":{"@type":"Organization","name":"Web Toolbox","url":"https://www.usemagictools.com/"},"featureList":["JSON beautifier","SQL formatter","JS TS HTML CSS Markdown formatting","Copy output quickly","No ads","No signup required","No watermark","100% browser-based","Unlimited usage"],"screenshot":"https://www.usemagictools.com/screenshots/code-formatter-v1.webp"}</script>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.usemagictools.com/"},{"@type":"ListItem","position":2,"name":"Code Formatter","item":"https://www.usemagictools.com/code-formatter.html"}]}</script>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"HowTo","name":"How to Format Code Online","totalTime":"PT1M","step":[{"@type":"HowToStep","position":1,"name":"Choose language","text":"Select JSON, SQL, JS, TS, HTML, CSS, or Markdown."},{"@type":"HowToStep","position":2,"name":"Paste source code","text":"Paste raw code into the input editor panel."},{"@type":"HowToStep","position":3,"name":"Format and copy","text":"Click Format and copy beautified output for your project."}]}</script>
  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is a code formatter and why should I use it?","acceptedAnswer":{"@type":"Answer","text":"A code formatter automatically rewrites source code into a consistent style with proper indentation, spacing, and line breaks. It improves readability, reduces code review noise, and helps teams maintain uniform coding standards. This free online formatter works directly in your browser with no signup, no ads, and no data upload — your code stays completely private on your device."}},{"@type":"Question","name":"Which formats are supported in this online formatter?","acceptedAnswer":{"@type":"Answer","text":"This free code formatter supports JSON, JavaScript, TypeScript, HTML, CSS, Markdown, and SQL. You can switch between language modes and format your code instantly in the browser. Each language uses dedicated parsing rules for accurate beautification. No signup or installation required — just paste your code, select the language, and click format for clean output."}},{"@type":"Question","name":"Does it validate JSON and SQL syntax?","acceptedAnswer":{"@type":"Answer","text":"Yes, the formatter performs parser-based analysis before beautifying. If the input contains syntax errors — such as missing brackets in JSON or invalid SQL keywords — the tool returns a descriptive error message to help you locate and fix the issue. This validation feature is free to use, runs in your browser, and requires no signup or server upload."}},{"@type":"Question","name":"Can I use this as a Postman or IDE quick helper?","acceptedAnswer":{"@type":"Answer","text":"Yes. This free tool is perfect for quick formatting tasks during API debugging with Postman, SQL query cleanup, and copy-paste workflows when a full IDE is not available. Simply paste unformatted code, select the language, and get clean output instantly. No signup, no ads, and everything runs privately in your browser without uploading any data."}},{"@type":"Question","name":"Is this tool really free with no ads?","acceptedAnswer":{"@type":"Answer","text":"Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server."}}]}</script>

  <style>
    :root{--bg:#020617;--panel:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--border:rgba(148,163,184,.24);--pri:#a855f7;--pri2:#7c3aed;--radius:14px}*{box-sizing:border-box;margin:0;padding:0}
    body{font-family:"Space Grotesk","Segoe UI",sans-serif;background:radial-gradient(980px 480px at 10% -10%,rgba(168,85,247,.22),transparent 56%),radial-gradient(900px 420px at 96% 0,rgba(59,130,246,.15),transparent 56%),#020617;color:var(--text);min-height:100vh;padding:24px 16px 60px}
    .container{max-width:1200px;margin:0 auto;padding:40px}h1{text-align:center;font-size:2.2rem;background:linear-gradient(120deg,#d8b4fe,#a855f7,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{text-align:center;color:var(--muted);margin:10px 0 20px}
    .card{background:linear-gradient(180deg,rgba(17,24,39,.9),rgba(15,23,42,.88));border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 16px 36px rgba(0,0,0,.35)}.tool{padding:14px}
    .bar{display:grid;grid-template-columns:180px auto auto auto;gap:8px;align-items:center}.btn{border:1px solid var(--border);background:#0a1322;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff}
    select,textarea{border:1px solid var(--border);background:#020617;color:var(--text);border-radius:10px;padding:10px;width:100%}textarea{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.55;height:340px}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.panel{border:1px solid var(--border);border-radius:12px;background:rgba(2,6,23,.54);padding:10px}.panel h3{font-size:14px;margin-bottom:8px;color:#ddd6fe}.status{font-size:13px;min-height:18px;color:#c4b5fd;margin-top:8px}
    [data-reveal]{opacity:0;transform:translateY(12px);animation:up .6s ease forwards}[data-reveal="2"]{animation-delay:.08s}[data-reveal="3"]{animation-delay:.16s}[data-reveal="4"]{animation-delay:.24s}@keyframes up{to{opacity:1;transform:none}}
    .features-section{margin-top:30px}.faq-section{margin-top:30px}.related-tools{margin-top:30px}
    .features-section h2,.faq-section h2{font-size:1.2rem;margin-bottom:16px}
    .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .feature{border:1px solid var(--border);border-radius:10px;padding:12px;background:rgba(2,6,23,.54)}.feature p{color:var(--muted);font-size:13px;line-height:1.55}.feature h4{margin:8px 0 6px;font-size:14px}
    .faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;background:rgba(2,6,23,.5)}.faq-question{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:12px 14px;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.faq-question::after{content:'+';font-size:18px;transition:transform .2s}.faq-item.active .faq-question::after{transform:rotate(45deg)}.faq-answer{display:none;padding:0 14px 12px;color:var(--muted);font-size:13px;line-height:1.6}.faq-item.active .faq-answer{display:block}
    @media (max-width:980px){.bar{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.features-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.features-grid{grid-template-columns:1fr}}
  </style>
    <link rel="stylesheet" href="common/common.css">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" href="/favicon.ico" sizes="48x48">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
<div class="container">
  <h1 data-i18n="title">Code Formatter</h1><p class="subtitle" data-i18n="subtitle">Beautify JSON, SQL, JS, TS, HTML, CSS, Markdown</p>
  <section class="card tool" data-reveal="1">
    <div class="bar"><select id="langSel"><option value="json">JSON</option><option value="javascript">JavaScript</option><option value="typescript">TypeScript</option><option value="html">HTML</option><option value="css">CSS</option><option value="markdown">Markdown</option><option value="sql">SQL</option></select><button class="btn primary" id="formatBtn" data-i18n="format">Format</button><button class="btn" id="minifyBtn" data-i18n="minify">Minify JSON</button><button class="btn" id="copyBtn" data-i18n="copy">Copy Output</button></div>
    <div class="grid"><div class="panel"><h3 data-i18n="input">Input</h3><textarea id="input" spellcheck="false" data-i18n-placeholder="inPh" placeholder='{"a":1,"b":[2,3]}'></textarea></div><div class="panel"><h3 data-i18n="output">Output</h3><textarea id="output" spellcheck="false" data-i18n-placeholder="outPh" placeholder="Formatted result"></textarea></div></div>
    <div class="status" id="status"></div>
  </section>
  <div class="trust-bar" data-reveal="2"><span class="trust-item" data-i18n="trust_users">🌍 Used by 50,000+ users</span><span class="trust-item" data-i18n="trust_rating">⭐ 4.9/5 rating</span><span class="trust-item" data-i18n="trust_privacy">🔒 100% Private</span><span class="trust-item" data-i18n="trust_free">🚫 No Ads, No Signup</span></div>
  <section class="features-section" data-reveal="3"><h2 data-i18n="features_title">Code Formatter Features</h2><div class="features-grid"><article class="feature"><div>🔒</div><h4 data-i18n="f1_t">100% Free & Private</h4><p data-i18n="f1_d">No ads, no signup, no watermark. Formatting runs locally in browser.</p></article><article class="feature"><div>🧹</div><h4 data-i18n="f2_t">Multi-Language Beautifier</h4><p data-i18n="f2_d">Format JSON, SQL, JavaScript, TypeScript, HTML, CSS, and Markdown.</p></article><article class="feature"><div>🧪</div><h4 data-i18n="f3_t">Parser-Based Validation</h4><p data-i18n="f3_d">Get syntax error hints when parser cannot process malformed code.</p></article><article class="feature"><div>📋</div><h4 data-i18n="f4_t">Copy Output Quickly</h4><p data-i18n="f4_d">One-click copy improves API, SQL, and code review workflows.</p></article></div></section>
  <section class="faq-section" data-reveal="4"><h2 data-i18n="faq_title">Frequently Asked Questions</h2>
    <div class="faq-item"><button class="faq-question" data-i18n="faq1_q">What is a code formatter and why should I use it?</button><div class="faq-answer" data-i18n="faq1_a">A code formatter rewrites source code into consistent style and indentation. It improves readability, reduces review noise, and keeps team coding standards aligned.</div></div>
    <div class="faq-item"><button class="faq-question" data-i18n="faq2_q">Which formats are supported in this online formatter?</button><div class="faq-answer" data-i18n="faq2_a">This formatter supports JSON, JavaScript, TypeScript, HTML, CSS, Markdown, and SQL. You can switch language mode and format instantly in browser.</div></div>
    <div class="faq-item"><button class="faq-question" data-i18n="faq3_q">Does it validate JSON and SQL syntax?</button><div class="faq-answer" data-i18n="faq3_a">It performs parser-based formatting. If syntax is broken, formatter returns error to help locate invalid structure before beautifying output.</div></div>
    <div class="faq-item"><button class="faq-question" data-i18n="faq4_q">Can I use this as a Postman or IDE quick helper?</button><div class="faq-answer" data-i18n="faq4_a">Yes. It is useful for quick formatting during API debugging, SQL query cleanup, and copy-paste workflows outside full IDE setup.</div></div>
    <div class="faq-item"><button class="faq-question" data-i18n="faq_free_q">Is this tool really free with no ads?</button><div class="faq-answer" data-i18n="faq_free_a">Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.</div></div>
  </section>
  <section class="related-tools" data-reveal="4"><h3 data-i18n="relatedToolsTitle">Related Tools</h3><div class="related-grid"><a class="related-card" href="json-viewer.html"><div>📋</div><h4 data-i18n="relatedTool1">JSON Viewer</h4><p data-i18n="relatedTool1Desc">Inspect JSON after formatting.</p></a><a class="related-card" href="api-tester.html"><div>🧪</div><h4 data-i18n="relatedTool2">API Tester</h4><p data-i18n="relatedTool2Desc">Format request and response payload.</p></a><a class="related-card" href="yaml-editor.html"><div>🗂️</div><h4 data-i18n="relatedTool3">YAML/TOML Editor</h4><p data-i18n="relatedTool3Desc">Convert configuration files between formats.</p></a><a class="related-card" href="text-diff.html"><div>🧾</div><h4 data-i18n="relatedTool4">Text Diff</h4><p data-i18n="relatedTool4Desc">Compare code before and after formatting.</p></a></div></section>
</div>
<script>
(function(){'use strict';
var i18n={
    en:{tool_name:'Code Formatter',back:'Back to Toolbox',title:'Code Formatter',subtitle:'Beautify JSON, SQL, JS, TS, HTML, CSS, Markdown',format:'Format',minify:'Minify JSON',copy:'Copy Output',input:'Input',output:'Output',inPh:'Paste source code...',outPh:'Formatted result',ok:'Formatted successfully',err:'Format error',copied:'Output copied',jsonOnly:'Minify works for JSON only',trust_users:'🌍 Used by 50,000+ users',trust_rating:'⭐ 4.9/5 rating',trust_privacy:'🔒 100% Private',trust_free:'🚫 No Ads, No Signup',features_title:'Code Formatter Features',f1_t:'100% Free & Private',f1_d:'No ads, no signup, no watermark. Formatting runs locally in browser.',f2_t:'Multi-Language Beautifier',f2_d:'Format JSON, SQL, JavaScript, TypeScript, HTML, CSS, and Markdown.',f3_t:'Parser-Based Validation',f3_d:'Get syntax error hints when parser cannot process malformed code.',f4_t:'Copy Output Quickly',f4_d:'One-click copy improves API, SQL, and code review workflows.',faq_title:'Frequently Asked Questions',faq1_q:'What is a code formatter and why should I use it?',faq1_a:'A code formatter rewrites source code into consistent style and indentation. It improves readability, reduces review noise, and keeps team coding standards aligned.',faq2_q:'Which formats are supported in this online formatter?',faq2_a:'This formatter supports JSON, JavaScript, TypeScript, HTML, CSS, Markdown, and SQL. You can switch language mode and format instantly in browser.',faq3_q:'Does it validate JSON and SQL syntax?',faq3_a:'It performs parser-based formatting. If syntax is broken, formatter returns error to help locate invalid structure before beautifying output.',faq4_q:'Can I use this as a Postman or IDE quick helper?',faq4_a:'Yes. It is useful for quick formatting during API debugging, SQL query cleanup, and copy-paste workflows outside full IDE setup.',faq_free_q:'Is this tool really free with no ads?',faq_free_a:'Yes, 100% free with no ads, no registration, no watermark, and no usage limits. All processing happens locally in your browser — your data is never uploaded to any server.',relatedToolsTitle:'Related Tools',relatedTool1:'JSON Viewer',relatedTool1Desc:'Inspect JSON after formatting.',relatedTool2:'API Tester',relatedTool2Desc:'Format request and response payload.',relatedTool3:'YAML/TOML Editor',relatedTool3Desc:'Convert configuration files between formats.',relatedTool4:'Text Diff',relatedTool4Desc:'Compare code before and after formatting.'},
    'zh-CN':{tool_name:'代码格式化器',back:'返回工具箱',title:'代码格式化器',subtitle:'支持 JSON、SQL、JS、TS、HTML、CSS、Markdown 美化',format:'开始格式化',minify:'JSON 压缩',copy:'复制结果',input:'输入',output:'输出',inPh:'粘贴源代码...',outPh:'格式化结果',ok:'格式化成功',err:'格式化失败',copied:'结果已复制',jsonOnly:'仅支持 JSON 压缩',trust_users:'🌍 超过 50,000 用户使用',trust_rating:'⭐ 4.9/5 好评',trust_privacy:'🔒 100% 隐私安全',trust_free:'🚫 无广告、无需注册',features_title:'代码格式化器功能',f1_t:'100% 免费且安全',f1_d:'无广告、无需注册、无水印。格式化在浏览器本地执行。',f2_t:'多语言美化',f2_d:'支持 JSON、SQL、JavaScript、TypeScript、HTML、CSS、Markdown。',f3_t:'解析器校验',f3_d:'语法异常时返回错误，帮助快速定位问题。',f4_t:'快速复制结果',f4_d:'一键复制，提升接口联调和代码审查效率。',faq_title:'常见问题',faq1_q:'什么是代码格式化器？为什么要用？',faq1_a:'代码格式化器会把源代码重排为统一缩进和风格。它能提升可读性、减少评审噪音，并保持团队代码规范一致。',faq2_q:'支持哪些格式？',faq2_a:'支持 JSON、JavaScript、TypeScript、HTML、CSS、Markdown、SQL，可在浏览器中即时切换。',faq3_q:'会校验 JSON/SQL 语法吗？',faq3_a:'会进行解析器级格式化。若语法错误，会提示失败并帮助你先修复结构问题。',faq4_q:'可以作为 Postman 或 IDE 的快速助手吗？',faq4_a:'可以。它适合接口调试、SQL 整理和临时复制粘贴场景。',faq_free_q:'这个工具真的免费且无广告吗？',faq_free_a:'是的，100% 免费，无广告、无需注册、无水印、无限制。所有处理都在浏览器本地完成，你的数据不会上传到任何服务器。',relatedToolsTitle:'相关工具',relatedTool1:'JSON 查看器',relatedTool1Desc:'查看格式化后的 JSON。',relatedTool2:'API 测试器',relatedTool2Desc:'整理接口请求与响应。',relatedTool3:'YAML/TOML 编辑器',relatedTool3Desc:'配置文件格式转换。',relatedTool4:'文本对比',relatedTool4Desc:'对比格式化前后差异。'},
    fr:{tool_name:'Formateur de Code',back:'Retour à la boîte à outils',title:'Code Formatter',subtitle:'Beautifier JSON, SQL, JS, TS, HTML, CSS, Markdown',format:'Formatter',minify:'Minifier JSON',copy:'Copier sortie',input:'Entrée',output:'Sortie',inPh:'Collez le code source...',outPh:'Résultat formaté',ok:'Formatage réussi',err:'Erreur de formatage',copied:'Sortie copiée',jsonOnly:'Minify seulement pour JSON',trust_users:'🌍 Utilisé par 50 000+ utilisateurs',trust_rating:'⭐ Note 4.9/5',trust_privacy:'🔒 100% Privé',trust_free:'🚫 Sans pub, sans inscription',features_title:'Fonctions Code Formatter',f1_t:'100% Gratuit et Privé',f1_d:'Sans publicité, sans inscription, sans filigrane. Traitement local navigateur.',f2_t:'Beautifier multi-langages',f2_d:'JSON, SQL, JavaScript, TypeScript, HTML, CSS, Markdown.',f3_t:'Validation parseur',f3_d:'Renvoie erreur si syntaxe invalide.',f4_t:'Copie rapide',f4_d:'Copie sortie en un clic pour workflows dev.',faq_title:'Questions fréquentes',faq1_q:'Pourquoi utiliser un code formatter ?',faq1_a:'Un formatter applique style cohérent et indentation stable. Il améliore lisibilité et réduit bruit en revue de code.',faq2_q:'Quels formats sont supportés ?',faq2_a:'JSON, JavaScript, TypeScript, HTML, CSS, Markdown et SQL.',faq3_q:'Valide-t-il JSON et SQL ?',faq3_a:'Oui, formatage basé parseur; en cas d erreur syntaxique, vous obtenez un message.',faq4_q:'Peut-il servir d aide rapide hors IDE ?',faq4_a:'Oui, pratique pour API debugging et nettoyage de requêtes SQL.',faq_free_q:'Cet outil est-il vraiment gratuit et sans pub ?',faq_free_a:'Oui, 100% gratuit, sans publicité, sans inscription, sans filigrane et sans limites. Tout est traité localement dans votre navigateur — vos données ne sont jamais téléversées.',relatedToolsTitle:'Outils associés',relatedTool1:'Visionneur JSON',relatedTool1Desc:'Inspecter JSON formaté.',relatedTool2:'API Tester',relatedTool2Desc:'Formatter payload API.',relatedTool3:'Éditeur YAML/TOML',relatedTool3Desc:'Convertir fichiers de config.',relatedTool4:'Diff texte',relatedTool4Desc:'Comparer avant/après.'},
    es:{tool_name:'Formateador de Código',back:'Volver a la caja de herramientas',title:'Code Formatter',subtitle:'Embellece JSON, SQL, JS, TS, HTML, CSS, Markdown',format:'Formatear',minify:'Minificar JSON',copy:'Copiar salida',input:'Entrada',output:'Salida',inPh:'Pega código fuente...',outPh:'Resultado formateado',ok:'Formato exitoso',err:'Error de formato',copied:'Salida copiada',jsonOnly:'Minify solo para JSON',trust_users:'🌍 Usado por más de 50,000 usuarios',trust_rating:'⭐ Calificación 4.9/5',trust_privacy:'🔒 100% Privado',trust_free:'🚫 Sin anuncios, sin registro',features_title:'Funciones Code Formatter',f1_t:'100% Gratis y Privado',f1_d:'Sin anuncios, sin registro, sin marca de agua. Procesamiento local del navegador.',f2_t:'Embellecedor multi-lenguaje',f2_d:'JSON, SQL, JavaScript, TypeScript, HTML, CSS y Markdown.',f3_t:'Validación por parser',f3_d:'Muestra error cuando hay sintaxis inválida.',f4_t:'Copia rápida',f4_d:'Copia en un clic para flujos de desarrollo.',faq_title:'Preguntas frecuentes',faq1_q:'¿Por qué usar un code formatter?',faq1_a:'Un formatter aplica estilo e indentación consistentes. Mejora legibilidad y reduce ruido en revisión de código.',faq2_q:'¿Qué formatos soporta?',faq2_a:'JSON, JavaScript, TypeScript, HTML, CSS, Markdown y SQL.',faq3_q:'¿Valida sintaxis JSON y SQL?',faq3_a:'Sí, usa parser; si hay error sintáctico muestra aviso.',faq4_q:'¿Sirve como ayuda rápida fuera del IDE?',faq4_a:'Sí, útil para depurar APIs y limpiar consultas SQL.',faq_free_q:'¿Esta herramienta es realmente gratis y sin anuncios?',faq_free_a:'Sí, 100% gratis, sin anuncios, sin registro, sin marca de agua y sin límites. Todo el procesamiento ocurre localmente en tu navegador: tus datos nunca se suben a ningún servidor.',relatedToolsTitle:'Herramientas relacionadas',relatedTool1:'Visor JSON',relatedTool1Desc:'Inspecciona JSON formateado.',relatedTool2:'API Tester',relatedTool2Desc:'Formatea payload API.',relatedTool3:'Editor YAML/TOML',relatedTool3Desc:'Convierte archivos de configuración.',relatedTool4:'Diff texto',relatedTool4Desc:'Compara antes/después.'}
  };
  function t(k){var lang=WebToolbox.getCurrentLang();var d=i18n[lang]||i18n.en;return d[k]||i18n.en[k]||k;}
  function setStatus(v){document.getElementById('status').textContent=v||'';}


  function formatCode(){
    var mode=document.getElementById('langSel').value;
    var input=document.getElementById('input').value;
    if(!input.trim()){document.getElementById('output').value='';return;}
    try{
      var out='';
      if(mode==='json'){out=JSON.stringify(JSON.parse(input),null,2);}
      else if(mode==='sql'){out=window.sqlFormatter.format(input,{language:'sql'});}
      else {
        var map={javascript:'babel',typescript:'typescript',html:'html',css:'css',markdown:'markdown'};
        out=window.prettier.format(input,{parser:map[mode],plugins:window.prettierPlugins,printWidth:100,tabWidth:2,useTabs:false});
      }
      document.getElementById('output').value=out;
      setStatus(t('ok'));
    }catch(err){setStatus(t('err')+': '+err.message);}
  }

  document.getElementById('formatBtn').addEventListener('click',formatCode);
  document.getElementById('minifyBtn').addEventListener('click',function(){
    if(document.getElementById('langSel').value!=='json'){setStatus(t('jsonOnly'));return;}
    try{document.getElementById('output').value=JSON.stringify(JSON.parse(document.getElementById('input').value));setStatus(t('ok'));}catch(err){setStatus(t('err')+': '+err.message);}
  });
  document.getElementById('copyBtn').addEventListener('click',function(){navigator.clipboard.writeText(document.getElementById('output').value||'').then(function(){setStatus(t('copied'));});});

  window._translations=i18n;
})();
</script>
    <script src="common/common.js" data-tool-id="code-formatter" data-tool-name="Code Formatter" data-category="developer"></script>
    <script>WebToolbox.init(window._translations);</script>

</body>
</html>