Roftr Labs

Developer

URL Encoder and Decoder

Percent-encode a URL or a single query value, with the difference made explicit.

Runs entirely in your browser. Nothing you paste is uploaded.

0 characters · 0 bytes

This runs entirely in your browser. Nothing you paste is sent to us or to anyone else.

One value — a single query parameter, a path segment, a form field. Escapes everything reserved, so the value cannot change the URL's structure.

How to use it

  1. Paste your text into the box marked "Text or URL to encode"Paste the text or address. Encode and Decode switch direction. Everything happens inside your browser — nothing is uploaded, so there is nothing for us to store, log or lose.
  2. Read the result as it updatesThere is no button to press. The result appears as you type. The output recomputes every time you change the text or one of the options above it.
  3. Choose what the text should be treated asA whole URL keeps its structure — the slashes and the colon survive — while a single value has everything escaped, which is what you want for something going INTO a query parameter. Using the first where you needed the second is how a URL inside a URL breaks.
  4. Watch for double encodingIf your input already contains %20 and you encode again, you get %2520. Decoding twice is the fix, and seeing it here is easier than seeing it in a log.
  5. Read the error on a malformed sequenceA stray % that is not followed by two hex digits cannot be decoded, and the tool says so rather than silently returning something wrong.
  6. Copy or download the resultThe buttons under the output put it on your clipboard or save it as a file, and each one says exactly what it will copy or download. Any note about something the tool changed or deliberately left alone is shown with the result rather than hidden.

About this tool

URL encoding — percent-encoding — replaces characters that would otherwise be misread as URL structure with a "%" and two hex digits. A space becomes %20, an ampersand inside a value becomes %26 so it cannot split the value into two parameters.

The choice this tool makes explicit is the one that causes almost every URL-encoding bug: whether you are encoding a *component* of a URL or a *whole* URL. They need different rules, and picking the wrong one produces a link that looks right and does not work.

Understanding the result

Component mode escapes the reserved characters : / ? # [ ] @ ! $ & ' ( ) * + , ; = as well. Use it for one query value, one path segment, one fragment — anything that must not be able to introduce structure.

Full URL mode leaves those characters alone, because in a whole URL they are the syntax. Use it when you have an address containing spaces or non-Latin characters and want it made safe without destroying it.

Form mode is component encoding with one difference: a space becomes "+" rather than %20. That is what an HTML form submits and what most server frameworks parse a POST body as.

Example

Input

https://roftrlabs.com/search?q=web tools & audits

Output

component: https%3A%2F%2Froftrlabs.com%2Fsearch%3Fq%3Dweb%20tools%20%26%20audits
full URL:  https://roftrlabs.com/search?q=web%20tools%20&%20audits

Limitations

  • Decoding fails on a malformed sequence — a "%" that is not followed by two hex digits. The tool reports where, rather than silently dropping it.
  • Encoding a whole URL in component mode is not an error the tool can detect for you; it produces a valid string that no browser will follow. The mode names are the guard.
  • Percent-encoding is defined over bytes, so non-ASCII characters are encoded as their UTF-8 bytes. A system expecting a different encoding will decode them differently.
  • This does not validate that the result is a reachable URL. It handles characters, not addresses.

Questions

Is my data uploaded anywhere?

No. The whole tool is JavaScript running on your device — there is no request to send. You can confirm it by opening your browser's network tab, or by disconnecting from the internet and using the page anyway.

Which mode do I want?

If you are inserting a value into a URL — a search term, an email address, a redirect target — use component. If you have a complete URL and want it made safe to use, use full URL. If you are building a form body by hand, use form.

Why did my URL stop working after I encoded it?

Almost certainly component mode applied to a whole URL: the "://" and the "/" separators were escaped, so what was an address became a single opaque string. Re-encode it in full URL mode.

Why is a space sometimes %20 and sometimes "+"?

Both are correct in their own context. %20 is percent-encoding proper and works anywhere in a URL. "+" means a space only inside an application/x-www-form-urlencoded body or query string — used elsewhere it is a literal plus sign.

Last updated 2026-08-16.

Related tools