URL Encoding Explained: Decode %20, Fix Broken Links, Debug API Calls

TL;DR — Use the URL Encoder / Decoder to convert between human-readable text and percent-encoded URL-safe form. %20 is a space. %2F is a slash. %3D is an equals sign. For pretty blog URLs, use the Slug Generator; for cleaning weird whitespace out of pasted URLs, the Text Cleaner.

Why URLs need encoding at all

URLs are defined by RFC 3986 and can only contain a specific set of "unreserved" characters: A-Z a-z 0-9 - _ . ~, plus the reserved characters that have structural meaning (: / ? # [ ] @ ! $ & ' ( ) * + , ; =). Anything else — spaces, accented letters, emoji, slashes inside a query parameter — has to be percent-encoded: each byte becomes % followed by two hex digits.

The percent codes you’ll actually see

Code	Character	Why it’s encoded
%20	space	Spaces aren’t allowed in URLs
%21	!	Reserved in some contexts
%23	#	Otherwise starts a fragment
%26	&	Otherwise separates query params
%2B	+	In query strings, + often means space
%2F	/	Otherwise separates path segments
%3A	:	Reserved for protocol
%3D	=	Otherwise separates key from value
%3F	?	Otherwise starts the query string

Encode the whole URL or just one component?

This is the #1 thing developers get wrong. JavaScript has two functions:

// Encodes the WHOLE URL — preserves :/?#=&
encodeURI('https://api.com/search?q=hello world');
// → 'https://api.com/search?q=hello%20world'

// Encodes a SINGLE COMPONENT — encodes :/?#=& too
encodeURIComponent('https://api.com/search?q=hello world');
// → 'https%3A%2F%2Fapi.com%2Fsearch%3Fq%3Dhello%20world'

Rule of thumb: use encodeURIComponent on each query parameter value separately, never on the whole URL. The URL Encoder has a toggle for both modes.

When you actually need to encode

• User search input in query params — ?q=red shoes needs the space encoded.
• Building UTM links — campaign names with spaces, ampersands, or special chars break analytics if unencoded.
• Passing JSON in a URL — quotes and braces all need encoding.
• Filenames in download URLs — non-ASCII filenames must be percent-encoded.
• OAuth redirect URIs — the redirect URL is itself a parameter and needs full component encoding.

Common URL-encoding bugs

• Double-encoding. Encoding an already-encoded string turns %20 into %2520. Decode first, then re-encode if needed.
• Plus-vs-space confusion. In a query string, + usually means space (legacy form encoding); in a path, + means literal plus. %20 always means space and is safer.
• Encoding the entire URL with encodeURIComponent. Breaks :// and the URL no longer works.
• Not encoding non-ASCII text. "café" in a query parameter becomes mojibake on the server unless you encode it (typically as UTF-8: caf%C3%A9).

Encode or decode any URL in 5 seconds

1. Open the URL Encoder / Decoder.
2. Paste your URL or string in the input.
3. Pick Encode or Decode and choose URI vs component mode.
4. Copy the output.

URLs for content vs URLs for data

Percent-encoding is for transport — programmatic URLs where the receiver will decode. For human-facing blog or product URLs, use the Slug Generator instead — it lowercases, strips accents, replaces spaces with hyphens, and drops anything not URL-safe. The result is short, readable, and great for SEO: /blogs/why-react-server-components vs /blogs/Why%20React%20Server%20Components%21.

FAQ

What does %20 mean in a URL?

It’s the percent-encoded form of a space character (ASCII 32 = hex 20).

encodeURI vs encodeURIComponent — which one?

encodeURIComponent for individual query parameter values; encodeURI for an entire URL where the structural characters should be left alone.

Is + the same as %20?

Inside a query string, usually yes (form-encoded). Inside a path or hash, no — there + is literal. %20 is unambiguous.

Why do my UTM parameters break with spaces?

Spaces split your URL or get auto-translated to + by some platforms. Always URL-encode campaign names containing spaces or punctuation.

URL toolkit

• URL Encoder / Decoder — percent-encoding both ways.
• Slug Generator — readable URLs from any title.
• Text Cleaner — strip stray whitespace/newlines from pasted URLs.