URL Encoder and Decoder

Input Data

Processed Output

Encoded result will appear here

Supports URL encoding/decoding with full URL structure parsing

About the URL Encoder/Decoder

The URL Encoder / Decoder percent-encodes and decodes URLs and query-parameter values via JavaScript's built-in `encodeURIComponent` / `decodeURIComponent` — the same primitives your application code uses, so the output is bit-for-bit equivalent. Multibyte UTF-8 input (CJK, emoji, accented characters) is encoded correctly, including the surrogate-pair handling that broke many older implementations. The Parsed view also surfaces the structural breakdown of a full URL (protocol, host, path, hash, and per-key query parameters) for easy debugging.

Updated: May 8, 2026

Related Tools

Base64 EncoderDifferent encoding for different purposes — Base64 for binary, URL-encoding for percent-encoded URLs.Try it JSON ViewerDecode percent-encoded JSON values from API responses.Try it cURL ConverterGenerate code that builds URLs with percent-encoded query parameters.Try it JWT DecoderJWTs in URLs are typically percent-encoded — decode here first.Try it QR Code GeneratorEncode the URL before generating a QR code for it.Try it

How to use the encoder

  • Paste your input into the editor. The output appears live (debounced ~300ms) with copy and download buttons in the toolbar.
  • Toggle direction with the Encode / Decode buttons — the swap arrow between them sends the output back into the input with the opposite mode for round-trip verification.
  • Decoding `%E4%B8%AD%E6%96%87` returns 中文 with proper UTF-8 handling. Multibyte sequences and emoji surrogate pairs round-trip correctly.
  • Switch the output panel to Parsed view to see a full URL broken down by protocol, host, path, query parameters (each with raw and decoded values), and fragment.
  • Upload a `.txt` / `.url` file (up to 5 MB) instead of pasting, or save the output back to disk via the toolbar Save button.

Common use cases

  • Building API URLs from user input — encode usernames, tags, search queries that may contain spaces, ampersands, or unicode characters.
  • Decoding URLs from logs — parsing access logs where query parameters arrive percent-encoded; the form scope decodes both `%20` and `+` as space.
  • Generating data URIs — `data:image/svg+xml;utf8,<svg ...>` requires the SVG to be URL-encoded. Component scope encodes the angle brackets and quotes correctly.
  • OAuth redirect URI verification — the `redirect_uri` query parameter must be exactly the value registered with the IdP, percent-encoded the same way. This tool produces what the IdP expects.
  • Manual webhook testing — decode the body of a urlencoded webhook payload (Stripe, Slack, GitHub form-encoded webhook) to read the field values.

Privacy and security

Encoding and decoding run inside your browser using the JavaScript built-ins (`encodeURIComponent`, `encodeURI`, `decodeURIComponent`, `decodeURI`) — the same primitives your application code uses. Nothing is uploaded; URLs containing API tokens, session IDs, or PII stay client-side. The browser DevTools Network tab confirms zero outbound requests during encoding.

Tips and pitfalls

  • Pick the right scope. `encodeURI` (Full URL) preserves URL structural characters; `encodeURIComponent` (Component) encodes everything that is not an unreserved character. Use Component for query parameter VALUES, Full URL for whole-URL escaping.
  • Form scope (`application/x-www-form-urlencoded`) encodes space as `+`, while Component encodes space as `%20`. HTML form submissions and most older APIs expect `+`; modern REST APIs and browsers tolerate both.
  • Double-encoding is the most common bug. If you encode a URL and then encode the result again, `%20` becomes `%2520`. The decoder shows you when input is double-encoded by surfacing the intermediate form.
  • Reserved characters that don't need encoding in a Component context: A-Z a-z 0-9 _ . ~ - (the "unreserved" set per RFC 3986 §2.3). Everything else is encoded for safety.
  • Surrogate pairs (emoji above U+FFFF) need careful handling. Naive byte-level encoders mangle them; the JavaScript built-ins handle them correctly via UTF-8 byte sequences.

Frequently Asked Questions

What is URL encoding?
A way of representing characters that have reserved meaning in URLs (or that aren't in the URL alphabet) using `%XX` escape sequences where XX is the byte's hex value. Defined in RFC 3986 §2. A space becomes `%20`, a newline becomes `%0A`, an emoji becomes a multi-byte UTF-8 sequence like `%F0%9F%98%80`.
encodeURI vs encodeURIComponent — which should I use?
encodeURI for whole URLs (preserves `:/?#&=`). encodeURIComponent for query parameter VALUES (encodes `:/?#&=` so they don't terminate the value early). For form submissions, use Component scope and replace spaces with `+`.
Why does my decoder return invalid UTF-8 for some inputs?
The input was URL-encoded with a non-UTF-8 byte sequence — common with old systems that encoded as ISO-8859-1 or windows-1252. The decoder rejects malformed UTF-8 to avoid silently producing garbage. If you know the original encoding, you may need a custom decoder.
How do I encode an emoji in a URL?
Use Component scope. JavaScript's encodeURIComponent handles surrogate pairs correctly: 😀 (U+1F600) becomes `%F0%9F%98%80` (4-byte UTF-8 sequence). Paste the raw emoji into the input — no need to handle surrogate pairs manually.
What is the difference between URL encoding and HTML encoding?
URL encoding uses `%XX` (RFC 3986). HTML encoding uses `&entity;` (e.g., `&amp;`, `&#x1F600;`) to embed special characters in HTML markup. They serve different purposes and are not interchangeable.
Are reserved characters always encoded?
Only when they would conflict with URL syntax in their context. `&` inside a query string is reserved (separates parameters); inside a path segment it is fine. encodeURIComponent encodes them all to be safe; encodeURI keeps the structural ones. Pick the right scope based on where the value goes.
How does form encoding handle spaces?
application/x-www-form-urlencoded (the default for HTML form POST) encodes space as `+`, not `%20`. RFC 1866 (HTML 2.0) defined this; modern browsers preserve it for backward compatibility. The Form scope in this tool produces this convention; the Component scope produces `%20`.
Can I decode a URL with an encoded fragment?
Yes — the encoder/decoder treats the entire input as a string. Fragment encoding (the `#section-id` part) follows the same rules as path component encoding. Decode the whole URL and the fragment decodes alongside path and query.