Encode / Decode Tools
Encode and decode Base64, URL percent-encoding, query strings, and data URIs — round-trip API payloads safely in the browser.
What are encode/decode tools and when do you need them?
Encoding shows up in backend work because the wire does not accept arbitrary bytes. HTTP URLs have a fixed syntax with reserved characters, email bodies historically only allowed 7-bit ASCII, and HTTP headers reject most control characters. Whenever your data does not fit the channel, something has to transform it into a shape that does. Two schemes cover most of that day-to-day work: Base64, which rewrites arbitrary bytes as printable characters, and percent-encoding, which escapes the handful of characters that carry structural meaning inside a URL.
Both are trivial in principle and surprisingly easy to get wrong in practice. Developers double-encode URLs because a framework already encoded once. They hand a Base64 decoder a JWT segment and wonder why the signature is unreadable. They copy a token out of a log, lose trailing padding, and get a decode error. The Encode/Decode category packages the conversions in a way that forgives those mistakes and shows the intermediate result so you can spot exactly where the chain went wrong.
Base64 for binary through text
Base64 maps three bytes of input to four characters from a 64-symbol alphabet, with = as padding at the end. That makes it the default choice whenever you need to stuff arbitrary bytes through a text-only transport: JWT headers and payloads, basic auth credentials, email attachments under MIME, inline images as data URIs, and binary columns in a JSON response. The dedicated Base64 Encoder and Base64 Decoder pages focus on one direction each, and the combined Base64 Encoder & Decoder lets you flip back and forth without swapping tabs.
URL encoding for request wiring
Percent-encoding (RFC 3986) escapes reserved characters so they can appear inside URL components without breaking the parse. A query parameter like ?q=hello world&lang=en turns into ?q=hello%20world&lang=en because a raw space would truncate the URL at the first whitespace-sensitive client. The URL Encoder and URL Decoder tools handle that conversion, and the combined URL Codec page keeps both directions side by side so you can validate a round-trip in one step.
When decoding matters more
Most engineers reach for these tools during debugging rather than coding. A support ticket contains an encoded URL from a customer's browser history and you need to read what they actually clicked. A log line shows a Base64 payload sent to an API and you want to know whether it contained a valid JSON body. A third-party SDK returns a token you have to split and decode to check the claims. In each case decoding is the primitive that lets you see what actually moved between systems.
Chaining encodings in APIs
Real requests often stack multiple encodings. A JWT is Base64URL-encoded JSON where the whole token then rides inside an Authorization header, which in turn sits in a URL-encoded form body when it is posted. Tracing a bug through that stack means peeling the layers one at a time. BeautiCode's tools each do one thing, which makes it easy to decode one layer, inspect, then feed the result into the next tool rather than hunting for a single do-everything converter that guesses which layer you meant.
Tools in this category
Every tool below runs client-side. Tokens, URLs, and payloads stay in your browser.
Base64 Encoder & Decoder
Encode text to Base64 or decode Base64 strings in one unified tool.
URL Encoder & Decoder
Encode special characters for URLs or decode percent-encoded strings.
Base64 Encoder
Convert text to Base64 format for safe data transmission and storage.
Base64 Decoder
Convert Base64 encoded text back to its original format.
URL Encoder
Encode URLs to make them safe for transmission and web use.
URL Decoder
Decode URL-encoded text back to its original readable format.
Common use cases
Inspecting a JWT from a log line
An error log shows the bearer token the client sent. Split it on the dots, grab the middle segment, and paste it into Base64 Decoder to read the payload JSON. That is usually enough to confirm the expectedsub, iss, and exp claims. The signature segment is not human-readable on purpose, so skip it unless you are verifying the signature itself.
Debugging a query string that lost characters
A link in a marketing email loads the wrong page. Copy the URL and drop it into URL Decoder to see the actual parameter values your app is receiving. Often you spot a double-encoded value (%2520 instead of %20), which tells you a pipeline encoded the URL twice. Fix the offending layer, re-encode the canonical version with URL Encoder, and ship.
Embedding a small asset as a data URI
For a tiny SVG icon or a one-off email signature image, inlining the asset avoids an extra HTTP round-trip. Convert the raw bytes with Base64 Encoder, prefix with data:image/svg+xml;base64,, and paste the result straight into the src attribute. Keep this for assets under a few kilobytes; anything larger is better served as a normal file so it can be cached.
Round-tripping a payload through an API
When a third-party API accepts a Base64-encoded configuration blob, build the blob, encode it with Base64 Encoder & Decoder, send the request, then decode the echoed value from the response to confirm the server stored exactly what you sent. The combined tool keeps the encode and decode panes visible together, which is the fastest way to verify a round-trip without toggling tabs.
Related guides
Base64 Encoding Explained: What It Is and When to Use It
Learn what Base64 encoding is, how it works, and when to use it. Covers data URIs, API auth, JWT tokens, and image encoding with practical examples.
Text Encoding Demystified: ASCII, Unicode, and UTF-8 for Developers
Understand text encoding from ASCII to Unicode and UTF-8. Learn byte structures, encoding comparisons, common problems like mojibake, and practical solutions.
Frequently asked questions
Why does Base64 output look longer than the input?
Base64 represents three input bytes as four output characters drawn from a 64-symbol alphabet, so encoded output is always about 33 percent larger than the source. That overhead is the price of transporting arbitrary bytes through a channel that only accepts printable ASCII, which is why email attachments, JWT payloads, and data URIs all use Base64 even though they pay the size tax.
When should I percent-encode a value and when should I leave it alone?
Encode any user-supplied value before putting it into a URL path segment, query parameter, or fragment. The reserved characters (&, =, ?, #, /, +, space) change meaning inside a URL, so leaving them raw either breaks the request or silently shifts which parameter receives which value. Leave fully-formed URLs alone — encoding a URL that is already well-formed produces a doubly-encoded mess.
What is the difference between URL encoding and Base64?
They solve different problems. URL encoding (also called percent encoding) escapes a small set of characters that have syntactic meaning inside a URL, keeping everything else readable. Base64 rewrites arbitrary binary into a printable alphabet regardless of the original content. Use URL encoding for text that happens to contain reserved characters; use Base64 when you need to shuttle binary through a text-only channel.
Why do I sometimes see + in encoded URLs and sometimes %20?
Both represent a space, but they come from different specs. application/x-www-form-urlencoded (classic HTML form submissions) encodes space as +, while RFC 3986 URL encoding uses %20. Modern tooling tends to emit %20 everywhere, which is safer, but server frameworks still accept + in query strings for compatibility. BeautiCode defaults to %20 so the output round-trips through any decoder.
Can I paste a JWT into the Base64 decoder?
Yes, but decode one segment at a time. A JWT is three Base64URL-encoded segments separated by dots: header, payload, and signature. Drop the header or payload into Base64 Decoder and you will see the JSON. The signature is raw bytes of a cryptographic tag, not text, so it is normal that decoding it looks like garbage — that segment is meant to be verified, not read.