JPKCom DB

Coder — Examples

Hands-on Coder walkthroughs: Base64, decoding a JWT and verifying its signature, URL encoding, Data URIs, escaping HTML and JSON, Punycode, Unicode escapes.

Back to the overview: Coder · Open the tool: www.jpkc.com/tools/coder/

The manual explains every tab in detail. This page adds concrete walkthroughs — typical tasks, step by step, focused on input and output. Tab, button, and option names are given as they appear in the tool. On the eight text tabs, the result always lands in the Output field on the right, while your input on the left stays put.

Example 1: Base64-encode a string

You need a value Base64-encoded, say for a header or a config file.

  1. Open the Coder and switch to the Base64 tab.
  2. Paste your text into Input, e.g. Grüße aus München.
  3. Click Encode (or press Ctrl+Enter). Output now shows R3LDvMOfZSBhdXMgTcO8bmNoZW4= — the umlauts survive thanks to UTF-8-safe encoding.
  4. Copy output puts the string on the clipboard. To double-check, click Use output as input (double arrow) and then Decode — you get exactly Grüße aus München back.

If the value goes into a URL or a token, switch on URL-safe: the result becomes R3LDvMOfZSBhdXMgTcO8bmNoZW4 — without = padding. The decoder accepts both variants. If a string isn't valid Base64 on decode, the status line says so and gives the position, rather than handing you garbled output.

Example 2: Decode a JWT and verify its signature

You have a token from an API response or an Authorization header and want to see what's inside — and whether it really was signed with your secret.

  1. Switch to the JWT tab and paste the token, leading Bearer and all if you like. This test token is good for trying it out:

    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0MiIsIm5hbWUiOiJFcmlrYSBNdXN0ZXJtYW5uIiwicm9sZSI6ImVkaXRvciIsImlhdCI6MTc2NzIyNTYwMCwiZXhwIjo0MTAyNDQ0ODAwfQ.WGp79y7OQ6F8BOaeXg53uUXCyMMV5pto4JknQa17-P8

  2. Without another click, the tool takes the token apart:

    • Header — { "alg": "HS256", "typ": "JWT" }.
    • Payload — with the claims sub, name, role, iat, and exp.
    • Claims — a table listing every field, with the common claims explained in plain language: sub as "Subject", name as "Name", iat as "Issued at" with its date (January 1, 2026), exp as "Expires at" with its date (January 1, 2100) and relative time. For role, the Meaning column stays empty, because the tool only knows the roles claim.
    • Signature (HS256) — the raw signature string.

  3. At the top you see the badge Within its validity period — expires in … years. An expired token would show "Expired …", one with an nbf in the future "Not valid yet".

  4. To verify, enter geheim-nur-zum-testen in the Secret field and click Verify signature. Result: "✓ Signature verified — the token was signed with this key." Change a single character of the secret, and the tool reports "✗ Signature does NOT match this key/secret."

  5. Use the Copy button next to the header or payload to grab that JSON block — for instance to process it further in the JSON Editor.

For tokens signed with RS256, ES256, or EdDSA, you paste the public key instead of a secret — as PEM (-----BEGIN PUBLIC KEY-----), as a JWK, or as the complete JWKS key set from your identity provider; the tool finds the right key via the kid. Token, secret, and key never leave your browser and are not stored.

Example 3: URL-encode special characters

You want to put a search term or parameter value safely into a URL.

  1. Switch to the URL tab and leave Mode on Component (encodeURIComponent).
  2. Paste the raw value, e.g. Müller & Sohn (Café), and click Encode. Result: M%C3%BCller%20%26%20Sohn%20%28Caf%C3%A9%29 — the parentheses are encoded as well.
  3. If the value goes into a classic HTML form or an application/x-www-form-urlencoded body, set Mode to Form (space = +). The result is recalculated instantly: M%C3%BCller+%26+Sohn+%28Caf%C3%A9%29.
  4. Decode reverses it and returns Müller & Sohn (Café) — in Form mode, + becomes a space again.

If you paste a whole address such as https://example.com/search?q=M%C3%BCller&page=2 instead of a single value and click Decode, the tool shows the Query parameters table below the result, with q = Müller and page = 2.

