πŸ”—

URL Encoder/Decoder: Percent-Encode URLs Online

Β· 7 min read

Try the tool: URL Encoder/DecoderOpen URL Encoder/Decoder β†’

Every developer has run into a URL that looked like https://example.com/search?q=hello%20world&name=John%20Doe and wondered what those %20 sequences mean β€” or worse, hit a broken API call because a space or ampersand slipped through unencoded. URL encoding is a foundational web skill, and having a fast, reliable tool at your fingertips saves real time. The URL Encoder/Decoder at CodMaker Tools is free, requires no signup, and runs entirely in your browser β€” your data never leaves your machine.

What Is URL Encoding (Percent Encoding)?

URL encoding β€” formally called percent encoding β€” is the process of converting characters that are not allowed or have special meaning in a URL into a safe representation. The encoding scheme replaces each unsafe character with a % sign followed by two hexadecimal digits that represent the character's ASCII (or UTF-8) byte value.

For example:

  • A space ' ' becomes %20
  • An ampersand & becomes %26
  • A forward slash / becomes %2F
  • The @ symbol becomes %40

The rules come from RFC 3986, which defines which characters are reserved (carry structural meaning in a URL), unreserved (safe to use as-is), and which must be percent-encoded everywhere else.

Reserved characters include : / ? # [ ] @ ! $ & ' ( ) * + , ; =. If you need to include one of these literally inside a query parameter value, it must be encoded β€” otherwise the browser or server will misinterpret the URL structure.

Why URL Encoding Matters

Getting encoding right is not optional. Here is what goes wrong when you skip it:

  • Broken query strings β€” An unencoded & inside a parameter value splits the query string at the wrong place.
  • 404 errors β€” Spaces and special characters in path segments cause servers to reject or misroute requests.
  • Security vulnerabilities β€” Unencoded input in URLs can enable injection attacks if your backend trusts raw URL data.
  • API failures β€” REST APIs and OAuth flows are particularly sensitive; a single unencoded + or = in a token or signature can invalidate an entire request.

Key Benefits of Using an Online URL Encoder/Decoder

  • Instant results β€” Paste text, get encoded or decoded output in milliseconds.
  • No installation required β€” Works in any modern browser without plugins or extensions.
  • Privacy-first β€” Because processing happens client-side in JavaScript, your URLs and query parameters never touch a server.
  • Handles full URLs and partial strings β€” Encode an entire URL, a single query parameter value, or a hash fragment independently.
  • UTF-8 aware β€” Properly encodes multi-byte characters like Γ©, δΈ­, or emoji, which are common in internationalized applications.

How to Use the URL Encoder/Decoder

The URL Encoder/Decoder is designed to be immediately obvious, but here is a step-by-step walkthrough:

Encoding a String

  1. Open the tool in your browser β€” no account or signup needed.
  2. Paste or type the text you want to encode into the input field. This can be a full URL, a query parameter value, or any raw string.
  3. Click Encode. The tool applies percent encoding to all characters that require it.
  4. Copy the output and use it wherever you need a safe URL string.

Example:

  • Input: hello world & welcome
  • Output: hello%20world%20%26%20welcome

Decoding a String

  1. Paste the percent-encoded string into the input field.
  2. Click Decode. The tool converts each %XX sequence back to the original character.
  3. Copy the human-readable result for debugging or display purposes.

Example:

  • Input: caf%C3%A9%20menu%3F
  • Output: cafΓ© menu?

Real-World Use Cases and Examples

Building Query Parameters

Query parameters are the most common place encoding goes wrong. Say you are building a search redirect URL:

Base URL: https://example.com/search
Parameter: q = "best coffee shops & cafΓ©s near me"

The & and Γ© must be encoded before the value is appended:

https://example.com/search?q=best%20coffee%20shops%20%26%20caf%C3%A9s%20near%20me

UTM Tracking Links

Marketing UTM parameters often contain spaces, slashes, or special characters that need encoding:

utm_campaign = "Summer Sale / 20% Off"
Encoded:        Summer%20Sale%20%2F%2020%25%20Off

Paste the raw campaign name into the encoder, grab the output, and append it to your UTM link β€” no manual character lookup required.

API Authentication and Tokens

