Developer Tools

URL Encoder / Decoder — Percent-Encode and Decode URLs

Encode or decode URLs and query strings instantly. Supports encodeURIComponent, encodeURI, and query string formats. Breaks down URLs into protocol, host, path, and parameters.

0 chars
Mode:
🔒Your data never leaves your browser — all encoding and decoding runs locally in JavaScript.

What Is URL Encoding?

URL encoding (also called percent encoding) converts characters that are not allowed or have special meaning in a URL into a safe representation. Each unsafe byte is replaced with a percent sign followed by two hexadecimal digits — for example, a space becomes %20, and an ampersand becomes %26. The encoding is defined in RFC 3986.

URLs can only contain a limited set of characters from the ASCII character set. Characters outside this set — including spaces, international characters, and most punctuation — must be encoded before they appear in a URL. Forgetting to encode special characters in query parameters is one of the most common causes of broken API requests and 400 errors.

encodeURIComponent vs encodeURI — Which to Use?

JavaScript provides two built-in functions for URL encoding, and choosing the wrong one is a frequent source of bugs:

How to Encode or Decode a URL

  1. Encode tab: Paste the text or URL component you want to encode. Choose the encoding mode (encodeURIComponent for query values, encodeURI for full URLs). The encoded output appears instantly with encoded characters highlighted in amber.
  2. Decode tab: Paste any percent-encoded URL or string. The tool decodes it and, if the input is a valid URL, shows a breakdown of each component: protocol, host, path, query parameters, and hash fragment.
  3. Load sample: Click the “Load sample” button in the Decode tab to see a realistic example URL with multiple query parameters.

FAQ

Frequently Asked Questions

What is URL encoding (percent encoding)?

URL encoding converts characters that are not allowed or have special meaning in a URL into a safe representation. Each unsafe byte is replaced with a percent sign followed by two hexadecimal digits — for example, a space becomes %20, and an ampersand becomes %26. This is necessary because URLs can only contain a limited set of ASCII characters, and special characters like spaces, quotes, and international letters must be encoded before appearing in a URL.

When should I use encodeURIComponent vs encodeURI?

Use encodeURIComponent for individual query parameter values — it encodes ?, &, =, /, and : which would otherwise be misinterpreted as URL structure. Use encodeURI for encoding a complete URL while keeping its structure intact — it preserves /, :, ?, #, &, and = so the URL remains navigable. A common mistake is using encodeURI on a query value containing & or =, which leaves those characters unencoded and breaks the query string.

What is the difference between %20 and + for spaces?

Both %20 and + represent a space in URLs, but in different contexts. %20 is the percent-encoded form of a space character as defined in RFC 3986 — it is always safe to use anywhere in a URL. The + sign represents a space only in the application/x-www-form-urlencoded format used by HTML forms (query strings only). Outside of query strings — for example, in the path segment — a + is a literal plus sign, not a space. When in doubt, use %20.

How do I decode a URL with special characters?

Paste the percent-encoded URL into the Decode tab. The tool calls decodeURIComponent on the input, which converts %20 back to spaces, %26 to &, %3D to =, and so on. If the input is a valid URL, the tool also shows a breakdown of each component so you can see query parameters decoded individually rather than having to parse them manually.

Why does my URL have %2F in the path?

%2F is the percent-encoded representation of a forward slash (/). If you encode a full URL path component using encodeURIComponent, slashes get encoded to %2F, which many servers treat as a literal %2F rather than a path separator — this can cause 404 errors. For URL paths, use encodeURI instead (which preserves slashes), or encode each path segment individually without encoding the slashes between them.

Related Tools

← All tools