Skip to content
Developer

URL Encoder / Decoder

Encode or decode URL components and full URLs.

urlencodedecodeuripercent
Loading tool…

About the URL Encoder / Decoder

The URL Encoder / Decoder handles percent-encoding in both directions with an explicit choice between the two JavaScript encoders people actually reach for. On the Encode tab, a radio group switches between encodeURIComponent — the strict mode that also encodes reserved characters like / : ? & = — and encodeURI, which preserves those characters so a full URI keeps its structure and only spaces and other unsafe glyphs become %xx sequences. This distinction is what prevents the classic mistake of double-encoding query strings or destroying a URL's slashes. The Decode tab runs decodeURIComponent on your input and rejects malformed sequences cleanly with a Malformed URI sequence toast explaining that the percent-encoding is invalid, rather than emitting broken text. A Load sample button drops in a realistic URL containing spaces, query parameters, and a subdomain so you can see the two modes differ on the same input, and a Clear button wipes both tabs. Outputs download as encoded-url.txt or decoded-url.txt. Whether you are building query strings for an API call, decoding a campaign link from analytics, or debugging why a redirect 404s, this is the tool for it.

URL Encoder / Decoder examples

Input
https://example.com/search?q=hello world&lang=en-US&safe=true (strict mode)
Output
https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den-US%26safe%3Dtrue
Note: The Load sample URL under encodeURIComponent — reserved characters like : / ? & = are percent-encoded, making the whole string safe as a single component.
Input
https://example.com/search?q=hello world&lang=en-US&safe=true (encodeURI mode)
Output
https://example.com/search?q=hello%20world&lang=en-US&safe=true
Note: Switching the radio to encodeURI keeps the URL structure intact and only encodes the space inside the query value.
Input
hello%20world%26lang%3Den-US (Decode tab)
Output
hello world&lang=en-US
Note: The Decode tab reverses percent-encoding with decodeURIComponent; malformed sequences show a Malformed URI sequence toast and stay empty.

How to use the URL Encoder / Decoder

  1. 1

    Open the Encode tab and paste or type the text to percent-encode.

  2. 2

    Choose the encoding mode: encodeURIComponent (strict) or encodeURI (full URI).

  3. 3

    Read the encoded result instantly in the Encoded output box.

  4. 4

    Switch to the Decode tab to reverse a percent-encoded string with decodeURIComponent.

  5. 5

    Use Load sample and Clear as needed, and download results as encoded-url.txt or decoded-url.txt.

Common use cases

  • Building safe query-string values for an API request in a client script.
  • Decoding UTM or campaign parameters copied from an analytics URL.
  • Preparing a value for a redirect or deep-link URL without breaking reserved characters.
  • Double-checking why a URL 404s by decoding suspicious %xx sequences.
  • Encoding JSON payloads that must travel inside a single query parameter.
  • Converting a full URL into a component-safe string for nested links in emails.

Best practices

  • Match the mode to the job: encodeURIComponent for values that go inside parameters, encodeURI for whole URLs.
  • Never encode an already-encoded string — double-encoding turns %20 into %2520 and breaks downstream parsers.
  • Decode once at the boundary where you consume a value, not repeatedly at every layer of your stack.
  • When embedding user input in a URL, encode each component separately rather than the assembled URL.
  • If decoding fails with a malformed-sequence toast, check for stray % characters that are not valid hex pairs.
  • Keep the two tabs' outputs separate — the Encode tab result does not feed the Decode tab automatically.

Tips

  • Start with Load sample to see both modes produce different results from the same URL.
  • Watch the character count hint under each input — a spike after encoding is normal for reserved characters.
  • Use the strict mode when you are unsure: it never breaks a URL because it encodes everything.
  • Decode any link you receive before pasting it into code — hidden percent sequences are a common source of 404s.

Frequently asked questions

encodeURIComponent encodes everything except letters, digits, and - _ . ! ~ * ( ) — including / : ? & = — making it strict and safe for individual values. encodeURI preserves / : ? & = # so a full URL keeps its structure, and only spaces and other unsafe glyphs are percent-encoded.

Use encodeURIComponent for each individual key and value. If you encode the entire assembled URL with it, the separators become %3F and %26 and the result is no longer a valid URL — that is exactly what the strict-mode sample demonstrates.

It uses decodeURIComponent, which throws on malformed percent sequences such as an incomplete UTF-8 sequence. The tool catches this and shows a Malformed URI sequence toast with an explanation, leaving the output empty rather than emitting broken text.

Both modes encode a space as %20. The + form is the application/x-www-form-urlencoded convention used by HTML forms, which is a different encoding — if an API expects +, handle that at the serialization layer.

Yes — paste the whole URL into the Decode tab and decodeURIComponent will reverse every percent sequence, including %26 and %3D, so the decoded string shows the original separators and values.

Encoding is deterministic and reversible for valid UTF-8 text — decoding an encoded string returns the original text. The exception is malformed sequences, which the tool refuses to decode, and characters that were already percent-encoded before you started.

Explore more developer tools

Browse the full collection of developer tools on the hub, or jump back to all categories.

Related tools

Did this tool help?

Anonymous — one tap, no sign-up.