URL encoding (also called percent-encoding) makes text safe for inclusion in URLs by replacing non-URL-safe bytes with %HH hexadecimal escapes. This prevents broken links, malformed parameters, and decoding errors across browsers, servers, and APIs. 🔗

What you can do

• Encode readable text into percent-encoded form for safe transport in URLs.
• Decode percent-encoded text back to its readable form.
• Swap fields to quickly chain conversions while testing and debugging.

How it works

• Encode follows encodeURIComponent semantics, encoding all characters except unreserved ones defined by RFC 3986.
• Decode uses decodeURIComponent logic and also treats + as a space for common form/query usage.

Reserved vs. unreserved characters (RFC 3986)

Buttons

• Encode »: Convert the left textarea to percent-encoded form and show it on the right.
• Decode »: Convert percent-encoded input on the left back to readable text.
• « Swap »: Swap left/right fields to continue in the opposite direction.
• Copy Result 📋: Copy the right text output to the clipboard.
• Erase: Clear both fields.
• Demo: Fill the input with a sample URL or snippet.

How to use

1. Paste a URL part (for example, a query value) or plain text into the Input field.
2. Click Encode to percent-encode, or Decode to make it readable.
3. Use Swap to reuse the result for another step.
4. Click Copy Result when ready to paste elsewhere.

Examples

• Text: Hello world! → Encode → Hello%20world%21
• Query value: coffee & cream → Encode → coffee%20%26%20cream
• Decode: q=hello%2Bworld → q=hello+world (plus preserved; treated as space in HTML forms)

Tips & best practices

• Encode only the component you are inserting (for example, a query value), not the entire URL, to avoid double-encoding ⚠️
• In query strings, + often represents a space; this tool decodes it as space for convenience.
• If you need to presevre a literal +, encode it as %2B.

JavaScript helpers: encodeURI() vs encodeURIComponent()

JavaScript provides two closely related functions for URL encoding: encodeURI() and encodeURIComponent(). Both perform percent-encoding, but they are designed for different use cases. ⚙️🔍

Understanding the difference is important to avoid breaking URLs or accidentally double-encoding characters.

Key difference

• encodeURI() is intended for encoding a full URL. It preserves characters that have special meaning in a URL's structure (such as :, /, ?, #, &, =).
• encodeURIComponent() is intended for encoding a single URL component (such as a query parameter value). It encodes many more characters to ensure the value cannot interfere with the URL structure.

Comparison

Examples

• encodeURI("https://example.com/search?q=coffee & cream")
  → https://example.com/search?q=coffee%20&%20cream
• encodeURIComponent("coffee & cream")
  → coffee%20%26%20cream

Best practices

• Use encodeURI() only when encoding an entire URL 🧭
• Use encodeURIComponent() for individual parameters and user input
• Never encode the same value twice unless you explicitly need double-encoding

Notes & limitations

• Different URL parts (path, query, fragment) follow slightly different encoding rules.
• Double-encoding (for example, turning % into %25) is a common cause of broken links.
• This tool is intended for text and URL components, not full binary payloads.

Learn more

• Percent-encoding (Wikipedia)
• RFC 3986 - Uniform Resource Identifier (URI)
• encodeURIComponent on MDN Web Docs