What is URL Encoding?
URL encoding, also known as percent-encoding, is the standard mechanism for representing characters that aren’t safe to put directly inside a URL. It’s defined by RFC 3986 and used everywhere on the web — query strings, form submissions, REST APIs, OAuth flows, signed download links, redirect targets, and webhook payloads all depend on it.
The rule is simple: any character outside the unreserved set (A-Z, a-z, 0-9, -, _, ., ~) is replaced with a % sign followed by the two-digit hexadecimal value of the byte. A space becomes %20, an ampersand becomes %26, a forward slash becomes %2F. For non-ASCII characters, the string is first UTF-8 encoded, so each Unicode character may turn into two, three, or four percent-escaped bytes.
URL decoding is the reverse — reading %XX triplets and converting them back into the original bytes, then interpreting those bytes as UTF-8 to recover the original text.
When to Use the URL Encoder
You almost always want to URL-encode a value before putting it in a URL when:
- Passing user input as a query parameter. Search terms, names with spaces, anything copy-pasted from elsewhere —
encodeURIComponentit before concatenating into the URL. - Embedding a URL inside another URL. Redirect targets, callback URLs, OAuth
stateparameters. Without encoding, the inner URL’s?and&will be parsed as part of the outer URL. - Building API request bodies with
application/x-www-form-urlencoded. Every key and value must be percent-encoded; spaces become+. - Signing requests (AWS Signature V4, Google Cloud, OAuth 1.0). The signature input is the canonicalized, percent-encoded request — the tiniest mismatch in encoding produces a different signature.
- Cleaning up a URL pasted from email or chat. Decoders make
%E2%80%93readable again as–, so you can see what a long tracking URL actually says.
How to Use the URL Encode / Decode Tool
- Paste the URL or plain text into the input area.
- Choose Encode or Decode (the tool also auto-detects when input contains percent-escapes).
- Press
Ctrl+Enterto run, or click the action button. - Copy the result with one click —
Ctrl+Shift+Cworks too. - Clear with
Ctrl+Land start again.
Everything happens locally in your browser. No data is uploaded, so it’s safe to paste signed download URLs, JWTs in query strings, or any other URL that might contain sensitive parameters.
Common URL Encoding Values
| Character | Encoded | Notes |
|---|---|---|
| Space | %20 (or + in form data) | Use %20 in paths and fragments |
! | %21 | Reserved for sub-delims |
" | %22 | Always encode in URLs |
# | %23 | Marks the fragment — must encode if literal |
$ | %24 | Reserved character |
% | %25 | Encode the % itself, or you’ll get double-encoded output |
& | %26 | Separates query parameters |
+ | %2B | Means literal +; otherwise interpreted as space |
/ | %2F | Path separator — encode inside parameter values |
= | %3D | Separates key from value in queries |
? | %3F | Marks start of query string |
@ | %40 | Reserved for userinfo component |
é | %C3%A9 | Two UTF-8 bytes |
北 | %E5%8C%97 | Three UTF-8 bytes (CJK) |
🚀 | %F0%9F%9A%80 | Four UTF-8 bytes (emoji surrogate pair) |
URL Encoding vs HTML Entity Encoding vs Base64
These three look superficially similar — all turn unsafe characters into a longer escape sequence — but they solve different problems:
- URL encoding (
%20,%C3%A9) — safe characters in URLs and form bodies. Reversible. Output stays mostly human-readable. - HTML entity encoding (
&,é) — safe characters inside HTML markup so the browser doesn’t interpret them as tags. Decode it with our HTML entity tool. - Base64 (
SGVsbG8=) — encode arbitrary binary as ASCII. Roughly 33% size overhead, completely opaque to humans. Use the Base64 tool for tokens, file payloads, and credentials embedded in JSON.
If you’re stuffing a URL into a query parameter, you might double-wrap: Base64-encode the binary, then URL-encode the Base64 (because = and / need escaping). That’s how signed download URLs and OAuth callback states are typically built.
Common Errors and How to Fix Them
Double-Encoded URLs (%2520 instead of %20)
Symptom: query parameters that look like name=John%2520Doe. The % from %20 got re-encoded as %25. Cause: encoding the same value twice. Fix: decode once with this tool to recover name=John%20Doe, and ensure your code only calls encodeURIComponent once per value.
Plus Sign Treated as Space
Symptom: me+you@example.com arrives at the server as me you@example.com. Cause: in application/x-www-form-urlencoded, a literal + means space. Fix: encode + as %2B everywhere except form payloads where you actually want a space.
&, =, ? Inside Parameter Values
Symptom: a query parameter that contains = or & corrupts the rest of the query string. Cause: forgetting to encode the value before concatenating. Fix: pass each value through encodeURIComponent before building the URL — never use raw string concatenation with user input.
Unicode Looks Like Mojibake After Decoding
Symptom: decoded URL shows café instead of café. Cause: the bytes were UTF-8 but decoded as Latin-1. Fix: this tool always decodes as UTF-8, which is the correct behavior per RFC 3986. If you’re getting mojibake elsewhere, the encoder used the wrong character set — re-encode with UTF-8.
Whitelist Confusion (encodeURI vs encodeURIComponent)
Symptom: a URL like https://example.com/?q=foo becomes https%3A%2F%2Fexample.com%2F%3Fq%3Dfoo and breaks navigation. Cause: encodeURIComponent was called on a full URL. Fix: use encodeURIComponent only for individual values; use encodeURI (or no encoding at all) for a full URL you’ve already constructed correctly.
Why It Matters: Privacy and Performance
This URL encoder runs entirely in your browser — nothing leaves your machine. That matters because URLs often contain authentication tokens (access_token=...), session identifiers, signed S3 download links, or sensitive query parameters that audit logs would later expose. A server-side encoder, even on a “trusted” tool site, lands every payload in a request log.
The decode/encode operation is constant-time per character and runs faster than any network round-trip would, so there’s no UX reason to send the data off-machine either.
Related Encoding Tools
- Base64 Encoder & Decoder — for binary payloads
- HTML Entity Encode/Decode — escape characters inside HTML
- Unicode Escape Tool —
éstyle escapes for JSON, JS, Python - JSON Formatter — pretty-print JSON payloads after URL-decoding them