Development Tools
URL Encode / Decode — encodeURIComponent & decodeURIComponent
URL-encode or decode text free with encodeURIComponent and decodeURIComponent tabs. Not HTML entity encoding — encode your query strings now.
URL Encode Decode on FYN Tools is a free Development Tools utility. Open URL Encode Decode in your browser — no signup required. Choose URL Encode or URL Decode tabs, paste text, click the action button, and copy the result — encoding uses encodeURIComponent and decoding uses decodeURIComponent. This is not HTML entity encode/decode (&, <, etc.). Related: Base64 Converter.
Privacy & processing: Encoding and decoding run entirely in your browser using native encodeURIComponent and decodeURIComponent. No HTML entity translation is performed.
TL;DR: Choose URL Encode or URL Decode tabs, paste text, click the action button, and copy the result — encoding uses encodeURIComponent and decoding uses decodeURIComponent. This is not HTML entity encode/decode (&, <, etc.).
Reviewed by FYN Tools Editorial · Guides ·
Data input / output
| Inputs | Plain text or percent-encoded string in the input textarea |
|---|---|
| Outputs | URL-encoded or decoded plain text in the output panel |
| Formats | Percent-encoding (%XX) via encodeURIComponent rules |
| Limits | Invalid percent sequences on decode show an error toast; empty input shows an empty-input toast |
| Processing | Client-side (browser encodeURIComponent/decodeURIComponent) |
How to Use the URL Encode Decode
- Select the URL Encode tab to escape text for query parameters.
- Paste text into Input Text and click URL Encode.
- Copy the percent-encoded output.
- Switch to URL Decode for the reverse operation.
- Paste an encoded string and click URL Decode.
- Click Clear to reset both input and output.
What is an URL Encode Decode?
The URL Encode tab runs encodeURIComponent on your input, escaping characters unsafe in URL components. The URL Decode tab reverses percent-encoding with decodeURIComponent. Each tab has its own input/output columns and action button.
This tool handles URI component encoding — not HTML entities like & or '. For HTML entity work, use a dedicated HTML tool. Decode errors (malformed sequences) show a destructive toast and clear output.
handleEncode and handleDecode wrap the native functions in try/catch with toast feedback. A Clear button resets both fields. Tab switching preserves separate encode/decode modes.
How it works
You set code, css values, or structured text in the editor in the live panel. URL Encode Decode then encode URLs for safe transmission or decode URL-encoded strings instantly. Results show as formatted / generated code you can copy.
For binary-to-text encoding, use our Base64 Converter.
Usage scenarios
- Query string building: Encode spaces and symbols in a search term before appending to ?q=.
- Redirect debugging: Decode a captured returnUrl parameter to read the original path.
- API testing: Encode JSON fragments used as URL-encoded form values.
Input / Output Examples
Input
hello world & goodbye
Output
hello%20world%20%26%20goodbye
Frequently Asked Questions
What is URL encoding?+
URL encoding converts special characters and spaces into a format that can be safely transmitted in URLs. For example, spaces become %20, and special characters get converted to their percent-encoded equivalents.
When should I use URL encoding?+
Use URL encoding when passing parameters in URLs, especially when the values contain spaces, special characters, or non-ASCII characters. This ensures the URL is valid and the data is transmitted correctly.
What characters are encoded?+
Characters like spaces, quotes, slashes, ampersands, equals signs, and other special characters are encoded. Alphanumeric characters (A-Z, a-z, 0-9) and some safe characters like - _ . ~ are typically not encoded.
Can I encode entire URLs?+
Yes, you can encode entire URLs or just specific parts like query parameters. This tool handles both use cases and properly encodes all necessary characters.
Key Features
- URL Encode tab
- URL Decode tab
- encodeURIComponent encoding
- decodeURIComponent decoding
- Copy and Clear actions
Benefits
Build safe query strings without manual escaping.
Read encoded redirect parameters quickly.
Match JavaScript encoding behavior exactly.
When to Use URL Encode Decode
- Encoding query parameter values before building a URL manually
- Decoding a percent-encoded string from a redirect link
- Preparing user-generated search terms for API requests
- Debugging encodeURIComponent behavior in JavaScript
Advantages
- Separate Encode and Decode tabs
- Native encodeURIComponent/decodeURIComponent
- Copy button on output
- Clear error toasts on bad decode input
Tips
- Use Encode for individual query values, not full URLs with scheme/host.
- Decode failures usually mean truncated or invalid % sequences.
- Spaces become %20 under encodeURIComponent.
- Copy output after each action — fields do not auto-sync.
Common Mistakes
Expecting HTML entity encoding — this is URI percent-encoding only.
Decoding strings that were encoded with encodeURI instead of encodeURIComponent.
Assuming + means space — decodeURIComponent expects %20 for spaces.
Leaving input empty and expecting output without clicking the action.
Summary
Encode with encodeURIComponent or decode with decodeURIComponent — URI component tool, not HTML entity encoding.