URL Encoder / Decoder Widget

Add a URL encoder and decoder to your web development pages. Readers choose between encoding a single query value, a strict RFC 3986 value or a whole URL, and a broken % sequence is located precisely.

Developer Tools Converter Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/url-encoder" title="URL Encoder / Decoder by A2Z Tools" width="100%" height="570" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Component mode is JavaScript's encodeURIComponent, the right choice for one query-string value or path segment: it escapes everything except letters, digits and - _ . ! ~ * ' ( ). Strict mode also escapes ! ' ( ) * because RFC 3986 reserves them. Full-URL mode is encodeURI, which leaves the URL's structure (: / ? # & =) intact and only escapes spaces and characters outside ASCII. Text is encoded as UTF-8, so é becomes %C3%A9. When decoding fails the widget does not stop at "URI malformed" - it reports whether a % is not followed by two hex digits or whether the bytes do not form valid UTF-8, and at which character.

Method

  • Component: encodeURIComponent (unreserved A-Z a-z 0-9 - _ . ! ~ * ' ( ) kept)
  • Strict: as component, plus ! ' ( ) * escaped (RFC 3986 section 2.2)
  • Full URL: encodeURI (reserved : / ? # [ ] @ ! $ & ' ( ) * + , ; = kept)
  • Form encoding option: space <-> + (application/x-www-form-urlencoded)

Limitations

  • It does not parse a URL into scheme, host, path and query, and does not convert international domain names to Punycode.
  • It cannot tell whether text is already encoded: encoding a%20b again gives a%2520b, so decode first when unsure.
  • Text is always treated as UTF-8; legacy Latin-1 escapes such as %E9 decode as an error, not as the letter é.

Where publishers use it

  • Guides on building query strings for REST APIs
  • UTM and campaign-link tutorials for marketers
  • Debugging redirects and OAuth callback URLs in developer docs
  • Teaching pages that explain percent-encoding and UTF-8

Questions

Which mode should I use?

Use Component for a single value you place after = in a query string. Use Full URL only for a complete address you want to keep working as a link.

Should spaces be %20 or +?

In URLs a space is %20. The + form is only valid in HTML form submissions (application/x-www-form-urlencoded); switch the option on when you are dealing with form data.

What does "not valid UTF-8" mean?

The %XX bytes decode to something that is not a UTF-8 character, often because text was encoded in Latin-1 or cut in the middle of a multi-byte character.

Does the widget open the URL?

No. It only transforms the text; nothing is requested.

Sources

  1. RFC 3986: Uniform Resource Identifier (URI): Generic Syntax - IETF . Section 2.1 percent-encoding, 2.2 reserved and 2.3 unreserved characters
  2. URL Standard: application/x-www-form-urlencoded - WHATWG . Space as + in HTML form data
  3. ECMAScript: encodeURIComponent and encodeURI - Ecma International (TC39) . Exact character sets kept by component and full-URL modes

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools URL Encoder / Decoder
https://a2z.tools/embed/url-encoder

Related widgets

More Developer Tools widgets →

Preview

CustomizeGet code