URL Encoder / Decoder
Cleanly encode and decode URL query parameters safely.
The URL Encoder / Decoder is a focused two-mode utility for percent-encoding text and decoding URIs safely. The mode pill at the top — "Current Mode: encode" or "decode" in brand color — always tells you which direction is active, while labels switch between "Input (Raw Text)" / "Output (Encoded URI)" and "Input (Encoded URI)" / "Output (Decoded Text)" so you never paste into the wrong box. Conversion runs live as you type, with no Convert button in the way.
Encode mode wraps your text in encodeURIComponent — ideal for query values, since it encodes / : ? & and friends rather than assuming a full URL structure. Decode mode wraps decodeURIComponent in a try/catch, mapping URIError to a clear "Malformed URI component: Cannot decode." message instead of a raw stack. "Swap Direction" flips the mode and pipes the current output back into the input for round-trip testing, and everything stays a pure string transform in the browser.
How it works
Encode mode simply applies encodeURIComponent(input); decode mode applies decodeURIComponent(input) inside a try/catch where a thrown URIError is rewritten to "Malformed URI component: Cannot decode." and any other error falls back to err.message or "An unknown error occurred." A useEffect re-runs the transform on every input or mode change, so the output pane is always current.
"Swap Direction" toggles the mode, moves the current output into the input, and clears any stored error — making round-trip testing (encode then decode) a single click. The copy icon button (title "Copy to clipboard") confirms with a "Copied to clipboard" toast, and "Clear" resets input, output, and error together. There is no network involvement: these are native JavaScript string functions only.
How to use
- Note the mode pill — it starts at "Current Mode: encode".
- Paste raw text into "Input (Raw Text)" (placeholder "Paste your text to encode here...") — output updates live as "Output (Encoded URI)".
- Click "Swap Direction" (ArrowLeftRight icon) to flip to decode; the input label becomes "Input (Encoded URI)".
- If decoding fails on a bad % sequence, the red box shows "Malformed URI component: Cannot decode."
- Copy the result with the copy icon (title "Copy to clipboard") — a toast confirms "Copied to clipboard".
- Click "Clear" (Trash2 icon) to reset input, output, and error at once.
Tips
- Encode uses encodeURIComponent, which also encodes / : ? & — perfect for a single query value, not for encoding an entire URL path.
- "Swap Direction" preserves your output as the next input, so you can verify round-trips without retyping.
- Errors clear automatically as soon as the input becomes valid again — no manual dismiss needed.
URL Encoder / Decoder FAQ
Does it use any encoding library?
No — the entire conversion is the native encodeURIComponent / decodeURIComponent pair called in UrlEncoderPage.tsx.
What does the malformed URI error mean?
decodeURIComponent threw URIError on a bad % escape sequence (for example a trailing % or %GG); the page maps that to "Malformed URI component: Cannot decode."
Is my data uploaded?
No — it is a pure string transform running in the browser; nothing is sent anywhere.
How do I switch direction?
The "Swap Direction" button toggles the mode and pipes the current output back into the input for the opposite operation.
Credits
- encodeURIComponent / decodeURIComponent — Entire conversion is these two native functions in UrlEncoderPage.tsx