Bearbeiten, validieren, vergleichen, abfragen und konvertieren — alles in einem Werkzeug.
{{ ex }}
Der CalcSI JSON Editor ist ein kostenloses Online-Tool zum Bearbeiten, Validieren, Vergleichen, Abfragen und Konvertieren von JSON-Daten. Wechsle frei zwischen drei Ansichten — Baum, Text und Tabelle — und nutze fortschrittliche Funktionen wie JSON-Reparatur, Schema-Validierung, Diff-Vergleich, JSONPath/JMESPath-Abfragen und Konvertierung in YAML, CSV, XML oder TypeScript-Interfaces.
Alle Verarbeitung findet vollständig im Browser statt — deine Daten verlassen niemals dein Gerät. Ideal für Entwickler, API-Tester, DevOps-Engineers und alle, die mit JSON arbeiten.
Ja. Sämtliche Verarbeitung — Parsen, Validieren, Vergleichen, Konvertieren, Abfragen — läuft ausschließlich in deinem Browser. Es gibt keinen Server-Roundtrip und keine Logs. Du kannst den Quellcode jederzeit in den Browser-Entwicklertools überprüfen. Selbst sensible Daten wie Tokens oder PII bleiben auf deinem Gerät.
JSON ist seit RFC 8259 (ECMA-404) das universelle Austauschformat für strukturierte Daten im Web. Sechs Typen — string, number, boolean, null, object, array — und eine strikte UTF-8-Pflicht reichen aus, um REST-APIs, Konfigurationen, Logs, Telemetrie und sogar Datenbanken (BSON, JSONB in PostgreSQL) zu betreiben. Im Alltag arbeitet man aber selten mit einer leeren Datei: man bekommt eine 800-Zeilen-Antwort, will einen verschachtelten Schlüssel ändern, eine Property umbenennen oder zwei Konfigurationen vergleichen — und dafür ist ein reiner Texteditor zu grob. Ein JSON-Editor zeigt die Struktur als Baum, validiert beim Tippen, kennt Schema-Constraints und kann Pfade per JSONPath oder JMESPath gezielt extrahieren.
Dieser Editor kombiniert vier Modi: Edit (Tree/Text/Table) mit JSON-Repair, Format und Minify; Compare für Side-by-Side-Diff mit Add/Remove/Modify-Pfadliste; Convert zwischen JSON, YAML, CSV, XML und TypeScript-Interfaces; Query mit JSONPath ($.users[?(@.age > 18)].name) oder JMESPath (users[?age > `18`].name). Jeder Modus läuft komplett im Browser — die Engines vanilla-jsoneditor, js-yaml, PapaParse, fast-xml-parser, jmespath und jsonpath-plus werden als ESM/UMD-Bundles geladen, kein Backend ist beteiligt.
Wer mit JSON arbeitet, kommt früher oder später zu JSON Schema (Draft 2020-12). Schemas beschreiben Typen, Pflichtfelder, Wertebereiche und Formate (E-Mail, URI, Datum). Unser eingebauter Mini-Validator deckt die häufigsten Constraints ab: type, required, properties, items, minLength, minimum/maximum, enum und format: email. Für komplexere Cases wie oneOf oder $ref empfiehlt sich Ajv im eigenen Build.
Fünf typische Workflows decken 90 % der Anwendungsfälle ab:
Beispiel laden klicken, eigenes JSON einfügen, dann zwischen Tree-, Text- und Table-View wechseln. Pfeile klappen verschachtelte Objekte auf, die Statusleiste zeigt Bytes, Zeilen, Keys, Nodes und Tiefe.Reparieren. Der Editor entfernt trailing commas, ergänzt fehlende Anführungszeichen um Keys ({name:"x"} → {"name":"x"}) und tauscht einfache gegen doppelte Anführungszeichen aus — typische Fehler beim Kopieren aus JavaScript-Quellcode.JSON Schema, klicken Sie Schema-Beispiel und passen Sie es an. Validieren zeigt entweder "valid" oder eine Liste konkreter Fehler wie address.zip: minLength 5 mit Pfadangabe.Compare-Tab je eine Datei laden oder einfügen, dann Diff berechnen. Sie sehen rot removed, grün added und orange modified — perfekt für Code-Reviews, Migrationen oder Settings-Audits.Query-Tab JSON eingeben und z.B. $.users[?(@.active)].email ausführen, um alle aktiven User-E-Mails zu bekommen. Die vorgeschlagenen Beispiele sind klickbar.Diese konkreten Anwendungen kommen in echten Projekten täglich vor:
{"user":{"name":"Anna","age":29}} wird per Tree-View-Klick {"user":{"name":"Anna","age":30,"role":"admin"}}, ohne dass Sie Klammern oder Kommata zählen müssen.$.products[?(@.price < 50)].name liefert aus einem Katalog alle Produktnamen unter 50 Euro als JSON-Array.length(users[?active]) zählt aktive User direkt im Browser — schneller als ein jq-Aufruf für eine schnelle Antwort.Convert → TypeScript zu interface RootObject { name: string; age: number; roles: string[]; } — Copy-Paste in Ihre .d.ts-Datei.config.json in Compare laden, der Editor zeigt + logging.level : "debug" und ~ timeout : 30 → 60 in einer Pfadliste.Trotz aller Komfort-Funktionen gibt es Stolperfallen. Erstens: Zahlenpräzision. JSON-Numbers sind nicht Typ-spezifiziert; JavaScript verwendet IEEE-754-Doubles, was bei Werten jenseits Number.MAX_SAFE_INTEGER (2^53 − 1) zu Rundungsfehlern führt. Wer große IDs (z.B. Twitter-IDs, Snowflake-IDs) verarbeitet, sollte sie als String halten, sonst aus 10765432109876543 ungewollt 10765432109876544 werden. Zweitens: JSON-Repair-Limits. Die heuristische Reparatur korrigiert die häufigsten Tippfehler, kann aber zerschossene Strings mit unmaskierten Zeilenumbrüchen nicht zuverlässig rekonstruieren — bei komplexen Schäden lieber das Original-System nochmal exportieren lassen. Drittens: URL-Import & CORS. Die URL-Import-Funktion macht einen fetch() aus dem Browser. Server ohne Access-Control-Allow-Origin-Header sind blockiert; dann hilft nur Proxy oder lokaler Upload. Viertens — sicherheitskritisch: JSON Injection und Prototype Pollution. Wenn Sie editiertes JSON anschließend per Object.assign(config, JSON.parse(input)) in einen Server mergen, kann ein Angreifer mit __proto__- oder constructor-Keys den globalen Objekt-Prototyp manipulieren. Filtern Sie diese Keys serverseitig oder nutzen Sie Map statt Plain Objects. Fünftens: Privacy. Alles läuft lokal — aber wenn Sie URL-Import nutzen, sieht der Ziel-Server Ihre IP. Bei sensiblen Endpunkten lieber direkt im Browser einfügen.
$.user.address.zip oder JMESPath user.address.zip gibt den Wert direkt zurück. Für Arrays mit Filter: $.users[?(@.active)].email liefert alle aktiven Mail-Adressen.2^53 − 1 (9007199254740991) verlieren Präzision. Lösung: senden Sie große IDs als String, z.B. "id":"10765432109876543", oder nutzen Sie BigInt-Unterstützung im Server.$ und ist als De-facto-Standard verbreitet. JMESPath ist als RFC-Entwurf strenger spezifiziert, kommt z.B. in AWS-Tools zum Einsatz und kennt Funktionen wie length() oder sort_by(). Im Browser sind beide unterstützt — wählen Sie nach Ökosystem.$ref oder oneOf validieren?$ref, oneOf, allOf, if/then/else — nutzen Sie Ajv in einem Node-Build oder im Browser-Build mit ajv-formats.jq in kleinere Chunks.