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 |
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.