Encoder & Decoder

What does this encoder and decoder do?

Type or paste text above, pick Encoding or Decoding, and the conversions appear instantly — nothing is sent to a server. In encoding mode you get three results at once: URL encoding, URL component encoding, and Base64. In decoding mode the tool tries each format for you and shows whichever ones produce a sensible result. I built it because I kept jumping between a browser console and a random website just to escape a query string or decode a token, and that felt silly for something the browser can already do.

Why do URLs need encoding at all?

URLs are only allowed to contain a limited set of characters, so anything outside that set has to be escaped. A space, an ampersand, a question mark, a slash, or any non-English letter can change what a URL means — or break it entirely — if it is dropped in raw. Encoding rewrites those characters as % sequences (a space becomes %20, for example) so the address survives being copied, linked, and parsed by a server.

The set of characters that may stay as-is is small. RFC 3986, the spec that defines URL syntax, marks only the letters A–Z a–z, the digits 0–9, and - . _ ~ as “unreserved”; everything else becomes a % triplet. Each byte turns into a percent sign plus two hex digits, so one ASCII character grows to three, and because non-ASCII text is converted to UTF-8 first, a single symbol like € expands to nine characters (%E2%82%AC).

There are two functions for this on purpose. encodeURI is for a whole URL, so it leaves structural characters like :, /, ?, and # untouched. encodeURIComponent is for a single piece you are dropping into a URL — a search term or one query value — so it escapes those structural characters too. The rule of thumb: encoding a full link, use the first; encoding one value inside a query string, use the second. MDN documents the exact escape sets: encodeURIComponent leaves only - _ . ! ~ * ' ( ) unescaped, while encodeURI additionally keeps the structural characters ; , / ? : @ & = + $ #.

What is Base64, and when should I use it?

Base64 turns arbitrary text or binary data into a safe alphabet of letters, digits, +, and /. Use it when a channel that only expects plain text has to carry something richer: embedding a small image directly in HTML or CSS as a data: URI, putting credentials in a basic-auth header, or tucking a blob into JSON without it being mangled. It typically makes data about a third larger, which is the trade-off for that safety. That figure is exact rather than a rough guess: RFC 4648 defines Base64 as packing every 3 bytes (24 bits) into 4 printable characters from a 65-character alphabet (A–Z, a–z, 0–9, +, /, and = for padding), which works out to a 4/3 — roughly +33% — increase. One practical wrinkle: the browser’s own btoa only accepts characters below code point 256, so this tool converts your text to UTF-8 first before encoding, which is why emoji and non-Latin text round-trip cleanly here even though raw btoa would reject them (MDN).

One thing Base64 is not: encryption. It is fully reversible by anyone — this tool decodes it in a click — so never treat it as a way to hide a password or a secret.

The three formats at a glance

Format	Defined by	Output alphabet	Size impact	Best for
URL encoding (encodeURI)	RFC 3986	%XX triplets; structural characters kept	each escaped character grows 1 → 3 chars	escaping a whole URL
URL component (encodeURIComponent)	RFC 3986	%XX triplets; structural characters also escaped	each escaped character grows 1 → 3 chars	one query or path value
Base64 (btoa)	RFC 4648	A–Z a–z 0–9 + / = (65 chars)	about +33% (3 bytes → 4 chars)	carrying binary over a text-only channel

The reason Base64’s overhead is fixed rather than content-dependent comes straight from the standard:

“The encoding process represents 24-bit groups of input bits as output strings of 4 encoded characters.”

— RFC 4648, §4

How does automatic decode detection work?

In decoding mode the tool runs your input through URL decoding, URL component decoding, and Base64 decoding, then shows only the attempts that actually change the text or that succeed as Base64. So a %-escaped string surfaces its URL result, while a block of Base64 surfaces its decoded text. A few tips from regular use: reach for URL component encoding when you are building query values, remember Base64 is for transport rather than protection, and because every conversion runs locally you can safely paste tokens or private snippets without them ever leaving your browser.