Example 4: Embed an image as a Data URI

You want to embed a small icon directly in your CSS instead of serving a separate file.

  1. Switch to the Data URI tab and drag your file (e.g. a small PNG or SVG) onto the Drop a file here or choose one area — or pick it with the file dialog.
  2. The browser reads the file locally. The info line shows name, MIME type, file size, and the size of the Data URI; a preview appears below.
  3. Set Output as to CSS background-image. The output field now holds the finished rule background-image: url("data:image/png;base64,…");.
  4. Copy grabs it, and you paste it straight into your stylesheet. For HTML or Markdown, choose HTML <img> or Markdown image — the file name then ends up in the alt text.

Practical tip: Data URIs pay off mostly for small assets. Base64 inflates the data by about a third; from roughly 32 KB the tool points out that a normal file is usually the better choice. The reverse direction lives in the right-hand half, Data URI → File: paste a Data URI, click Download file.png.

Example 5: Escape HTML for display

You want to show a code example in an article without the browser rendering it.

  1. Switch to the HTML tab and paste the markup, e.g. <a href="/x">Link</a>.
  2. Click Encode. With the default setting (Encode quotes on), the result is &lt;a href=&quot;/x&quot;&gt;Link&lt;/a&gt; — angle brackets and quotes are now text, and the snippet is even safe inside an attribute value.
  3. If the snippet only sits between tags, switch Encode quotes off: the quotes stay as they are, and you get &lt;a href="/x"&gt;Link&lt;/a&gt;.
  4. Decode reverses the step and understands every other entity along the way — &copy;, &nbsp;, or &#8364; are resolved too. Double-encoded text such as &amp;lt;b&amp;gt; is unwound by exactly one level (&lt;b&gt;); for the second level, click Use output as input and Decode once more.

Example 6: Escape a JSON string for code

You want to insert a multi-line text as a string value into a JSON file or source code.

  1. Switch to the JSON tab and paste the raw text, including line breaks, tabs, quotes, and backslashes — a Windows path such as C:\new, for example.
  2. Click Encode. Line breaks become \n, tabs \t, " becomes \", and \ becomes \\ — the path now reads C:\\new. Any other control characters end up as \u00XX.
  3. Switch on Add surrounding quotes if you want to drop the value, quotes included, straight after "key": . With Escape non-ASCII, umlauts become \u00e4 and the like — handy for systems that only handle ASCII.
  4. Decode reverses it — useful when you want to make an escaped value from a JSON file or a log readable again. You can copy the surrounding quotes along with it.

For complete JSON files, use the JSON Editor.

Example 7: Convert an internationalized domain for DNS and certificates

You're setting up a domain with an umlaut and need its ASCII form for DNS records, certificate requests, or configuration files.

  1. Switch to the Punycode tab and paste the addresses, one per line:

    bücher.de
https://www.müller-café.de/path?x=1
info@bücher.de

  2. Click Encode. Result:

    xn--bcher-kva.de
https://www.xn--mller-caf-j4a4r.de/path?x=1
info@xn--bcher-kva.de

    Only the host is converted — scheme, path, query, and the part before the @ stay unchanged.

  3. Decode takes you the other way: xn--bcher-kva.de from a log or a certificate list turns back into bücher.de.

Example 8: Write text as Unicode escapes

You want to put umlauts or emoji into a source file that only tolerates ASCII — or you've run into \u00FC in a log and want to know what it says.

  1. Switch to the Unicode tab and paste Grüße 😀.
  2. Leave Format on the first option (JavaScript, JSON, Java) and click Encode. Result: Gr\u00FC\u00DFe \uD83D\uDE00 — the emoji is written as a surrogate pair.
  3. Change the Format, and the result adapts instantly: ES2015 gives Gr\u{FC}\u{DF}e \u{1F600}, HTML Gr&#xFC;&#xDF;e &#x1F600;, and code points lists every character as U+0047 U+0072 U+00FC ….
  4. For the way back, paste the escapes and click Decode — the tool detects the format itself, even when several formats are mixed in one text.

There's more: the overview for the big picture, the manual for every tab in detail, and the tips & tricks for the finer points. You can try everything right in the tool.