OAuth tokens, API keys, and base64-encoded values frequently contain +, /, and = characters. When these appear in a query string, they must be percent-encoded:

token = "abc+def/ghi=="
Encoded: abc%2Bdef%2Fghi%3D%3D

Debugging Incoming Requests

When your server logs show a request like:

GET /api/users?filter=status%3Aactive%26role%3Dadmin

Paste the query string into the decoder to instantly read filter=status:active&role=admin β€” no mental hex arithmetic needed.

Internationalized URLs (IRIs)

URLs containing non-ASCII characters (Arabic, Chinese, accented Latin) must be encoded for HTTP transport. For example, a French city name:

Input:   Saint-Γ‰tienne
Encoded: Saint-%C3%89tienne

Tips and Best Practices

  • Encode values, not the whole URL structure. If you encode an entire URL including the ://, ?, and & separators, you will break the URL. Encode individual parameter values, then assemble the full URL.
  • Use %20 vs + carefully. In query strings, some systems treat + as a space (HTML form encoding). In path segments, only %20 is correct. The encoder defaults to standard percent encoding (%20), which is universally safe.
  • Double-encoding is a common trap. If you encode an already-encoded string, %20 becomes %2520. Always decode first to confirm the state of your string before re-encoding.
  • Decode before displaying to users. Percent-encoded strings are not meant for human consumption. Always decode before showing URLs in a UI or error message.
  • Test with edge cases. Characters like # (fragment delimiter), ? (query delimiter), and % itself (%25 when literal) are easy to miss.

Common Mistakes to Avoid

  • Forgetting to encode the # character. A literal # in a query value (%23) will be interpreted as the start of a URL fragment by the browser, silently truncating the rest of your URL.
  • Assuming spaces are always %20. Form submissions use application/x-www-form-urlencoded, which encodes spaces as +. When consuming form data versus URL data, use the right decoder for the context.
  • Encoding slashes in path segments when you should not. A URL like /files/2024/report.pdf should not have its slashes encoded; they are structural. Only encode slashes when they appear inside a parameter value.
  • Ignoring character encoding. Percent encoding operates on bytes, not characters. Always use UTF-8 as the underlying character encoding β€” it is the standard for the modern web and what the tool uses by default.

Frequently Asked Questions

What is the difference between URL encoding and Base64 encoding?

URL encoding (percent encoding) makes individual characters safe for use within a URL by replacing them with %XX hex sequences. Base64 encoding converts binary data into a text string using a 64-character alphabet β€” it is used for transmitting arbitrary bytes over text protocols. They solve different problems: use percent encoding for URLs; use Base64 for embedding binary data in JSON, data URIs, or email attachments.

When should I encode a full URL versus just the query parameter values?

Encode only the values, not the full URL. The structural characters β€” https://, the domain, / path separators, ?, and & β€” must remain unencoded so the URL remains parseable. Encode the content that goes into each individual parameter value, then assemble the complete URL.

Why does my encoded URL show %2B instead of +?

The + character has a special meaning in URL-encoded form data (it represents a space). When you percent-encode a literal plus sign, it correctly becomes %2B. If you are seeing %2B where you expected +, the string was likely encoded before being placed in the URL. Decode it first to retrieve the original.

Is it safe to paste sensitive data like API keys into the tool?

Yes. The tool runs entirely client-side in your browser using JavaScript. No data is sent to any server, logged, or stored anywhere. You can safely encode tokens, credentials, or any private strings without privacy concerns.

What characters do not need to be encoded?

Unreserved characters β€” uppercase and lowercase letters (A-Z, a-z), digits (0-9), and the four symbols -, _, ., ~ β€” are safe to use in any part of a URL without encoding. Everything else should be encoded when used in a context where it could be misinterpreted.

Conclusion

URL encoding is one of those small details that causes outsized problems when ignored. Whether you are constructing UTM parameters, debugging API calls, building redirect URLs, or handling internationalized content, getting the encoding right is essential for reliable, secure web applications.

The URL Encoder/Decoder gives you a fast, free, and privacy-friendly way to handle percent encoding without writing a single line of code. Bookmark it β€” you will reach for it more often than you expect.

Ready to use URL Encoder/Decoder?

It is free, requires no signup, and runs entirely in your browser.

Open the URL Encoder/Decoder