Overview
Encode and decode URL-safe text
URLs are not allowed to contain certain characters. Spaces, accented letters, emoji, slashes, ampersands, and many others either break the URL structure or are simply not part of the ASCII subset URLs were designed around. Percent-encoding (also called URL encoding) replaces these characters with a percent sign followed by their hex code, so any text can travel safely inside a URL.
ToolHub URL Encoder converts text to its percent-encoded form and back. Two modes give you control over what gets encoded: component mode (encode everything that is not safe) or full URI mode (preserve URL structural characters like slashes and ampersands).
Step-by-step
How to URL encode and decode
- 1
Pick a mode
Encode converts plain text to percent-encoded form. Decode does the reverse. - 2
Pick a variant
Component mode encodes every non-alphanumeric character. Full URI mode preserves URL separators like : / ? & #. Use component for query parameter values, full URI for entire URLs. - 3
Type or paste your input
Drop your text or encoded URL into the input panel. Output updates live. - 4
Copy or swap
Click copy to grab the result. The swap button reverses input and output.
Component vs Full URI in one sentence
Background
What URL encoding actually does
URL encoding replaces unsafe characters with their UTF-8 byte representation in hex, prefixed with a percent sign. A space becomes %20, an ampersand becomes %26, a Hindi character like “म” becomes its UTF-8 bytes%E0%A4%AE.
Reserved vs unreserved characters
- Unreserved (always safe): A-Z, a-z, 0-9, hyphen, underscore, dot, tilde.
- Reserved (have meaning in URLs): : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Encode if you mean them literally.
- Unsafe (must always be encoded): space, percent, less than, greater than, hash if not a fragment, plus other punctuation.
encodeURI vs encodeURIComponent
JavaScript has two URL encoding functions and they behave differently. encodeURIassumes you have a complete URL and leaves URL syntax characters (: / ? & =) alone. encodeURIComponent assumes you have a value and encodes everything that is not unreserved. Use the right one for your situation. Our two modes correspond to these functions.
Use cases
When to URL encode
Query parameter values
Whenever a query value contains spaces, ampersands, plus signs, or non-ASCII text, URL encode it first.
Path segments with non-ASCII
If a slug or directory name contains accented characters or emoji, encode them before building the URL.
Mailto links with subject and body
Encode the subject and body of mailto: URLs so spaces and punctuation do not break the link.
Search engine queries
When constructing search URLs programmatically, encode the user query to handle special characters.
API integrations
Many APIs accept data in URL parameters. Encoding prevents user input from breaking your request.
Decoding logged URLs
Server logs show URLs in encoded form. Decode to read what users actually searched for or clicked.
Common questions
Why does %20 mean space?
Space has ASCII value 32, which is hex 20. The percent sign is the escape character for URL encoding. So %20 literally means “the byte 0x20” which is space.
What about plus signs in URLs?
The plus sign sometimes represents a space in URLs (the older form data encoding) and sometimes represents a literal plus (the newer URI standard). This ambiguity has caused bugs forever. To be safe, always encode literal plus signs as%2B.
Why does my URL look different after encoding?
Because the result is the byte-safe representation. Browsers decode percent-encoding for display, so the URL bar may show the original characters even when the link uses encoded form internally.
Can I double-encode?
Yes, but you usually do not want to. Double-encoded URLs contain percent signs that themselves get encoded as %25. This causes confusion. The decoder cannot tell whether one or two layers of decoding were intended.
100% private