URL Encoder / Decoder
Paste a URL or query string and get the encoded or decoded version instantly. Handles encodeURIComponent, full URL encoding, and Base64. Nothing is sent anywhere.
All encoding and decoding happens instantly in your browser, so nothing is sent to any server. Use encodeURIComponent for query string values, encodeURI for full URLs, and Base64 for binary-safe text encoding.
How to URL-encode or decode text
Pick a direction and a function, paste your text, and copy the result.
- 01
Choose Encode or Decode
Encode turns special characters into %XX codes. Decode turns them back into readable text.
- 02
Pick the right function
encodeURIComponent for a single value, such as one query parameter or a path segment. encodeURI for a whole URL you want to keep working. Base64 is also here for binary-safe text, though it isn't URL encoding.
- 03
Paste and copy the result
The output updates as you type, using the browser's own encodeURIComponent, encodeURI and decode functions, so it matches what JavaScript code would produce.
encodeURIComponent versus encodeURI
The two functions differ in which characters they leave alone. encodeURI keeps everything that has a job in a URL, such as : / ? & = and #, so the URL still works. encodeURIComponent encodes those too, which is what you want for a value going inside a URL.
| Input | Function | Output |
|---|---|---|
| price & tax = 10% / ₹ | encodeURIComponent | price%20%26%20tax%20%3D%2010%25%20%2F%20%E2%82%B9 |
| https://example.com/search?q=chai latte&city=Pune | encodeURI | https://example.com/search?q=chai%20latte&city=Pune |
| https://example.com/a?b=1 | encodeURIComponent | https%3A%2F%2Fexample.com%2Fa%3Fb%3D1 |
| é | either | %C3%A9 |
| 😀 | either | %F0%9F%98%80 |
The first row shows why it matters. If you put price & tax = 10% straight into a query string, the & starts a new parameter and the = splits the value. The third row is the right way to pass one URL inside another, such as a redirect_uri. Non-English characters become their UTF-8 bytes, so é is two %XX pairs and an emoji is four.
Mistakes that cause broken links
Double encoding is the most common. Encode a space once and you get %20; encode the result again and you get %2520, because the % itself is encoded. If you see %25 followed by two hex digits in a URL, something encoded an already-encoded value. Decode once and check.
The plus sign is the other trap. HTML forms send spaces as +, so a query string like q=chai+latte means "chai latte" to a server. decodeURIComponent doesn't know that rule and leaves the + as it is. When decoding form data, replace + with a space first, or use URLSearchParams in code, which handles it.
When URL encoding matters
Building a link with tracking parameters
Encode each utm_ value separately with encodeURIComponent so spaces, ampersands and slashes in campaign names don't break the URL.
Reading a messy URL from a log
Decode a long percent-encoded URL to see the real path and parameter values at a glance.
Passing a redirect address
OAuth and login flows take a return URL as a parameter. Encode the whole address with encodeURIComponent before adding it.
Limits worth knowing
- Decoding fails on a stray % that isn't followed by two hex digits, such as 100%. That's the browser refusing malformed input, not a bug.
- It works on text only. Binary files need Base64, and images are better handled by Image to Base64.
- It doesn't split a URL into parts. To see each parameter on its own line, decode the URL and read the query string after the ?.