The Complete Guide to URL Encoding & Decoding

Every time a browser sends a request, forms a query string, or posts form data, it quietly performs a transformation called URL encoding. Special characters, spaces, and non-ASCII text all get rewritten into a safe, transmittable format before they ever touch the network. When the server receives them, it decodes them back. This round-trip happens thousands of times per second across the web, yet most developers only notice it when something breaks — a malformed link, a missing query parameter, or a 404 on a path that "looked fine."

The good news is you don't need to memorize the rules of RFC 3986 to handle this correctly. Our URL Encoder / Decoder handles the conversion instantly, in both directions, right in your browser. Paste raw text and get percent-encoded output, or paste an encoded string and decode it back to its original form.

In this guide we'll walk through what URL encoding actually does, why it matters for web safety, how to use the tool step by step, and the most common real-world scenarios where a reliable encoder/decoder saves you from subtle bugs.

Why Use a URL Encoder/Decoder?

• Prevent broken links. Spaces, ampersands, and other reserved characters can change the meaning of a URL. Encoding them guarantees the address arrives intact.
• Protect special characters in query strings. A & inside a value would otherwise be read as a parameter separator; %26 keeps it as literal data.
• Support international text. Thai, Chinese, Arabic, and emoji all become URL-safe percent sequences that travel cleanly across servers.
• Build correct API payloads. REST and webhook endpoints expect properly encoded parameters — a missing encode is a frequent source of 400 errors.
• Debug quickly. Pasting a garbled link into a decoder instantly reveals what was actually sent, speeding up troubleshooting.
• Avoid manual mistakes. Hand-encoding strings is error-prone; a tool guarantees RFC 3986-compliant output every time.

Key Features

The tool runs entirely in your browser, so your data never leaves your device — important when you're encoding sensitive tokens or query parameters. Real-time conversion means you can experiment freely: tweak the input and watch the percent-encoded output update instantly. And because both directions share the same simple interface, you'll never fumble between two separate pages.

How to Use the URL Encoder/Decoder

1. Select your mode. Open the URL Encoder / Decoder and make sure Encode (or Decode) is active. Use the swap toggle to flip directions at any time.
2. Paste your input. Drop in the text, URL, or query string you want to convert into the input box.
3. Watch the result appear. The output updates in real time — no need to click a button.
4. Copy the output. Click "Copy" to send the converted string to your clipboard and paste it wherever you need it.
5. Decode it back. Swap to the opposite mode, paste the encoded string, and confirm you get the original text — a quick round-trip check.

Understanding URL Encoding (Percent Encoding)

URLs can only be sent over the internet using a limited set of ASCII characters. Letters, digits, and a handful of symbols (-, _, ., ~) are "unreserved" and pass through untouched. Everything else — spaces, punctuation, non-ASCII letters, control characters — must be replaced with a % followed by two hexadecimal digits. This is defined formally in RFC 3986, the standard that governs URL syntax.

Some of the most common encoded characters:

encodeURIComponent vs encodeURI. JavaScript exposes two functions, and choosing the wrong one is a classic bug:

• encodeURI is meant for whole URLs. It leaves reserved characters like :, /, ?, and & intact so the overall structure stays valid.
• encodeURIComponent is meant for individual query-parameter values. It encodes those reserved characters too, so a & inside your data doesn't get mistaken for a separator.

A quick example makes the difference concrete:

const value = 'a b&c';

// For a full URL — keeps structure intact:
encodeURI('https://ex.com/search?q=' + value);
// → "https://ex.com/search?q=a%20b&c"  ← WRONG! '&c' becomes a new parameter

// For a single parameter value — encodes the '&':
'https://ex.com/search?q=' + encodeURIComponent(value);
// → "https://ex.com/search?q=a%20b%26c"  ← CORRECT

The rule of thumb: encode components (individual values) with encodeURIComponent, and reserve encodeURI for when you already have a complete, well-formed URL that just needs unsafe characters cleaned up.

Practical Use Cases

Query parameters in API calls

When you send a search term to a REST endpoint, any space or symbol in the term must be encoded:

GET /api/search?q=hello%20world%26more

Without encoding, the server would split on & and only receive hello world while more would be parsed as a separate, empty parameter — silently dropping data.

UTM tracking links

Marketing links are packed with UTM parameters, and campaign names often contain spaces or special characters. Encoding each value ensures your analytics platform records the campaign correctly:

https://example.com/?utm_source=newsletter&utm_campaign=summer%20sale%202026

Internationalization (Thai / Chinese characters)

Non-ASCII text must be encoded to travel over HTTP. A Thai greeting like สวัสดี or Chinese 你好 becomes a long percent-encoded sequence:

สวัสดี  →  %E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5
你好     →  %E4%BD%A0%E5%A5%BD

The tool handles UTF-8 encoding transparently, so you can paste any language and get standards-compliant output.

Encoding data for redirects

When you redirect a user and pass state along in the query string (such as a next URL or an error message), nested URLs and special characters can corrupt the link. Encoding the value prevents ambiguous parsing:

/login?next=%2Fdashboard%3Fwelcome%3D1

Here /dashboard?welcome=1 is safely nested inside the next parameter without confusing the router.

Best Practices

• Always encode user input before placing it in a query string. Untrusted text can contain &, =, or # that silently break the URL.
• Know when to use encodeURIComponent vs encodeURI. Encode individual values, not whole URLs, unless you're cleaning a known-good address.
• Validate before decoding. A stray % followed by non-hex characters is invalid; catch it early rather than letting it reach your parser.
• Avoid double-encoding. Encoding an already-encoded string turns %20 into %2520. If output looks overly percent-heavy, you probably encoded twice.
• Test with non-ASCII input. Thai, Chinese, emoji, and right-to-left scripts all exercise the UTF-8 path that ASCII-only tests miss.
• Use a reliable tool for one-off conversions. Hand-rolling percent encoding invites subtle bugs; the URL Encoder / Decoder guarantees RFC 3986-compliant output.

Try the URL Encoder/Decoder

Whether you're debugging a broken link, building an API call, or crafting the perfect UTM tracking URL, percent-encoding is non-negotiable. Skip the manual hex lookups and head straight to the URL Encoder / Decoder — paste your text, copy the result, and ship with confidence.

Related Tools You Might Like

• Base64 Encoder/Decoder
• JWT Decoder
• JSON Formatter

Happy encoding!