JSON im Browser formatieren, prüfen, durchsehen und vergleichen. Genaue Syntaxfehler, Baumansicht, Schlüssel sortieren, Suche und ein semantischer Vergleich, der Formatierung ignoriert.
Tab rückt die aktuelle Zeile oder Auswahl ein. Drücke zuerst Escape, wenn Tab stattdessen zum nächsten Element springen soll.
Die Prüfung läuft beim Tippen. Sobald das Dokument gelesen werden kann, bekommst du Statistiken, eine Baumansicht mit kopierbaren Pfaden und die Aktionen zum Formatieren, Minifizieren und Sortieren. Nichts wird irgendwohin gesendet.
Die Statistik erscheint, sobald das Dokument gelesen werden kann.
Der Baum erscheint, sobald das Dokument gelesen werden kann.
Formatieren rückt ein Dokument neu ein, ohne seinen Inhalt anzufassen: Der Parser liest es, und der Serializer schreibt dieselben Werte mit zwei Leerzeichen, vier Leerzeichen oder Tabs zurück. Minifizieren ist dieselbe Operation ohne Leerraum - das, was du brauchst, bevor eine Payload in einen Header, eine Query oder eine Fixture wandert. Werte, Escapes und Unicode kommen genau so zurück, wie sie hineingingen.
Ein Validator, der nur „ungültig“ sagt, hat nichts gesagt. Dieser nennt Zeile, Spalte und Zeichenoffset, benennt die Ursache - ein Komma am Ende, ein Schlüssel in einfachen Anführungszeichen, ein fehlender Doppelpunkt, ein Kommentar - und druckt die umliegenden Zeilen mit einem Zeiger unter der Fehlstelle. Er meldet außerdem zwei Dinge, die ein Parser verbirgt: doppelte Schlüssel, die JSON.parse stillschweigend auf den letzten reduziert, und große Ganzzahlen, die in dem Moment an Genauigkeit verlieren, in dem JavaScript sie liest.
Der Vergleich betrifft Daten, nicht Text. Zwei Dokumente, die sich nur in der Einrückung, in Zeilenenden oder in der Reihenfolge der geschriebenen Schlüssel unterscheiden, gelten als dasselbe Dokument. Arrays werden als Folgen verglichen, denn ihre Reihenfolge gehört zu den Daten: ein eingefügtes Element wird als eine Einfügung gemeldet und nicht als Änderung von allem danach. Jeder Unterschied erscheint als hinzugefügt, entfernt, geändert oder Typ geändert - mit Symbol und Wort, nicht nur mit Farbe.
Die Baumansicht öffnet ein Dokument Ebene für Ebene, damit aus einer großen Datei keine große Seite wird. Jede Zeile trägt den Pfad, der zu ihr führt - users[4].email, profile.address.city - und je eine Kopierschaltfläche für Pfad und Wert, also meist genau das, was du aus der Datei gebraucht hast.
Das eingefügte Dokument, die abgelegte Datei, die gelesenen Werte, die Statistik und der Vergleich verlassen diesen Tab nie. Hinter diesem Werkzeug steht kein API-Aufruf, in den Speicher wandert außer deiner Einrückungseinstellung nichts, und in die Adressleiste gar nichts. Das zählt hier mehr als bei den meisten Werkzeugen: Produktive API-Antworten und Konfigurationsdateien tragen meist Zugangsdaten, Kundendaten oder interne Hostnamen.
Eine API-Antwort lesen, die in einer einzigen Zeile ankam. Eine Webhook-Payload gegen das prüfen, was dein Handler erwartet. Herausfinden, was sich zwischen zwei Ständen einer Konfigurationsdatei geändert hat. Aus einer Beispielantwort ein TypeScript-Interface machen. Bestätigen, dass eine Logzeile gültiges JSON ist, bevor du dem Parser die Schuld gibst.
Formatieren und Minifizieren laufen über den JSON-Parser und -Serializer des Browsers selbst, deshalb bleiben Werte, Escapes und Unicode exakt erhalten. Die Prüfung übernimmt der eigene Scanner dieses Werkzeugs, und nur deshalb kann es Zeile und Spalte nennen, die die Browsermeldung nicht liefert, und vor doppelten Schlüsseln und vor Ganzzahlen mit Genauigkeitsverlust warnen. Dokumente sind auf 5 MiB begrenzt, die Syntaxhervorhebung schaltet oberhalb von 300 KiB ab, damit eine große Datei tippbar bleibt, und der ausführliche Vergleich hört bei sehr großen Bäumen früh auf. Gegen ein JSON Schema prüft es nicht, und kaputte Dokumente repariert es nicht.
Nein. Formatieren, Prüfen, der Vergleich, die Statistik und der Baum laufen alle in deinem Browser. Dieses Werkzeug macht keinen API-Aufruf, und nichts, was du einfügst oder ablegst, wird gespeichert oder in die Adressleiste geschrieben. Zwischen Besuchen bleibt nur erhalten, welche Einrückung du gewählt hast.
Weil er Daten vergleicht und nicht Text. Einrückung, Zeilenenden und die Reihenfolge, in der Objektschlüssel geschrieben wurden, haben in JSON keine Bedeutung und gelten deshalb nicht als Unterschied. Die Reihenfolge in einem Array hat Bedeutung und wird als Folge verglichen, eine umsortierte Liste ist also ein echter Unterschied.
Der Scanner findet sie und warnt, wiederherstellen kann sie nichts: JSON.parse behält für einen wiederholten Schlüssel nur den letzten Wert, und jeder andere JSON-Parser, den du benutzen wirst, macht dasselbe. Die Warnung nennt Schlüssel und Zeile, damit du die Quelle korrigieren kannst.
Bis 5 MiB. Ab etwa 300 KiB schalten die Syntaxfarben ab, damit das Tippen flüssig bleibt, und bei sehr großen Dokumenten endet der ausführliche Vergleich früh und sagt es. Statistik und Prüfung arbeiten über den ganzen Bereich.
MCP, Model Context Protocol: Was ist das und wie funktioniert es in der Praxis?
MCP, REST API, Function Calling and Agent Tools compared
Das Model Context Protocol, kurz MCP, ist ein offener Standard, der KI-Anwendungen mit Werkzeugen und Datenquellen verbindet. Statt für jedes Modell und jeden Dienst eine eigene Integration zu bauen, beschreibt ein MCP-Server seine Fähigkeiten in einem einheitlichen Format, das kompatible Clients entdecken und aufrufen können. 2026 ist MCP deutlich reifer als beim Start: Die aktuelle Spezifikation nutzt einen zustandslosen HTTP-Kern, formale Erweiterungen, strengere Autorisierungsregeln und Mechanismen für lange Aufgaben.
Axios wurde für viele JavaScript-Teams zum Standard-HTTP-Client, weil es eine saubere API bot, bevor Fetch das standardmäßige Browser-Primitiv wurde. Heute können viele Teams natives Fetch direkt nutzen oder Ky wählen, einen kleinen Wrapper, der Komfort ohne das volle Gewicht von Axios hinzufügt. Die richtige Wahl hängt davon ab, ob Sie Axios-spezifische Funktionen wie Interceptors und bestehende Wrapper tatsächlich brauchen oder ob eine leichtere, modernere Request-Schicht besser zu Ihrer App passt.
TypeScript vs JavaScript: Was sollten Sie für das Frontend nutzen?
TypeScript and JavaScript compared
JavaScript ist die Sprache des Webs, und TypeScript ist JavaScript mit einem Typsystem, das Teams hilft, Fehler früher abzufangen und größere Codebasen mit mehr Sicherheit zu warten. Für kleine Skripte und schnelle Prototypen reicht reines JavaScript vielleicht aus. Für ernsthafte Frontend-Anwendungen zahlt sich TypeScript oft durch besseres Tooling, sicherere Refactorings und klarere Verträge zwischen Modulen aus. Die richtige Wahl hängt von der Projektgröße, der Teamerfahrung und davon ab, wie lange der Code leben muss.
Wir entwickeln individuelle Software und Lösungen, die auf Ihre Bedürfnisse zugeschnitten sind.