Encode or decode a URL in seconds.
Paste any URL or string and get the encoded or decoded result instantly. Three encoding modes, auto-detection, no ads, nothing sent to any server.
How the URL Encoder works
- 1
Paste your input
Paste a URL, a query parameter value, a form body, or any string you want to encode or decode. The output updates instantly as you type.
- 2
Choose Encode or Decode
Encode converts a plain string into percent-encoded form. Decode converts a percent-encoded string back to plain text. The auto-detection banner will suggest switching if your input looks already encoded.
- 3
Select the right encoding mode
Component encodes everything: use it for query param values. Full URL preserves URL structure like :// and /, use it for a complete URL. Form data uses + for spaces, use it for POST body data.
- 4
Copy the result
Click Copy to copy the output to your clipboard. Click Swap to move the output back into the input field (and toggle the mode), useful for verifying round-trip encoding.
The three encoding modes
The most common URL encoding mistake is using the wrong mode. Here is exactly when to use each one.
encodeURIComponentUse when: A single query parameter value, redirect URI, OAuth state, or any string that goes inside a URL (not the URL itself).
What it encodes: Everything except: A–Z a–z 0–9 - _ . ! ~ * ' ( )
Encodes : / ? = & so the value is safe inside a query string.
encodeURIUse when: A complete URL that you want to encode while keeping it structurally valid (for example, before embedding it in a link or a log entry).
What it encodes: Everything except URL structure chars: A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ #
Preserves : // / ? = & so the URL remains navigable.
application/x-www-form-urlencodedUse when: HTML form POST bodies and any context where your server or framework expects spaces as + rather than %20.
What it encodes: Same as Component, but spaces become + instead of %20.
Spaces → + (not %20). Used by HTML forms and many server frameworks.
Characters that get encoded: quick reference
The key difference between the two main browser functions. A checkmark means the character is encoded by that function.
| Character | encodeURIComponent | encodeURI |
|---|---|---|
| A–Z a–z 0–9 | ✗ left as-is | ✗ left as-is |
| - _ . ! ~ * ' ( ) | ✗ left as-is | ✗ left as-is |
| : / ? # @ ! $ & + , ; = | ✓ encoded | ✗ left as-is |
| Space | ✓ encoded | ✓ encoded |
| < > { } | \ ^ ` [ ] | ✓ encoded | ✓ encoded |
| Non-ASCII (é, 日, 🚀) | ✓ encoded | ✓ encoded |
When to use URL encoding
| Use case |
|---|
| Embed a URL inside a query string |
| OAuth redirect_uri parameter |
| Encode a full URL for a log entry |
| HTML form POST body |
| Decode a URL from browser address bar |
| Decode a query param value from an API |
Four ways URL encoding goes wrong
Almost every URL encoding bug comes from choosing the wrong function for the position in the URL. These are the four that show up most often in real code.
1. Using encodeURI on a query value
encodeURI deliberately leaves &, =, ?, and / alone because those are structural in a full URL. Pass a value containing an ampersand through it and you have silently created an extra query parameter. Values always want Component mode.
2. Using encodeURIComponent on a whole URL
The opposite error. It escapes the scheme separator and every slash, so a complete address becomes an unusable string. Reach for Full URL mode when encoding an address, and Component mode when encoding one piece that goes inside it.
3. Encoding twice
A value that is already encoded turns %20 into %2520, because the percent sign itself gets escaped. This usually happens when a value passes through two layers that each try to be helpful. The auto-detect on this tool flags input that already looks encoded.
4. Assuming a space is always %20
In a path or query string a space is %20. In form-encoded bodies it is +, and the two are not interchangeable. Form data mode handles that difference, which matters whenever you build an application/x-www-form-urlencoded payload by hand.
Frequently Asked Questions
What is the difference between encodeURIComponent and encodeURI?
This is the most common URL encoding mistake. Both functions encode characters, but they encode different sets, and using the wrong one is a frequent source of bugs.
| encodeURIComponent | encodeURI | |
|---|---|---|
| Does NOT encode | A–Z a–z 0–9 - _ . ! ~ * ' ( ) | A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ # |
| Use for | A single query parameter value | A complete URL you want to preserve |
| Encodes & = ? : / | Yes (safe inside query strings) | No (these are URL structure chars) |
| Problem if used wrong | Breaks a full URL (encodes :// and /) | Breaks query strings (& and = not encoded) |
What is form data encoding and when do I need it?
Form data encoding is used in HTML form POST requests with Content-Type: application/x-www-form-urlencoded. It's nearly identical to encodeURIComponent but has one key difference: spaces become + instead of %20.
// Component mode
encodeURIComponent("hello world") // → "hello%20world"
// Form data mode
"hello%20world".replace(/%20/g, "+") // → "hello+world"
// This matters when reading form submissions on a server:
// many server frameworks decode + as a space in form bodies.When building query strings for URLs in JavaScript, use Component (%20). When submitting HTML form data as a POST body, use Form data (+). The fetch API with URLSearchParams handles this automatically.
What does percent-encoding mean?
Percent-encoding (also called URL encoding) represents unsafe or reserved characters in a URL as %XX where XX is the hexadecimal byte value. For example, a space is byte 0x20, so it becomes %20. An @ is byte 0x40, so it becomes %40.
Characters outside the ASCII range (accented letters, emoji, CJK) are first UTF-8 encoded, then each byte is percent-encoded. The emoji 🚀 is four bytes in UTF-8, so it becomes %F0%9F%9A%80.
Why does decoding give an error?
The decoder throws an error when it encounters a malformed percent sequence: a % that isn't followed by exactly two hex digits, or a sequence that doesn't form a valid UTF-8 byte sequence.
%GG:Gis not a hex digit (valid hex is 0–9 and A–F)%2: incomplete sequence (needs two hex digits after%)%C3alone: the first byte of a two-byte UTF-8 sequence is incomplete without the second byte (%C3%A9= é)
What is double-encoding and how do I avoid it?
Double-encoding happens when you URL-encode a string that's already URL-encoded. The % itself gets encoded to %25, turning %20 into %2520, which then decodes to the literal string %20 instead of a space.
// String already has a %20 in it
const already = "hello%20world";
// Encoding it again double-encodes the %
encodeURIComponent(already);
// → "hello%2520world" ← %25 is the encoded form of %
// Then decoding once gives %20, not a space
decodeURIComponent("hello%2520world");
// → "hello%20world" ← still encoded, not "hello world"Use the Swap button in this tool to move the output back to the input: it automatically switches to Decode mode so you can verify there's no double-encoding.
Does this tool send my URLs to a server?
No. All encoding and decoding runs in your browser using JavaScript's built-in encodeURIComponent, encodeURI, and decodeURIComponent functions. Nothing is sent to any server. The tool works offline once the page is loaded.