What do « encoder » and « decoder » mean for a URL?
Encoding a URL (« url encode », « urlencode ») turns every character that is not allowed in an address — space, accent, ampersand, plus sign — into a sequence made of a percent sign followed by the two hexadecimal digits of its byte. Decoding a URL (« url decode », « decoder url ») reads those sequences backwards: the bytes are rebuilt and then converted into characters using the declared encoding, most often UTF-8. That is exactly the pair people look for when they type « encoder decoder url » or « percent encoding online ».
Percent-encoding is neither compression nor encryption: an accented word becomes twice as long, and anyone can read it at a glance. Its only job is to pass any byte through a URL, which by default accepts only a subset of ASCII. Base64, on the other hand, carries bytes over fully textual channels — the two look alike but are not interchangeable.
How to encode a URL in percent-encoding
Step 1: the text is converted into bytes using the chosen character set, UTF-8 by default. Step 2: for each byte, we check whether the matching character belongs to the list of characters allowed for the selected scope. Step 3: if it does, it is copied as is; otherwise it becomes %XX, with XX being the two hexadecimal digits of the byte. Step 4: if the space as + option is enabled, byte 32 is replaced by a plus sign instead of %20.
Concrete example: « café & été » in component scope gives caf%C3%A9%20%26%20%C3%A9t%C3%A9. Just type this text into the encoder: the result, the input size, the output size and the overhead appear before you even release the key.
The four encoding scopes
The component scope only keeps letters, digits and - _ . ! ~ * ' ( ) : it is the scope of a parameter value, and it matches encodeURIComponent. The query string also keeps ampersands and equal signs, so you can rebuild a whole query string. The path segment allows / : @ & = + $ , ; so that slashes are not broken. The Full URL adds ?, #, [ and ] : almost nothing is escaped, only spaces and non-ASCII characters become %XX.
How to decode an encoded URL
Decoding scans the string left to right: a percent sign followed by two hexadecimal digits gives a byte, any other character is copied over after conversion with the chosen encoding. The bytes are then grouped and turned into characters — two bytes for « é », three for « 日 », four for an emoji. The « Decode » tab shows every sequence found, its position in the string, its bytes and the matching text.
If the percent sign is not followed by two valid digits, the error is explicit: incomplete sequence or invalid hexadecimal character. The « Fix the % signs » button turns lone percent signs into %25, which makes the string decodable without losing information — the safest option for handling a partially escaped URL.
Space: %20 or + — the form rule
%20 is the strict percent-encoding space: it works in the path, the query, the fragment and the headers. The +, on the other hand, is a space only in the application/x-www-form-urlencoded format used by HTML forms and historically by query strings. Elsewhere it stays a literal plus sign — and since it is easy to confuse, it has to be escaped as %2B as soon as you encode a value.
In practice: to fill in a form field or reproduce the behaviour of a <form>, tick « Space as + ». For a redirect URL, a canonical or a shared link, always prefer %20. The decoder, on the other hand, treats + as a space by default, and you can switch this behaviour off in one click.
RFC 3986: unreserved, sub-delims and gen-delims
RFC 3986 splits ASCII characters into three categories. The unreserved characters — letters, digits, - _ . ~ — are always kept as they are. The sub-delimiters ! $ & ' ( ) * + , ; = and the generic delimiters : / ? # [ ] @ carry a structural meaning: they separate the authority, the path, the query and the fragment. Everything else — space, quotes, angle brackets, braces, percent sign — has to be encoded.
These are exactly the categories the « RFC 3986 & reference » tab shows character by character: click a tile to see its hexadecimal code, its category and the scopes that keep it. It is the quickest reference for answering the question « do I have to escape this character? ».
Accented characters, emojis and UTF-8
A URL only carries safe ASCII bytes, so every character beyond U+007F has to be encoded. In UTF-8, « é » is C3 A9 and becomes %C3%A9, « 日 » takes three bytes and yields three sequences, an emoji takes four and expands into eight encoded characters. If the result looks long, it is not a bug: it is the price of working with every protocol. Finally, watch the original character set — UTF-8-decoding a string encoded in Latin-1 produces garbage characters, hence the four options offered in the « Decode » tab.
Why encodeURIComponent is not always enough
encodeURIComponent encodes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( ), which suits a parameter value but breaks a full URL, since it also escapes slashes, colons and ampersands. encodeURI does the opposite: it preserves the URL structure but lets spaces and accents through, so it fails on raw text. Both behaviours are covered here — and more, since the « Query string » scope and the « Path segment » scope bridge the gap between them.
Percent-encoding and Base64: two different tools
Percent-encoding replaces byte by byte and keeps the original text readable, at the cost of a much longer string. Base64 groups bytes by three and rewrites them in a 64-character alphabet: compact but completely unreadable, and unusable as is in a URL without the URL-safe variant. The « Cross encodings » tab shows both at a glance, plus hexadecimal bytes, HTML entities and the escaped JSON string — so you can pick the right representation before copying anything.
Common mistakes: double encoding and lone %
The most common mistake is escaping the same string twice: a space becomes %20, then %2520, and the server literally receives « %20 ». The second is forgetting the percent sign itself, which must become %25 — otherwise the decoder reads it as the start of a sequence and crashes or truncates. Finally, keeping a + unescaped in a form parameter amounts to inserting a space you did not ask for. The decoder flags malformed sequences, and the « Fix the % signs » button repairs the second case without data loss.
Where encoded URLs hide
In tracking query strings UTM, in the redirect_uri and state values for OAuth, in the webhooks whose target URL contains nested parameters, in the callback URLs that are signed, in server logs, in sitemaps and canonical links, in the <a href> generated client-side, in the JWT with a Base64URL payload, in the data: and the Location headers, and in any HTML form submitted via GET. Knowing how to encode and decode in a second saves you opening a terminal for a single string.
Performance and best practices
In the browser, encoding and decoding are linear and cost nothing noticeable, even over several megabytes: each character is processed once, with no recursion and no per-character allocation. The only pitfalls are double encoding — always check the round trip before storing — and URLs of several kilobytes, often truncated by proxies beyond 2,000 characters. Document the scope used next to the produced string: « component » and « full URL » do not give the same result on the same text.
Recommended for
Back-end and front-end developers (query strings, redirects, OAuth), integrators and technical writers (UTM links, canonical, tracking), sysadmins and DevOps (webhooks, signed URLs, logs), testers and pentesters (parameter fuzzing, filter bypass), students (understanding UTF-8, ASCII and RFC 3986), and anyone who needs a url encoder decoder online fast, complete and private — plus the base64 encoder decoder and the JSON formatter.
Français
English
Español
Deutsch
Português
中文
हिन्दी
العربية
Русский
Bahasa Indonesia
日本語
Italiano
Türkçe
한국어
Nederlands
Polski
Tiếng Việt