A link that contains a space, an ampersand or an accented letter can fall apart the moment you paste it into a query string. URL encoding, also called percent-encoding, rewrites those characters in a form every browser and server reads the same way. Kwebby's URL Encoder / Decoder does the conversion in both directions, using the same functions your browser provides to JavaScript. This guide covers the three methods, how to pick the right one, and the mistakes that cause broken links.
Key Takeaways
- Kwebby's URL Encoder / Decoder has Encode and Decode toggles and three methods: encodeURIComponent, encodeURI and Base64.
- The Output box updates as you type, and Copy, Clear and Swap buttons handle the rest.
- Percent-encoding writes a character as
%plus two hexadecimal digits, so a space becomes%20. Non-ASCII characters are encoded as UTF-8 bytes. - Use encodeURIComponent for a value inside a URL, and encodeURI for a whole address that is already structured.
- Decode leaves a plus sign as a plus unless you tick "Treat + as a space" for form data. Encode never produces one.
- Base64 is an encoding and not encryption, so it adds no security.
What Is the Kwebby URL Encoder / Decoder?
Kwebby's URL Encoder / Decoder is a free online tool that converts text and URLs to percent-encoded form and back. You choose Encode or Decode, pick encodeURIComponent, encodeURI or Base64, and paste into the Input box. The result appears in the Output box straight away, ready to copy.
URLs can only carry a limited set of characters. Anything outside that set, or anything with a special job in the address, has to be written as a percent sequence before the link is safe to send. The tool does that without scripts, accounts or uploads.
Key Features and How It Works
Encode and Decode toggles
The two buttons at the top set the direction. In Encode mode the Input box asks you to "Paste URL or text to encode…". In Decode mode it asks for "Paste encoded URL to decode…". The conversion runs as you type, so there is no convert button to press.
Three methods
The method buttons sit next to the toggles:
- encodeURIComponent is selected by default. It escapes everything except letters, digits and a few punctuation marks, including
/,?,&,=and:. - encodeURI leaves the characters that give a URL its structure, such as
/,?,&,=,:and#, and escapes spaces and non-ASCII characters. - Base64 converts text to Base64 and back, handling UTF-8 characters. Decoding also accepts URL-safe Base64, which uses
-and_, and input without=padding.
Here is how the first two treat the same input, https://example.com/search?q=hello world&lang=en:
| Method | Output |
|---|---|
| encodeURIComponent | https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den |
| encodeURI | https://example.com/search?q=hello%20world&lang=en |
The first output is unusable as a link, because it has lost its structure. It is exactly right as a value inside another URL, such as a redirect parameter. The second keeps a working address and only fixes the space.
Output, Copy, Clear and Swap
The Output box is read-only. Copy puts its content on your clipboard. Clear empties the Input box. Swap moves the current output into the Input box and flips Encode to Decode or Decode to Encode, so one click checks a round trip.
Error messages
If the input cannot be converted, the tool shows "Invalid input for selected operation." A common cause in Decode mode is a stray % that is not followed by two hexadecimal digits. MDN's page on decodeURIComponent says that case throws a URIError, and so does a sequence that is not valid UTF-8. For Base64 decoding, text that is not valid Base64 triggers the same message.
Browser-side conversion
The tool does its work with built-in browser functions, so conversion happens on your device. It is still wise to keep secrets, tokens and passwords out of any URL you share.
Why URL Encoding Matters
Some characters have a job in a URL. A question mark starts the query, an ampersand separates parameters and an equals sign joins a name to a value. RFC 3986 calls these reserved characters, and states that URIs that differ by replacing a reserved character with its percent-encoded form are not equivalent. If a parameter value contains an ampersand and you do not encode it, the server reads it as the start of a new parameter.
Non-English text needs the same care. RFC 3986 says non-ASCII text should first be encoded as UTF-8 bytes and then percent-encoded. That is why é becomes %C3%A9, two bytes, in the tool's output.
How to Use the URL Encoder / Decoder
- Choose a direction. Click Encode to turn text into a URL-safe form, or Decode to turn percent sequences back into text.
- Choose a method. Pick encodeURIComponent for a value, encodeURI for a whole URL, or Base64.
- Paste your text. Put it in the Input box.
- Read the Output. The result appears as you type. If you see an error line, check the input.
- Copy the result. Click Copy and paste it into your link, code or API call.
- Check the round trip. Click Swap, which also switches to Decode, and confirm you get the original back.
- Start again. Click Clear.
Best Practices for URL Encoding
Encode values, not whole URLs
Use encodeURIComponent on each parameter value, then build the URL around the encoded pieces. MDN's guide to encodeURIComponent recommends it for user-entered form fields because it escapes & and other characters that could be misread. Encoding a full URL with it breaks the address.
Encode only once
Running encoded text through Encode again turns %20 into %2520, because the percent sign itself is encoded. If a link shows %25 where you expect a single %, it has been encoded twice. Use Decode once to undo the extra layer.
Know the plus sign rule
Form-style query strings write a space as +, but the tool's Encode mode writes %20. MDN says decodeURIComponent does not convert plus to space, and tells you to replace the plus signs first when you work with form-encoded data. In Decode mode with encodeURIComponent, tick "Treat + as a space" and the tool does that replacement for you.
Do not treat Base64 as protection
Base64 turns data into a different alphabet and makes it about one third larger. MDN's Base64 entry is clear that it is an encoding and not encryption. Anyone can decode it, so never use it to hide a password or a token.
Keep hexadecimal digits consistent
RFC 3986 advises uppercase hex digits in percent sequences, and the tool writes them that way. If you compare URLs by hand, normalise the case first.
Common mistakes to avoid
- Encoding a whole URL with encodeURIComponent.
- Encoding the same text twice.
- Leaving an
&or=unencoded inside a parameter value. - Assuming Base64 is secure.
Common Use Cases
- Query parameters. Encode a search phrase or filter value before adding it to a link.
- Redirect and return URLs. Encode a full address so it can sit inside another URL as a parameter.
- API calls. Prepare values for GET requests that contain spaces or symbols.
- Reading logs. Decode percent sequences in a server log or an analytics report.
- Non-English links. Encode a path or query that contains accented, Arabic or Chinese characters.
Related Kwebby Tools
- HTML Encoder escapes angle brackets and quotes for page text, a different job from URL encoding.
- HTML Character Codes lists named, decimal and hex codes for common symbols.
- Image to Base64 converts an image to a Base64 string.
- QR Code Generator turns an encoded URL into a scannable code.
- .htaccess Redirect Generator writes redirect rules for URLs that change.
- Free Developer Tools Online lists the rest of the encoding, minifying and hashing tools on Kwebby.
Frequently Asked Questions (FAQs)
What is URL encoding?
URL encoding, or percent-encoding, replaces characters that are not allowed or that have a special meaning in a URL with a percent sign and two hexadecimal digits. A space becomes %20 and an ampersand becomes %26. The result is safe to send in links and API requests.
When do I need to encode a URL?
Encode whenever a URL or a parameter value contains spaces, &, =, ?, # or non-ASCII characters. This matters most for values inside query strings, redirect parameters and API calls. A plain address made only of safe characters needs no encoding.
What is the difference between encodeURI and encodeURIComponent?
encodeURI keeps the characters that structure a URL, such as /, ?, & and #, so a full address still works. encodeURIComponent escapes those characters too, which suits a single value placed inside a URL. Use the first for a whole link and the second for the pieces.
Why does decoding leave plus signs in my text?
Because decodeURIComponent, which the tool uses, does not turn + into a space. Form-style query strings use a plus for a space, so tick "Treat + as a space" before you decode them.
Is Base64 the same as URL encoding?
No. URL encoding escapes unsafe characters with percent sequences and keeps the text readable. Base64 rewrites the data in a 64-character alphabet and makes it larger. Neither one provides security.
Is the Kwebby URL Encoder / Decoder free?
Yes. The tool is free and needs no account. The conversion runs in your browser with built-in functions.
Final Thoughts
Most broken links come from encoding the wrong thing, or encoding it twice. Kwebby's URL Encoder / Decoder removes the guesswork with three methods, live output and a Swap button for round trips. Encode values with encodeURIComponent, whole addresses with encodeURI, and check the result by decoding it. Next, add the encoded link to your page, and use the HTML Encoder for any text you show on screen.