URL Encoder/Decoder
Encode and decode URLs for web applications
Encode URL
Output
Encode URL
How to encode and decode URLs online?
Encode and decode URL components with our secure URL encoder/decoder. Handle special characters, query parameters, and path segments. Perfect for web development, API integration, and data transmission with proper URL encoding standards.
Features
- Percent-encoding via the browser's native encodeURIComponent / decodeURIComponent, fully RFC 3986 compliant
- Encodes the full reserved set (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) so safe to use on path segments, query values, and fragment identifiers
- UTF-8 aware: emoji and non-ASCII characters become correct multi-byte percent sequences (e.g., é becomes %C3%A9, not %E9)
- Live conversion as you type with one-click Encode/Decode mode toggle and instant clear
- Handles double-encoded strings safely — decode twice to recover from %2520-style mishaps without the page crashing
- Catches URIError on malformed input (e.g., lone % or %ZZ) and shows 'Error decoding URL' instead of throwing
- Pairs naturally with this site's URL Parser tool for splitting a URL into protocol/host/pathname/search/hash, and the JWT Decoder when handling Base64URL-encoded tokens in URLs
- Zero network calls: encoding and decoding happen entirely in JavaScript on your device
How to use
- Paste your raw text or URL component into the input field — a query parameter value, a path segment, or a full URL.
- Pick Encode (turns special characters into %XX) or Decode (reverses the process).
- With auto-process on, the result appears immediately as you type; otherwise click Encode/Decode.
- If you see 'Error decoding URL', the input has malformed percent-sequences — check for lone % signs or non-hex characters after a %.
- For double-encoded strings (%2520 instead of %20), run Decode twice to fully unwrap.
- Click Copy to grab the result, then use it in your URL, fetch() call, or curl command.
Tips & Best Practices
- Always validate your data before processing to catch syntax errors early.
- Use the copy button to quickly transfer formatted output to your clipboard.
- For large files, consider breaking them into smaller chunks for better performance.
- Back up your original data before applying any transformations.
- Use keyboard shortcuts for faster workflow: Ctrl+A to select all, Ctrl+C to copy.
FAQ
Should a space become %20 or +?
Both are valid, but in different contexts. Inside a URL path or fragment (everything before the ?), spaces must be %20 — the + character is literal there. Inside the query string of an application/x-www-form-urlencoded form submission, + is the historical encoding for space. This tool uses encodeURIComponent which always emits %20 (RFC 3986 correct); if you need form-encoded output, replace %20 with + manually after encoding the value.
Why not just use encodeURI() instead of encodeURIComponent()?
encodeURI() is for encoding a whole, already-structured URL: it leaves reserved characters like /, ?, &, #, : alone. encodeURIComponent() is for encoding a single value that you'll embed inside a URL — it escapes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( ). This tool uses encodeURIComponent because that's what 99% of real use cases need: building a query parameter or path segment safely from user input. Use encodeURI only if you literally have a complete URL with spaces in it.
Which characters does this tool actually encode?
Per encodeURIComponent (RFC 3986), it leaves only A-Z, a-z, 0-9, and - _ . ! ~ * ' ( ) untouched. Everything else — including the reserved gen-delims (: / ? # [ ] @) and sub-delims ($ & ' ( ) * + , ; =) — gets percent-encoded. That makes the output safe to drop into any URL position. RFC 3986's strictly-correct unreserved set is even smaller (excludes ! ' ( ) *), but the few characters encodeURIComponent leaves alone in practice rarely cause issues.
Are non-ASCII characters and emoji handled correctly?
Yes. encodeURIComponent first converts the string to UTF-8 bytes, then percent-encodes each byte. So 'café' becomes 'caf%C3%A9' (the two bytes for é) and a rocket emoji 🚀 becomes '%F0%9F%9A%80' (four bytes). This matches what RFC 3986 §2.5 recommends and what every modern web framework expects. Legacy systems using ISO-8859-1 or Windows-1252 will produce different output; if you need that, pre-convert in a separate tool first.
What is double-encoding and how do I fix it?
Double-encoding happens when a string is URL-encoded twice — for example, a space becomes %20 once, then %2520 if the result is encoded again (the % itself becomes %25). This typically occurs when a framework auto-encodes a value that was already encoded by another layer. To recover, run Decode twice in this tool. To prevent it, encode exactly once at the boundary where data enters the URL, never on already-encoded values.
Why doesn't my decoded output show the special characters as expected?
If the input was encoded against a different charset (e.g., a CGI script using Latin-1), the percent-sequences won't be valid UTF-8 and decodeURIComponent will throw a URIError, surfaced here as 'Error decoding URL'. Workaround: use a tool or script that supports the legacy charset, or normalize the data at the source. Alternatively, if you have a string with literal % followed by non-hex characters (e.g., '50% off'), those need to be encoded to %25 first or the decoder will choke.
Should I encode entire URLs or just specific parts?
Encode only the parts that come from untrusted or user-supplied input — typically a single query parameter value, path segment, or fragment. If you encode the entire URL including the protocol, slashes, and ? separator, you'll get something like 'https%3A%2F%2Fexample.com' which is no longer a usable URL. Build URLs with URL/URLSearchParams APIs (or this site's URL Parser) so each component gets the right level of encoding automatically.
Does anything I encode get sent to a server?
No. The tool calls the browser's built-in encodeURIComponent and decodeURIComponent functions, which are pure JavaScript — there is no fetch, XHR, or beacon involved. You can confirm by opening DevTools, switching to the Network tab, and using the tool: nothing new appears. This makes it safe for encoding sensitive query parameters like API keys, tokens, or PII before pasting into shared docs.