What this tool does

URL encoding (also called percent-encoding) is the process of replacing characters that have special meaning in a URL, spaces, ampersands, slashes, non-ASCII letters, with %XX sequences a server can parse unambiguously. This tool runs both directions: paste plain text and get the encoded form, paste an encoded URL and get the original back. Everything happens in your browser; no characters travel to a server.

The three modes line up with the three real-world cases you actually hit: encode a full URL (preserve structure), encode a query value (escape everything), or decode whatever percent-encoded mess you were handed.

How to use it

1. Pick a mode in the segmented control: Encode, Encode component, or Decode. 2. Type or paste into the input pane. Output updates after a short debounce, there's no "Run" button to chase. 3. Swap flips the mode and pushes the output back into the input. Useful for round-tripping (encode → tweak → decode) to confirm symmetry. 4. Copy or Download the result. The download is a plain .txt file named encoded.txt or decoded.txt.

When you decode something that contains key=value&key2=value2 pairs, the tool also renders a small Parsed params table below, handy for inspecting query strings without manually splitting on &.

Encode vs Encode component, the only distinction that matters

JavaScript ships with two encoders, and picking the wrong one is the most common URL-encoding mistake.

  • encodeURI preserves URL structure. It leaves the reserved characters : / ? # [ ] @ ! $ & ' ( ) * + , ; = alone because those have meaning in a full URL. Use this when you have an entire URL string and just need to escape the unsafe parts (spaces, Unicode, <, >).
  • encodeURIComponent escapes everything. It encodes the reserved set, because at the component level (a single query value, a path segment, a fragment) those characters are data, not structure. Use this when you're building a query value or path segment from user input.

The classic bug: building ?q= + a search term with encodeURI. Hit a & inside the search term and the server now sees two query params instead of one. Always use encodeURIComponent for query values.

What the decoder does

Decode runs decodeURIComponent on your input, after first replacing + with a space (the application/x-www-form-urlencoded convention used by HTML forms). Most decoders forget the + substitution and you end up with John+Doe instead of John Doe. This one handles it.

If the decoded text looks like a URL (or like a query string), the tool tries to extract ?key=value&… pairs and displays them in the params table. The parser is the browser's native URL + URLSearchParams, so it follows the same rules a real server would.

Common gotchas

  • Double-encoding. Decoding text that was already plain leaves it unchanged. Decoding text that was encoded twice leaves it half-encoded. If your output still has %25 sitting around, you encoded it twice somewhere upstream.
  • Plus vs space. In application/x-www-form-urlencoded (HTML form bodies and most query strings), + decodes to a space. In path segments, + is a literal plus. Be aware which context your data came from.
  • Unicode. Both encoders emit UTF-8 bytes by default, a single emoji becomes 4 escape sequences (e.g. %F0%9F%98%80). If your decoded output looks like garbage, the source was probably not UTF-8.
  • Already-encoded input to the encoder. Running encodeURIComponent over %20 produces %2520, the % itself gets encoded. Decode first, then re-encode.

Privacy

Your input, the encoded/decoded output, and any parsed query parameters stay in your browser. Nothing is sent to a server. Recent inputs are stored only in your browser's local storage and can be cleared from the "Recent" card.

Frequently asked

What's the difference between encodeURI and encodeURIComponent?

encodeURI preserves URL structure — it leaves reserved characters like : / ? # & = alone because they carry meaning in a complete URL. encodeURIComponent escapes everything because at the component level (a single query value or path segment) those characters are data, not structure. Use encodeURIComponent for query values; use encodeURI when escaping a full URL string.

Does this tool send my URL or text to a server?

No. Encoding and decoding run entirely in your browser using the native encodeURI / encodeURIComponent / decodeURIComponent APIs. Nothing is uploaded, logged, or persisted server-side. Recent inputs are saved only to your browser's localStorage.

Why is + becoming a space when I decode?

Application/x-www-form-urlencoded (the format used by HTML forms and most query strings) uses + to mean space. The decoder replaces + with space before percent-decoding so you get the expected result. If your input is a path segment where + is meant literally, decode without that step manually.

What is double-encoding and how do I detect it?

Double-encoding is when input is run through encodeURIComponent twice. The percent signs themselves get encoded, so a space becomes %2520 instead of %20. If you decode and still see escape sequences, the data was encoded twice — decode again until the output is clean.

Can I decode a full URL or do I have to extract the query string first?

You can paste a full URL like https://example.com/path?q=hello%20world and the tool will decode the whole string. If the decoded result contains query parameters, a small Parsed params table appears below the output so you can see each key/value pair.

How does the tool handle Unicode characters and emoji?

All encoding emits UTF-8 byte sequences — a single emoji like 😀 becomes %F0%9F%98%80 (four bytes). On decode, the bytes are re-assembled into the original characters. If your decoded output looks like mojibake, the source was probably not UTF-8 to begin with.

Which characters does encodeURIComponent NOT escape?

Only the unreserved set: A-Z, a-z, 0-9, and the four characters - _ . ~ . Everything else — including reserved structural characters and all non-ASCII — is percent-encoded. This makes it safe to drop the result into any URL position.

What does the Swap button do?

Swap flips the mode (encode ↔ decode) and pushes the current output into the input field. Useful for round-tripping: encode something, paste the result back, decode it, and confirm you get your original input back unchanged.

Related tools