URL Encoder & Decoder

Encode or decode URLs with percent-encoding. Choose encodeURI or encodeURIComponent. UTF-8 safe.

Related Tools

Free Online URL Encoder & Decoder — Percent Encoding

URL-encode special characters to their percent-encoded form, or decode percent-encoded strings back to readable text — both modes share one panel with a quick toggle. UtilHub handles spaces, ampersands, slashes, query separators, and full UTF-8 input (including emojis and CJK characters). Switch between encodeURI mode for whole URLs and encodeURIComponent mode for individual query values to match how your backend parses parameters. Unlike urlencoder.org and urldecoder.org which split encode/decode across separate domains, you get both in one place — and processing is purely client-side, so even sensitive query strings stay local.

How to use URL Encoder & Decoder

  • Toggle the mode to "Encode" or "Decode".
  • Choose encodeURI (whole URL) or encodeURIComponent (single value).
  • Paste your text — input is processed instantly as you type.
  • Click "Swap" to feed the output back as the next input.
  • Click "Copy" to send the result to your clipboard.

Features

  • Encode & decode in one toggle — No separate pages — switch direction with one click and reuse the same panel.
  • encodeURI vs encodeURIComponent — Pick the right RFC 3986 rule for whole URLs versus single query values; they behave differently and using the wrong one is a top API-debugging trap.
  • Full UTF-8 support — Multi-byte characters including emojis and CJK convert to the correct percent-encoded byte sequences via TextEncoder.
  • No server round-trips — Pure client-side processing using native JavaScript. Nothing logged, stored, or transmitted.

Frequently Asked Questions

What is URL encoding and why do I need it?

URL encoding (also called percent-encoding) converts characters that have special meaning in a URL — or that fall outside ASCII — into a safe transport form. A space becomes <code>%20</code>, an ampersand becomes <code>%26</code>, a hash becomes <code>%23</code>. You need it whenever you build query strings programmatically, embed user input into URLs, or pass non-ASCII values like emoji or CJK text in links.

What's the difference between encodeURI and encodeURIComponent?

<code>encodeURI()</code> encodes a full URL but leaves characters like <code>:</code>, <code>/</code>, <code>?</code>, <code>#</code>, and <code>&</code> intact because they have structural meaning. <code>encodeURIComponent()</code> encodes everything except letters, digits, and a few safe characters — use it for individual query parameter values. Using encodeURI where encodeURIComponent is needed is the most common URL bug; this tool exposes both so you can verify.

Does this tool decode UTF-8 emojis and non-ASCII characters?

Yes. When decoding, multi-byte percent sequences (like the four <code>%F0%9F%98%8A</code> bytes for 😊) are reassembled into the original Unicode character using TextDecoder. Many naive URL decoders fail on multi-byte input and produce mojibake — UtilHub uses the browser's native UTF-8 implementation, so emojis, CJK characters, and accented Latin letters round-trip correctly.