JPKCom DB

Coder — Examples

Hands-on Coder walkthroughs: Base64-encode a string, decode a JWT, URL-encode special characters, embed an image as a Data URI, escape HTML and JSON.

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. The interface is in English; tab and button names are given as they appear in the tool.

Example 1: Base64-encode a string

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

  1. Open the Coder and switch to the Base64 tab.
  2. Paste your text, e.g. Grüße aus München.
  3. Click Encode. The field now shows R3LDvMOfZSBhdXMgTcO8bmNoZW4= — the accented characters survive thanks to UTF-8-safe encoding.
  4. Copy puts the string on the clipboard. To verify, paste it back and click Decode — you get exactly Grüße aus München back.

Note: if the string is not valid Base64 on decode, the tool tells you so rather than returning garbled output.

Example 2: Decode a JWT and read the payload

You have a token from an API response or a cookie and want to see what's inside.

  1. Switch to the JWT tab and paste the complete token (the three dot-separated parts, starting with eyJ…).
  2. Click Decode. The tool splits the token and shows three cards:
    • Header — as formatted JSON, e.g. { "alg": "HS256", "typ": "JWT" }.
    • Payload — also formatted, with the claims (sub, name, iat, exp, …).
    • Signature — the raw signature string, unchanged.
  3. If the payload contains an exp, a badge shows whether the token is valid or expired (with relative time like "2 hours ago"); an iat adds an "Issued" badge.
  4. 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.

Remember: the tool does not verify the signature. It shows what the payload claims, not whether the token is validly signed — see the tips. Because everything runs in the browser, though, the token never leaves your machine.

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 paste the raw value, e.g. Müller & Sohn (Café).
  2. Click Encode. Result: M%C3%BCller+%26+Sohn+%28Caf%C3%A9%29.
  3. Note the + for spaces — the Coder encodes in form style (application/x-www-form-urlencoded), not with %20. For query strings that's exactly right.
  4. Decode reverses it: + becomes a space, the rest is resolved via decodeURIComponent — you get Müller & Sohn (Café) back.

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 click Select a file to choose your file (e.g. a small PNG or SVG).
  2. The browser reads the file locally; the progress indicator climbs to 100%.
  3. The output field holds the finished data:image/png;base64,… URI. Below it you see file info: name, MIME type, size, last-modified date.
  4. Copy grabs the URI; you paste it as, say, background-image: url(data:image/png;base64,…).

Practical tip: Data URIs pay off mostly for small assets. Base64 inflates the data by about a third — for large images the URI gets very long and is usually impractical. The file is never uploaded; everything stays in the browser.

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. Result: &lt;a href="/x"&gt;Link&lt;/a&gt; — the angle brackets are now text.
  3. If the quote inside the attribute should also be neutralized (because the snippet itself goes into an attribute), use the HTML+ tab instead: then " additionally becomes &quot; and ' becomes &#39;.
  4. Decode reverses the step — but only for the exact entities the tool produces; arbitrary entities like &nbsp; are not resolved here.

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, and quotes.
  2. Click Escape. Line breaks become \n, tabs become \t, " becomes \", and \ becomes \\.
  3. You can now drop the escaped string straight into "key": "…" without breaking the JSON.
  4. Unescape reverses it — handy when you want to make an escaped value from a JSON file readable again.

Limit: the tab handles string literals, not whole documents, and covers the set \\ \" \n \r \t (no \uXXXX escapes). For complete JSON files, use the JSON Editor.

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.