# 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. Source: https://www.jpkc.com/db/en/tools/coder/examples/ Back to the overview: [Coder](https://www.jpkc.com/db/en/tools/coder/) · Open the tool: [www.jpkc.com/tools/coder/](https://www.jpkc.com/tools/coder/) The [manual](https://www.jpkc.com/db/en/tools/coder/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](https://www.jpkc.com/tools/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](https://www.jpkc.com/db/en/tools/json/). Remember: the tool does **not verify the signature**. It shows what the payload *claims*, not whether the token is validly signed — see the [tips](https://www.jpkc.com/db/en/tools/coder/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. `Link`. 2. Click **Encode**. Result: `<a href="/x">Link</a>` — 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 `"` and `'` becomes `'`. 4. **Decode** reverses the step — but only for the exact entities the tool produces; arbitrary entities like ` ` 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](https://www.jpkc.com/db/en/tools/json/). --- There's more: the [overview](https://www.jpkc.com/db/en/tools/coder/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/coder/manual/) for every tab in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/coder/tips/) for the finer points. You can try everything right in the [tool](https://www.jpkc.com/tools/coder/).