~/tools/url-codec
> url codec
percent-encode and decode url components in your browser. uses encodeURIComponent / decodeURIComponent under the hood. safe for query strings, path segments, and form data.
(empty)## overview
urls carry only a specific subset of ascii characters (letters, digits, and a handful of punctuation). everything else — spaces, non-ascii, reserved characters like `&` and `=` — must be percent-encoded: each offending byte becomes `%` followed by two hex digits. this tool performs percent-encoding with encodeURIComponent (which encodes everything that isn't safe inside a url component) and decoding with decodeURIComponent. use encode when building a query string, path segment, or form body. use decode when reading a url you received from somewhere else. the encoding is utf-8 aware — non-ascii characters are first converted to utf-8 bytes, then each byte is percent-encoded. this is the same behaviour as every modern browser.
## how to use
- pick a direction — encode turns text into url-safe form. decode turns percent-encoded text back.
- paste input — for encode, paste any text. for decode, paste a percent-encoded string.
- read output — the result updates as you type. copy it for use in a url or form.
- pick the right variant — encodeURIComponent encodes everything unsafe in a component. encodeURI (less common) leaves url delimiters like `/` alone and is meant for whole urls. this tool uses encodeURIComponent.
## examples
$ in
hello world# out
hello%20world$ in
a=b&c=d# out
a%3Db%26c%3Dd$ in
café# out
caf%C3%A9## common mistakes
encode vs encodeURI— encodeURI does not encode :/?#[]@!$&'()*+,;=. it is for whole urls. use encodeURIComponent (what this tool uses) for anything going inside a component like a query value.plus vs space— html forms encode spaces as `+`, not `%20`. browsers accept both in query strings. if you are debugging form encoding, unescape both.double encoding— encoding an already-encoded string produces gibberish (`%25` everywhere). check the input is raw text before encoding.length change— ascii stays 1 char → 3 chars. utf-8 multi-byte becomes `%xx` per byte (2-4× growth). do not put large data in query strings.max url length— browsers and servers cap urls around 2k-8k chars. use a post body for anything larger.
## faq
does this send my input anywhere?
no. encoding and decoding run in your browser.
what is the difference between encodeURI and encodeURIComponent?
encodeURI leaves url delimiters alone — good for encoding a whole url. encodeURIComponent encodes those delimiters — good for encoding a piece of a url (a query value, a path segment). this tool uses the latter because it is the safer default for user data.
why does `+` not become `%2B`?
in a query string, `+` represents a space in application/x-www-form-urlencoded. encodeURIComponent keeps it literal. if you need a literal `+`, encode it manually as `%2B`.
what about unicode?
characters outside the basic ascii range are encoded as their utf-8 byte sequence, each byte as `%xx`. é (U+00E9) becomes `%C3%A9`.
can i decode query strings?
yes, but this tool decodes a single string. for a full query string, use URLSearchParams or split on `&` and decode each piece.
why is my decoded output truncated at `%`?
a trailing `%` without two hex digits is invalid and throws an error. fix the input.
does case matter in hex?
no. %20 and %20 decode the same. encoders emit uppercase per rfc 3986.