URL Toolkit

This tool started as just a URL encoder, and grew into a full workspace because encoding a URL correctly is rarely the whole job — you also need to know why a link broke, or what a redirect parameter is actually pointing at, or whether a tracking URL is going to survive being pasted into a Slack message without mangling. Most of the traffic to this page is people debugging a URL that's already broken, not building one from scratch.

How it works

encodeURIComponent and encodeURI are the two JavaScript functions doing the actual work here, and mixing them up is the single most common source of broken URLs I see. encodeURIComponent escapes everything that isn't a plain letter, digit, or a small set of safe symbols — including &, ?, =, and /, which is exactly what you want when the value is going into a single query parameter, because those characters would otherwise be interpreted as URL structure instead of data. encodeURI is deliberately less aggressive: it leaves &, ?, =, and / alone because it assumes you're encoding a complete URL where those characters are doing their normal structural job. Run encodeURIComponent on a whole URL and you'll double-escape the slashes and break it; run encodeURI on a single parameter value that happens to contain an & and you'll silently split it into two parameters.

A real example

Say you're building a redirect URL where the return address is https://app.example.com/search?q=cats&dogs — note the ampersand inside the value itself. If you just concatenate that raw into https://example.com/login?returnTo=https://app.example.com/search?q=cats&dogs, the server sees returnTo, q, and dogs as three separate parameters, not one URL with an embedded query string — the destination gets mangled. Run the inner URL through encodeURIComponent first and you get returnTo=https%3A%2F%2Fapp.example.com%2Fsearch%3Fq%3Dcats%26dogs — now it's one clean parameter value that decodes back to the exact original URL on the other end.

Common mistakes

• Double-encoding. Running a URL through encoding twice turns %20 into %2520. This happens constantly when a URL passes through two different systems that both encode it. The Auto-Detect feature in this tool flags double-encoding specifically because it's easy to miss visually.
• Assuming query parameter order is preserved everywhere. Technically it usually is, but some CDNs and caching layers treat differently-ordered but otherwise-identical query strings as different cache keys, which can cause mysterious cache-miss issues. If you're debugging a caching problem, check whether parameter order is consistent across the URLs being generated.
• Forgetting the fragment (#) never reaches the server. Anything after # is client-side only — if you're trying to pass data to a backend, it needs to be a query parameter before the #, not a fragment.