A URL encoder and decoder is the everyday workhorse for anyone building APIs, debugging redirects, or wrangling query strings. URL encoding — formally called percent-encoding and standardised in RFC 3986 — is the mechanism the web uses to put arbitrary text safely inside a URL. A space becomes %20, an ampersand becomes %26, a question mark becomes %3F, and non-ASCII characters such as é, 中, or an emoji are first turned into their UTF-8 bytes and then each byte is escaped as %XX. This URL decoder reverses the process, turning hello%20world back into hello world so you can read what a link actually contains. Everything runs in your browser using the native encodeURIComponent() and decodeURIComponent() functions — no data is sent to a server, nothing is logged, and the tool keeps working even if you go offline.
How to URL Encode & Decode
Using the tool takes three steps. (1) Paste the text or URL component you want to convert into the input box on the left. (2) Click Encode to percent-encode the text, or Decode to expand existing %XX sequences back into readable characters. (3) Copy the result from the output panel with one click. Under the hood, encoding replaces every character that is not an unreserved character (A-Z a-z 0-9 - _ . ~) with % followed by the two-digit hexadecimal value of each UTF-8 byte. Decoding walks the string, finds each %XX triple, converts it back to a byte, and reassembles the original UTF-8 text. Because the conversion is symmetric, encoding then decoding always returns your exact original input.
When to URL-Encode or Decode
- Query string parameters — build links like
?q=hello%20world&tag=foo%2Bbar without breaking the URL. - Reading redirect chains — paste a long OAuth
redirect_uri and decode it to see the real destination and state token. - Form submissions — understand
application/x-www-form-urlencoded request bodies captured in DevTools. - Path segments — safely embed user-generated slugs that contain slashes, spaces, or accented letters.
- Webhook & callback URLs — encode arbitrary IDs or signed tokens before appending them to a callback.
- Debugging — see
%2F or %3D in a log line? Decode it to recover the human-readable value.
URL Encoding & Decoding in Code
If you want to reproduce what this tool does inside your own application:
// JavaScript / TypeScript
const encoded = encodeURIComponent('hello world&foo=bar');
// => "hello%20world%26foo%3Dbar"
const decoded = decodeURIComponent('hello%20world%26foo%3Dbar');
// => "hello world&foo=bar"
// Build a query string the safe way
const qs = new URLSearchParams({ q: 'a b', tag: 'x&y' }).toString();
// => "q=a+b&tag=x%26y"
// Python
from urllib.parse import quote, unquote
quote('hello world&foo=bar') # 'hello%20world%26foo%3Dbar'
unquote('hello%20world') # 'hello world'
For full-URL encoding (keeping :/?# intact) use encodeURI() instead of encodeURIComponent().
encodeURI vs. encodeURIComponent & Common Errors
The most common mistake is using encodeURI() when you meant encodeURIComponent(). encodeURI() deliberately leaves the reserved characters : / ? # [ ] @ ! $ & ' ( ) * + , ; = untouched because it expects a complete URL, so it will not escape an ampersand inside a query value — corrupting your parameters. For a single value, always use encodeURIComponent() (which this tool uses). A second gotcha is the plus-sign ambiguity: in application/x-www-form-urlencoded data a literal space is encoded as +, but in a path it must be %20; decoders that treat + as space outside form data will mangle real plus signs. Finally, decoding malformed input (a stray % or %ZZ) throws a URIError — this tool catches that and shows a clear error rather than failing silently. Related tools: Base64 encoder and JWT decoder.