JSON Formatter Online
Einfach JSON einfügen und sofort schön formatiert anzeigen lassen. 100 % lokal im Browser – keine Speicherung, keine Datenübertragung.
/* ===== JSON Formatter – Light Theme (servit.dev) ===== */
.sd-jsonfmt{
--sdjf-primary: #008fbf;
--sdjf-bg: transparent;
--sdjf-fg: #0f172a;
--sdjf-muted: #4b5563;
--sdjf-border: #e5e7eb;
--sdjf-surface: #ffffff;
--sdjf-surface-2: #f0f2f7;
--sdjf-code: #1e293b;
--sdjf-code-border: #e5e7eb;
--sdjf-error-bg: #fef2f2;
--sdjf-error: #dc2626;
--sdjf-radius: 12px;
--sdjf-pad: 16px;
font-family: inherit;
color: var(--sdjf-fg);
background: var(--sdjf-bg);
border: none;
border-radius: 0;
padding: 0;
width: 100%;
max-width: 100%;
margin: 0;
box-shadow: none;
}
.sd-jsonfmt .sd-jsonfmt__row{display:flex;gap:10px;align-items:center}
.sd-jsonfmt .sd-jsonfmt__controls{flex-wrap:wrap;margin-bottom:20px;gap:8px}
.sd-jsonfmt .sd-jsonfmt__label{font-size:13px;color:var(--sdjf-muted);display:flex;align-items:center;gap:6px}
.sd-jsonfmt select.sd-jsonfmt__select{
padding:6px 10px;border:1px solid var(--sdjf-border) !important;background:var(--sdjf-surface) !important;
color:var(--sdjf-fg) !important;border-radius:6px;outline:none;font-size:13px;
line-height:1.4;height:auto;min-height:0;
appearance:auto;-webkit-appearance:auto;
transition:border-color .2s ease;
}
.sd-jsonfmt select.sd-jsonfmt__select:focus{border-color:var(--sdjf-primary) !important}
.sd-jsonfmt button.sd-jsonfmt__btn{
padding:7px 16px;border:1px solid var(--sdjf-border) !important;border-radius:8px;
background:var(--sdjf-surface) !important;color:var(--sdjf-fg) !important;cursor:pointer;
font-size:13px;font-weight:500;line-height:1.4;
box-shadow:none !important;text-transform:none;letter-spacing:0;
transition:all .15s ease;
}
.sd-jsonfmt button.sd-jsonfmt__btn:hover{
border-color:var(--sdjf-primary) !important;
color:var(--sdjf-primary) !important;
background:rgba(0,143,191,.04) !important;
}
.sd-jsonfmt button.sd-jsonfmt__btn:active{transform:translateY(1px)}
.sd-jsonfmt button.sd-jsonfmt__btn.sd-jsonfmt__btn--primary{
background:var(--sdjf-primary) !important;
border-color:var(--sdjf-primary) !important;
color:#ffffff !important;
}
.sd-jsonfmt button.sd-jsonfmt__btn.sd-jsonfmt__btn--primary:hover{
background:#2fbfef !important;
border-color:#2fbfef !important;
color:#ffffff !important;
}
.sd-jsonfmt button.sd-jsonfmt__btn.sd-jsonfmt__btn--ghost{
background:transparent !important;border-color:transparent !important;color:var(--sdjf-muted) !important;
}
.sd-jsonfmt button.sd-jsonfmt__btn.sd-jsonfmt__btn--ghost:hover{
color:var(--sdjf-primary) !important;background:transparent !important;border-color:transparent !important;
}
.sd-jsonfmt .sd-jsonfmt__spacer{flex:1}
.sd-jsonfmt .sd-jsonfmt__panes{align-items:stretch}
.sd-jsonfmt .sd-jsonfmt__pane{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px}
.sd-jsonfmt .sd-jsonfmt__panehead{font-size:12px;font-weight:600;color:var(--sdjf-muted);letter-spacing:.02em;text-transform:uppercase}
.sd-jsonfmt textarea.sd-jsonfmt__textarea{
width:100%;min-height:340px;resize:vertical;padding:var(--sdjf-pad);
border-radius:var(--sdjf-radius);border:1px solid var(--sdjf-border) !important;
background:var(--sdjf-surface) !important;color:var(--sdjf-fg) !important;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:13px;line-height:1.6;box-shadow:none !important;
transition:border-color .2s ease;
}
.sd-jsonfmt textarea.sd-jsonfmt__textarea:focus{border-color:var(--sdjf-primary) !important;outline:none}
.sd-jsonfmt .sd-jsonfmt__output{
width:100%;min-height:340px;margin:0;padding:var(--sdjf-pad);
border-radius:var(--sdjf-radius);border:1px solid var(--sdjf-code-border);
background:var(--sdjf-surface-2);
color:var(--sdjf-code);overflow:auto;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:13px;line-height:1.6;white-space:pre;
}
.sd-jsonfmt .sd-jsonfmt__error{
margin-top:12px;padding:12px 16px;border-radius:var(--sdjf-radius);
background:var(--sdjf-error-bg);color:var(--sdjf-error);font-size:14px;
border:1px solid rgba(220,38,38,.12)
}
/* Syntax-Highlighting – helles Theme */
.sd-jsonfmt .tok-key{color:#0369a1}
.sd-jsonfmt .tok-str{color:#047857}
.sd-jsonfmt .tok-num{color:#b45309}
.sd-jsonfmt .tok-bool{color:#9333ea}
.sd-jsonfmt .tok-null{color:#6366f1}
.sd-jsonfmt .tok-punc{color:#9ca3af}
/* Mobile */
@media (max-width: 768px){
.sd-jsonfmt button.sd-jsonfmt__btn{padding:7px 12px}
.sd-jsonfmt textarea.sd-jsonfmt__textarea,
.sd-jsonfmt .sd-jsonfmt__output{min-height:220px}
.sd-jsonfmt .sd-jsonfmt__panes{flex-direction:column}
}
(function(){
var $=function(sel,root){return(root||document).querySelector(sel)};
var root=document.getElementById('sd-jsonfmt');if(!root)return;
var el={
input:$('#sdjf-input',root),
output:$('#sdjf-output',root),
error:$('#sdjf-error',root),
indent:$('#sdjf-indent',root),
sort:$('#sdjf-sort',root),
btnFmt:$('#sdjf-format',root),
btnMin:$('#sdjf-minify',root),
btnCopy:$('#sdjf-copy',root),
btnDl:$('#sdjf-download',root),
btnClr:$('#sdjf-clear',root)
};
function showError(msg){el.error.textContent=msg;el.error.hidden=false}
function clearError(){el.error.hidden=true;el.error.textContent=''}
function sortKeysDeep(value){
if(Array.isArray(value))return value.map(sortKeysDeep);
if(value&&typeof value==='object'){
var out={};Object.keys(value).sort(function(a,b){return a.localeCompare(b)}).forEach(function(k){out[k]=sortKeysDeep(value[k])});
return out;
}
return value;
}
function getIndent(){
var v=el.indent.value;
return v==='\\t'?'\t':(v==='\t'?'\t':(isNaN(v)?v:Number(v)));
}
function highlight(jsonText){
return jsonText
.replace(/(&|)/g,function(s){return{'&':'&','':'>'}[s]})
.replace(/("(\\.|[^"\\])*")(\s*:)?/g,function(m,str,_e,colon){
return colon
?''+str+':'
:''+str+'';
})
.replace(/\b(true|false)\b/g,'$1')
.replace(/\b(null)\b/g,'$1')
.replace(/-?\b\d+(\.\d+)?([eE][+-]?\d+)?\b/g,'$&')
.replace(/([{}\[\],])/g,'$1');
}
function formatJSON(minify){
clearError();
var raw=el.input.value.trim();
if(!raw){el.output.innerHTML='';return}
try{
var data=JSON.parse(raw);
var obj=el.sort.checked?sortKeysDeep(data):data;
var indent=minify?0:getIndent();
var pretty=JSON.stringify(obj,null,indent);
el.output.innerHTML=highlight(pretty);
}catch(e){showError('JSON-Fehler: '+e.message)}
}
function copyOutput(){
if(navigator.clipboard){navigator.clipboard.writeText(el.output.innerText);return}
var ta=document.createElement('textarea');
ta.value=el.output.innerText;
document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove();
}
function downloadOutput(){
var text=el.output.innerText||'';
var blob=new Blob([text],{type:'application/json;charset=utf-8'});
var a=document.createElement('a');
a.href=URL.createObjectURL(blob);a.download='formatted.json';
document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(a.href);
}
el.btnFmt.addEventListener('click',function(){formatJSON(false)});
el.btnMin.addEventListener('click',function(){formatJSON(true)});
el.btnCopy.addEventListener('click',copyOutput);
el.btnDl.addEventListener('click',downloadOutput);
el.btnClr.addEventListener('click',function(){el.input.value='';el.output.innerHTML='';clearError()});
el.input.addEventListener('input',function(){
clearError();
try{if(el.input.value.trim())JSON.parse(el.input.value)}
catch(e){showError('Noch ungültig: '+e.message)}
});
el.input.addEventListener('keydown',function(ev){
if((ev.ctrlKey||ev.metaKey)&&ev.key==='Enter')formatJSON(false);
});
})();
Input (roh)
Output (formatiert)
Mit unserem kostenlosen JSON Formatter Tool kannst du deine JSON-Daten schnell und zuverlässig formatieren, einrücken und übersichtlich darstellen. Füge dein JSON einfach ins Eingabefeld ein und erhalte auf der rechten Seite eine saubere, strukturierte Ausgabe – optional alphabetisch sortiert oder minimiert.
Das Besondere: Deine Daten bleiben absolut sicher. Alles passiert ausschließlich lokal in deinem Browser. Wir übertragen oder speichern keine Inhalte auf einem Server. Damit eignet sich das Tool auch für vertrauliche Daten, die du nicht online hochladen möchtest.
Funktionen im Überblick:
-
JSON formatieren mit wählbarer Einrückung (2, 4, Tabs)
-
Alphabetische Sortierung der Keys (optional)
-
Ausgabe als formatiertes JSON oder Minify
-
Kopieren oder als Datei herunterladen
-
Direkte Fehlererkennung bei ungültigem JSON
Egal ob Entwickler, Admin oder Data-Analyst – mit diesem Tool sparst du dir umständliche Online-Services und kannst JSON-Strukturen schnell lesbar machen.