URL Encoder / Decoder
Encode and decode URL components and full URLs
Encode the right part of a URL or you will break it
URL encoding is one of those simple-looking steps that quietly causes production bugs. The distinction between encoding a full URL and encoding a component matters: query values, path fragments, callback URLs, and redirect targets all need different handling. This page exposes both modes so you can inspect the exact output before shipping it into a browser, API request, redirect flow, or QR code.
- Select component mode when you are encoding a query parameter value, path segment, or any partial string inside a larger URL.
- Select full URI mode only when you already have an entire URL and want to preserve structural characters like `:`, `/`, `?`, and `#`.
- Paste the original string, review the transformed output, and copy the encoded or decoded version once it matches the downstream requirement.
- If you are chaining tools, send encoded links into the QR code generator or JSON formatter only after confirming you used the correct mode.
The most common URL-encoding mistake
A large share of broken links come from encoding the wrong boundary. Developers often encode an entire URL as if it were a single component, which escapes structural characters such as `:`, `/`, `?`, `&`, and `=`. Once that happens, the browser no longer sees a URL structure. It just sees text.
The other frequent mistake is double encoding or double decoding. OAuth redirects, nested callbacks, payment flows, and QR links are especially prone to this because values travel through multiple systems that each try to "help."
How to decide what to encode
The right question is not "is this a URL?" but "what role does this string play inside a URL?" If it is a full destination, use full-URI handling. If it is a query value, path segment, or nested callback inside a larger URL, use component encoding.
That rule holds on both frontend and backend code. Once you define the boundary correctly, most encoding bugs disappear before they reach production.
Best use cases
- Building safe query strings for redirects, search links, OAuth flows, and tracking parameters.
- Decoding encoded callback URLs while debugging authentication and payment integrations.
- Preparing URLs for QR codes, HTML attributes, or transport inside JSON payloads.
Common mistakes to avoid
- Encoding an entire URL with `encodeURIComponent` usually over-escapes the separators and breaks the link structure.
- Decoding user input more than once can turn safe strings into malformed or dangerous URLs.
- Spaces, plus signs, and percent sequences are easy to misread, so always inspect the final result before sending it to production.
Related tools
Move directly into the next step instead of leaving the site to do adjacent work elsewhere.
FAQ
What is the difference between component and full URI mode?
Component mode escapes nearly everything that could alter URL structure, while full URI mode preserves reserved separators so the browser can still interpret the URL layout.
Why did my redirect URL stop working after encoding?
The usual cause is choosing the wrong mode. Full URLs normally need full URI handling, but nested callback values inside query strings normally need component encoding.
Should I encode URLs before generating a QR code?
Only when the QR payload contains a partial URL component or a value that must stay escaped. For normal public links, put the final human-usable URL into the QR generator.