MT
My Toolbox

URL Encoder & Decoder β€” Encode/Decode URLs Online Free

Paste a URL with special characters and get the percent-encoded version instantly β€” or decode a messy %20%3F string back to readable text. Uses the same encodeURIComponent/decodeURIComponent that browsers use internally. Everything runs in your browser; nothing touches a server.

Input Text
Input Text
Enter URL to encode
Encoded Output
Encoded Output
Encode and decode URL strings

URL Encoding converts special characters into a format that can be transmitted over the internet.

For example, spaces become %20, and other special characters like &, =, and ? are also encoded.

This tool uses encodeURIComponent() anddecodeURIComponent() functions, which encode all characters except:

  • Alphabetic characters (A-Z, a-z)
  • Digits (0-9)
  • Special characters: - _ . ! ~ * ' ( )

How URL Encoding Works (RFC 3986)

URLs can only contain a limited set of ASCII characters. Anything outside that set β€” spaces, Unicode, reserved delimiters used as data β€” must be "percent-encoded": a % followed by two hex digits representing the byte value. A space becomes %20, a forward slash in a query value becomes %2F, and the Japanese character あ becomes %E3%81%82 (three UTF-8 bytes).

This isn't optional. If you stick a raw & in a query parameter value, the server sees it as a parameter separator, not as data. I've debugged this exact issue at least a dozen times β€” an API returning "missing parameter" because someone forgot to encode the & in a company name like "Ben & Jerry's."

The spec (RFC 3986, Section 2.1) defines "unreserved characters" that never need encoding: A-Z, a-z, 0-9, and - _ . ~. Everything else is either reserved (has special meaning in URLs) or must be encoded. The tricky part: whether you encode reserved characters depends on context. A / in the path component is a delimiter, but a / inside a query parameter value is data and must be encoded as %2F.

How to Use

  1. Choose Encode or Decode mode.
  2. Paste or type your text β€” a full URL, a query parameter value, or an already-encoded string.
  3. The result updates as you type. Copy it with one click.
  4. For encoding: paste just the value part (not the whole URL) to avoid double-encoding the structure.

When You'll Need This

Building query strings with user input

User searches for "shoes & bags" β€” if you don't encode that &, the server splits it into two parameters. encodeURIComponent("shoes & bags") gives you "shoes%20%26%20bags" which is safe to drop into ?q=.

Debugging OAuth and redirect URLs

OAuth flows pass redirect_uri as a query parameter. That URI itself contains ? and & characters. You need to encode the entire redirect URL so it travels safely as a single parameter value. Double-encoding bugs here cause "invalid redirect_uri" errors that are painful to trace.

Decoding tracking links and UTM parameters

Marketing tools generate URLs with encoded UTM parameters that are unreadable. Paste the full URL here to see what utm_campaign, utm_source, and utm_content actually say without manually parsing %20 and %3D.

Passing JSON or special data in URL parameters

Some APIs accept JSON in query strings (bad practice, but it exists). The { } " characters all need encoding. This tool shows you exactly what the encoded version looks like before you hardcode it.

Common Mistakes to Avoid

1.

Don't encode the entire URL β€” only the values

encodeURIComponent("https://example.com/path?q=hello") encodes the :// and ? too, breaking the URL structure. Encode individual parameter values, not the whole thing. Use encodeURI() only if you need to encode a full URL while preserving its structure.

2.

Watch out for double-encoding

If a value is already encoded (%20), encoding it again turns %20 into %2520 (the % gets encoded to %25). This is the #1 bug I see in URL handling code. Always check if your framework already encodes before you add another layer.

3.

+ vs %20 for spaces β€” know the difference

In query strings (application/x-www-form-urlencoded), spaces can be + or %20. In path segments, only %20 is valid. JavaScript's encodeURIComponent always uses %20. If you're decoding and see +, you might need to replace them with spaces first β€” decodeURIComponent won't do that automatically.

4.

UTF-8 encoding happens before percent-encoding

The character Γ© is first encoded as UTF-8 bytes (0xC3 0xA9), then each byte is percent-encoded (%C3%A9). If your system uses Latin-1 instead of UTF-8, you get %E9 β€” one byte instead of two. This mismatch causes mojibake. Always use UTF-8.

Examples

Encoding a search query with special characters

A user searches for "C++ tutorials & guides" β€” all three special characters need encoding.

Input

C++ tutorials & guides

Output

C%2B%2B%20tutorials%20%26%20guides

Decoding a tracking URL parameter

A marketing URL contains an encoded redirect β€” decode it to see where it actually goes.

Input

https%3A%2F%2Fexample.com%2Flanding%3Futm_source%3Dnewsletter%26utm_campaign%3Dspring

Output

https://example.com/landing?utm_source=newsletter&utm_campaign=spring

Features

  • Encode and decode modes with instant switching
  • Uses standard encodeURIComponent/decodeURIComponent β€” same as browsers
  • Handles Unicode, emoji, and multi-byte characters correctly
  • Shows results as you type β€” no submit button needed
  • One-click copy to clipboard
  • Runs 100% in your browser β€” zero network requests, no data collection

Frequently Asked Questions

What's the difference between encodeURI() and encodeURIComponent()?

encodeURI() is for encoding a complete URL β€” it leaves :, /, ?, #, and & alone because they're structural. encodeURIComponent() encodes everything except A-Z, 0-9, and - _ . ! ~ * ' ( ). Use encodeURIComponent() for parameter values, encodeURI() for full URLs. In practice, you almost always want encodeURIComponent() because you're encoding a value to put inside a URL, not the URL itself.

Why does my URL break when I include a & or = in a parameter value?

Because & separates parameters and = separates key from value in query strings. If your value contains these characters literally, the parser splits on them. Encode the value: "Tom & Jerry" becomes "Tom%20%26%20Jerry". Now the parser sees one parameter with an encoded ampersand, not two separate parameters.

Should I use %20 or + for spaces?

It depends on context. In the query string of application/x-www-form-urlencoded (HTML forms), + means space. In URL path segments and other contexts, only %20 is valid. JavaScript's encodeURIComponent() always produces %20. Most servers accept both in query strings, but if you're building path segments, stick with %20.

How do I encode Unicode characters like emoji or Chinese text?

The character is first converted to UTF-8 bytes, then each byte is percent-encoded. The emoji πŸŽ‰ is 4 UTF-8 bytes: F0 9F 8E 89, so it becomes %F0%9F%8E%89. Chinese character δΈ­ is 3 bytes: E4 B8 AD β†’ %E4%B8%AD. This tool handles all of this automatically β€” just paste and it works.

What causes double-encoding and how do I fix it?

Double-encoding happens when you encode an already-encoded string. %20 becomes %2520 because the % is encoded to %25. Common cause: your framework encodes automatically, and you also call encodeURIComponent(). Fix: decode first (to get the raw value), then encode once. Or check if your HTTP library already handles encoding (most do β€” axios, fetch with URLSearchParams, etc.).

Tips & Related Workflows