# Coder — Beispiele > Praxis-Durchläufe mit dem Coder: String Base64-kodieren, JWT dekodieren, Sonderzeichen URL-encodieren, Bild als Data-URI einbetten, HTML und JSON escapen. Source: https://www.jpkc.com/db/tools/coder/examples/ Zurück zur Übersicht: [Coder](https://www.jpkc.com/db/tools/coder/) · Tool live öffnen: [www.jpkc.com/tools/coder/](https://www.jpkc.com/tools/coder/) Das [Manual](https://www.jpkc.com/db/tools/coder/manual/) erklärt jeden Reiter im Detail. Diese Seite ergänzt das um **konkrete Durchläufe** — typische Aufgaben, Schritt für Schritt, mit Fokus auf Eingabe und Ausgabe. Die Oberfläche ist auf Englisch; Reiter- und Button-Namen stehen deshalb im Original. ## Beispiel 1: Einen String Base64-kodieren Du brauchst einen Wert Base64-kodiert, etwa für einen Header oder eine Konfiguration. 1. Öffne den [Coder](https://www.jpkc.com/tools/coder/) und wechsle in den Reiter **Base64**. 2. Füge deinen Text ein, z. B. `Grüße aus München`. 3. Klick **Encode**. Im Feld steht jetzt `R3LDvMOfZSBhdXMgTcO8bmNoZW4=` — die Umlaute sind dank UTF-8-sicherer Kodierung korrekt enthalten. 4. Mit **Copy** landet der String in der Zwischenablage. Zum Gegencheck fügst du ihn wieder ein und klickst **Decode** — du bekommst exakt `Grüße aus München` zurück. Wichtig: Ist der String beim Decode kein gültiges Base64, meldet das Tool das, statt eine kaputte Ausgabe zu liefern. ## Beispiel 2: Ein JWT dekodieren und die Payload lesen Du hast ein Token aus einem API-Response oder einem Cookie und willst sehen, was drinsteht. 1. Wechsle in den Reiter **JWT** und füge das komplette Token ein (die drei punktgetrennten Teile, beginnend mit `eyJ…`). 2. Klick **Decode**. Das Tool zerlegt das Token und zeigt drei Karten: - **Header** — als formatiertes JSON, z. B. `{ "alg": "HS256", "typ": "JWT" }`. - **Payload** — ebenfalls formatiert, mit den Claims (`sub`, `name`, `iat`, `exp`, …). - **Signature** — der rohe Signatur-String, unverändert. 3. Enthält die Payload ein `exp`, zeigt ein Badge, ob das Token **gültig** ist oder **abgelaufen** (mit Relativzeit wie „vor 2 Stunden"); ein `iat` ergibt ein „Issued"-Badge. 4. Per Copy-Button neben Header oder Payload übernimmst du den jeweiligen JSON-Block — etwa um ihn im [JSON Editor](https://www.jpkc.com/db/tools/json/) weiterzuverarbeiten. Merke: Das Tool **prüft die Signatur nicht**. Es zeigt dir, was die Payload *behauptet*, nicht, ob das Token gültig signiert ist — siehe dazu die [Tipps](https://www.jpkc.com/db/tools/coder/tips/). Weil alles im Browser läuft, verlässt das Token deinen Rechner aber nicht. ## Beispiel 3: Sonderzeichen fuer eine URL kodieren Du willst einen Suchbegriff oder Parameter-Wert sicher in eine URL packen. 1. Wechsle in den Reiter **URL** und füge den Rohwert ein, z. B. `Müller & Sohn (Café)`. 2. Klick **Encode**. Ergebnis: `M%C3%BCller+%26+Sohn+%28Caf%C3%A9%29`. 3. Beachte das **`+` für Leerzeichen** — der Coder kodiert im Formular-Stil (`application/x-www-form-urlencoded`), nicht mit `%20`. Für Query-Strings ist das genau richtig. 4. **Decode** kehrt es wieder um: `+` wird zu Leerzeichen, der Rest über `decodeURIComponent` aufgelöst — du erhältst `Müller & Sohn (Café)` zurück. ## Beispiel 4: Ein Bild als Data-URI einbetten Du willst ein kleines Icon direkt ins CSS einbetten, statt eine separate Datei auszuliefern. 1. Wechsle in den Reiter **Data URI** und klick bei **Select a file** auf deine Datei (z. B. ein kleines PNG oder SVG). 2. Der Browser liest die Datei lokal ein; die **Fortschrittsanzeige** läuft auf 100 %. 3. Im Ausgabefeld steht die fertige `data:image/png;base64,…`-URI. Darunter siehst du Datei-Infos: Name, MIME-Typ, Größe, Änderungsdatum. 4. **Copy** übernimmt die URI; du fügst sie z. B. als `background-image: url(data:image/png;base64,…)` ein. Praxis-Tipp: Data-URIs lohnen vor allem für **kleine** Assets. Base64 bläht die Daten um rund ein Drittel auf — bei großen Bildern wird die URI sehr lang und ist meist unpraktisch. Die Datei wird dabei nie hochgeladen, alles bleibt im Browser. ## Beispiel 5: HTML-Code fuer die Anzeige escapen Du willst ein Code-Beispiel in einem Artikel anzeigen, ohne dass der Browser es rendert. 1. Wechsle in den Reiter **HTML** und füge das Markup ein, z. B. `Link`. 2. Klick **Encode**. Ergebnis: `<a href="/x">Link</a>` — die spitzen Klammern stehen jetzt als Text. 3. Soll auch das Anführungszeichen im Attribut entschärft werden (etwa weil der Schnipsel selbst in ein Attribut wandert), nimm stattdessen den Reiter **HTML+**: Dann wird `"` zusätzlich zu `"` und `'` zu `'`. 4. **Decode** macht den Schritt rückgängig — aber nur für genau die Entities, die das Tool erzeugt; beliebige Entities wie ` ` werden hier nicht aufgelöst. ## Beispiel 6: Einen JSON-String fuer Code escapen Du willst einen mehrzeiligen Text als String-Wert in eine JSON-Datei oder in Quellcode einsetzen. 1. Wechsle in den Reiter **JSON** und füge den Rohtext ein, inklusive Zeilenumbrüchen, Tabs und Anführungszeichen. 2. Klick **Escape**. Aus Zeilenumbrüchen wird `\n`, aus Tabs `\t`, aus `"` wird `\"` und aus `\` wird `\\`. 3. Den escapten String kannst du nun direkt als Wert in `"key": "…"` einsetzen, ohne dass das JSON zerbricht. 4. **Unescape** kehrt das um — praktisch, wenn du einen escapten Wert aus einer JSON-Datei wieder lesbar machen willst. Grenze: Der Reiter behandelt String-**Literale**, keine ganzen Dokumente, und deckt das Set `\\ \" \n \r \t` ab (keine `\uXXXX`-Escapes). Für komplette JSON-Dateien nutze den [JSON Editor](https://www.jpkc.com/db/tools/json/). --- Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/coder/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/coder/manual/) für jeden Reiter im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/coder/tips/) für die Feinheiten. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/coder/).