URL Encoder / Decoder

How URL encoding works.

URL encoding (also called percent-encoding) converts characters into a % followed by two hexadecimal digits representing their byte value in UTF-8. For example, a space becomes %20, an ampersand becomes %26, and a Chinese character like ä½  becomes %E4%BD%A0 (three bytes in UTF-8). Reserved characters in URLs — ? & = / # : @ — must be encoded when they appear in values but not in their structural roles.

There are two modes: encode and decode. Encode converts raw text into percent-encoded form. Decode reverses the process, turning %20 back into a space. This tool uses encodeURIComponent / decodeURIComponent, which encodes all reserved and unsafe characters — the correct choice for query parameter values and form data.

Common use cases.

Query strings. When building a URL with parameters, the value of each parameter must be encoded. A search query like yaml to json becomes yaml%20to%20json. Without encoding, the space breaks the URL and the browser may misinterpret the query.

OAuth and API tokens. OAuth 1.0 requires every parameter (including the callback URL) to be percent-encoded before signing. A missing or incorrect encode will cause the signature to fail. Use this tool to verify your encoding matches what the API expects.

Form data. HTML forms submitted via GET encode field values in the URL. If you're constructing form data programmatically (not via a form element), you need to encode each value yourself before concatenating it into the query string.

encodeURI vs encodeURIComponent.

JavaScript offers two encoding functions. encodeURI encodes everything except A“Z, a“Z, 0“9, and ;,/?:@&=+$-_.!~*'()#. It's designed for full URLs. encodeURIComponent encodes everything except A“Z, a“Z, 0“9, and - _ . ! ~ * ' ( ). It's designed for individual URL components. This tool always uses encodeURIComponent behavior — the safer choice for values.

Reserved characters in URLs.

URLs define a set of reserved characters that serve structural purposes. The question mark ? separates the path from the query string. The ampersand & separates query parameters. The equals sign = separates keys from values. The slash / separates path segments. These characters are meaningful only when used in their designated positions — anywhere else they must be percent-encoded.

Understanding which characters are reserved is critical when constructing URLs programmatically. A common mistake is encoding the entire URL including the ? and & delimiters, which breaks the structure. Use encodeURI for full URLs or encode each value individually with encodeURIComponent and then assemble the URL with literal delimiters.

Common pitfalls and edge cases.

Double encoding. Applying percent-encoding twice turns %20 into %2520, which is not the same value. If you're receiving pre-encoded strings from an API or form submission, decode once before encoding again. This tool lets you toggle between encode and decode to check for accidental double encoding.

Non-ASCII characters. Characters outside the ASCII range — accented letters, CJK characters, emoji — are encoded as multiple percent-encoded bytes in UTF-8. For example, the character é becomes %C3%A9 (two bytes). This is correct and required for interoperability with servers that expect UTF-8 percent-encoded strings.

Plus signs. In query strings, some servers interpret + as a space, while others treat it as a literal plus sign. The safest approach is to encode spaces as %20 rather than +, which this tool does by default. When decoding, both %20 and + are converted to spaces.

Testing and debugging URLs.

When an API call returns a 400 or 404 error, the problem is often a misencoded URL parameter. Paste the URL component into this tool and decode it to see the original value. Then re-encode it and compare with what your code produces. The difference will usually reveal the bug — a missing encode, a double encode, or a character that was encoded inconsistently.