URL Encoder / Decoder

What is a URL Encoder / Decoder?

A URL encoder rewrites text so it can travel safely inside a web address, and a decoder turns that encoded text back into the original. This tool does both: the Encode tab converts text into a percent-encoded string, and the Decode tab converts a percent-encoded string back into readable text. It runs entirely in your browser and is built for preparing query parameters, path segments, and form values that must not break a URL.

What does this tool do?

It converts in two directions. Encode takes your text and replaces unsafe and reserved characters with percent-escapes; Decode takes that encoded string and restores the original characters. Switching tabs relabels the boxes so you always know which side is the input. The output updates live as you type or paste, and a Copy button puts the result on your clipboard. If you paste something with an invalid percent sequence while decoding, it shows a clear error instead of a wrong answer.

How does it work?

Encoding uses the JavaScript function encodeURIComponent. It scans your text and leaves the unreserved characters untouched — the letters A-Z and a-z, the digits 0-9, and the marks - _ . ! ~ * ' ( ). Every other character is replaced by a percent sign followed by its byte value in two uppercase hexadecimal digits. A space becomes %20, and the reserved structural characters & ? / : # = are percent-encoded so they read as data rather than as parts of the URL.

Characters outside ASCII are first expanded into their UTF-8 bytes, then each byte is percent-encoded, so a single accented or emoji character may turn into several %xx groups. Decoding uses decodeURIComponent, the exact inverse: it reads each %xx triple, converts the hex back to a byte, and reassembles the original text. Because a percent sign must always be followed by two valid hex digits, a malformed sequence (a lone % or %ZZ) cannot be decoded and the tool reports an error rather than guessing.

Examples

Here are worked examples you can reproduce exactly in the tool. Each encode is fully reversible with the Decode tab.

Example 1: “free tools & calc” becomes free%20tools%20%26%20calc. The two spaces and the ampersand are the only characters that change.

• Each space is encoded as %20.
• The & is a reserved character, so it becomes %26.
• The letters stay as-is: free%20tools%20%26%20calc.

Example 2: “a/b?c=1” becomes a%2Fb%3Fc%3D1. Every reserved structural character is escaped.

• / becomes %2F, ? becomes %3F, and = becomes %3D.
• Letters and the digit 1 are unreserved, so they stay.
• Result: a/b?c=1 becomes a%2Fb%3Fc%3D1.

Example 3: “café & co” becomes caf%C3%A9%20%26%20co. The accented letter expands into two UTF-8 bytes.

• é is two UTF-8 bytes, encoded as %C3%A9.
• The space becomes %20 and the & becomes %26.
• Result: café & co becomes caf%C3%A9%20%26%20co.

Decoding reverses each one: paste free%20tools%20%26%20calc, a%2Fb%3Fc%3D1, or caf%C3%A9%20%26%20co into the Decode tab and you get free tools & calc, a/b?c=1, and café & co back exactly.

Reserved character reference

These are the common reserved and unsafe characters and how encodeURIComponent encodes them. Unreserved characters in the last row are never changed.

Character	Name	Encoded as
(space)	Space	%20
&	Ampersand	%26
?	Question mark	%3F
/	Slash	%2F
:	Colon	%3A
#	Hash	%23
=	Equals	%3D
+	Plus	%2B
@	At sign	%40
A-Z a-z 0-9 - _ . ! ~ * ' ( )	Unreserved	unchanged

Common uses

URL encoding is needed anywhere text becomes part of a web address. Common situations include:

• Developers encode individual query-string values, path segments, and form fields so characters like & and = do not split a URL into the wrong pieces.
• Marketers encode UTM campaign values and tracking parameters that contain spaces, ampersands, or punctuation so analytics tools read them correctly.
• API users encode search terms and IDs before placing them in a request URL, then decode response values that arrived percent-encoded.
• Students and learners use it to see exactly which characters are reserved and how a space, slash, or ampersand maps to its %xx escape.

If you are handling other text and data formats alongside this, the base64 encode/decode tool and the JSON formatter cover neighbouring jobs.

Tips and common mistakes

A few misunderstandings cause most URL-encoding problems:

• Encode each value, not the whole URL. Run encodeURIComponent on a single parameter value; encoding an entire URL would escape the : and / that the address needs.
• A space is %20, not always +. This tool always produces %20. The + form is a form-encoding convention; mixing the two can corrupt values on decode.
• Reserved characters carry meaning. Leaving a raw & or = inside a value can split your query string, which is exactly why they are encoded to %26 and %3D.
• Decode expects valid escapes. A lone % or an invalid pair like %ZZ is not decodable and returns an error. Re-encode the source rather than hand-editing percent codes.
• Double-encoding is a trap. Encoding already-encoded text turns %20 into %2520. Decode once back to plain text before re-encoding.

Limitations and notes

This tool uses encodeURIComponent and decodeURIComponent, so it encodes the full set of reserved characters and is the right choice for single URL components rather than complete addresses. It does not produce the + style of space used by some form encoders, and it does not auto-detect double-encoded input. Decoding rejects malformed percent sequences with an error instead of guessing. Everything runs entirely in your browser with JavaScript — your text is never uploaded, logged, or stored, which makes it safe for sensitive snippets and offline use once the page has loaded.

For related developer conversions, try the hex to rgb converter or the UUID generator, and browse the full Dev & Tech tools collection.