URL Encoder / Decoder

Encode and decode URLs in either <code>encodeURIComponent</code> or <code>encodeURI</code> semantics. Paste a full URL and the dissection panel breaks it into protocol, host, port, path, query, and hash — query parameters render as editable key/value rows. Batch mode handles one URL per line.

What URL encoding is

A URL is ASCII. Anything outside ASCII — most of human language, and a long list of reserved punctuation — has to be percent-encoded so the URL stays parseable across servers, proxies, and logs. The encoding is byte-level: each non-safe byte becomes %HH (two hex digits).

Two encoders, two contexts:

• encodeURI — encodes a complete URL. Leaves URL syntax characters intact.
• encodeURIComponent — encodes a single component (a query value, a path segment). Encodes everything except unreserved characters.

When in doubt, use encodeURIComponent — it cannot produce a wrong-by-default URL when used on the right input, while encodeURI quietly fails when you give it a value that contains URL syntax.

URL parts panel

Paste any URL and the parser breaks it down:

https://api.example.com:8080/v1/users?role=admin&active=true#section
─────  ───────────────  ──── ──────── ──────────────────────  ───────
proto  host             port path     query                   hash

The query becomes a table of key/value rows you can edit. The reconstructed URL re-emits with proper encoding on every change.

Common workflows

Build a tracking link safely. Compose ?utm_source=...&utm_medium=...&q=... with values that contain spaces, ampersands, or non-ASCII. Drop them in the editable rows and copy the encoded URL back out.

Decode a redirect target. Open a URL with ?next=https%3A%2F%2F.... Paste here, the inner URL surfaces clean.

Inspect a webhook target. Long encoded URLs from the platform side make debugging painful. Decode here, see the actual target.

Audit production URLs for double-encoding. A common bug — %2520 instead of %20. The decoder makes it visible (the result has a literal % in it).

Why encoding is still a footgun

Every modern framework abstracts URL building. Most do it correctly. The bugs surface at boundaries — a hand-rolled URL string concatenation, a webhook payload from a less-careful service, a query parameter passed through three systems each making different assumptions. Having a tester one tab away closes the diagnosis loop fast.

Last updated: 2025-01-15