URL Encoder Decoder

The URL encoder decoder is a free browser-based utility that converts ordinary text into percent-encoded format and decodes percent-encoded strings back to their original form. URLs on the web allow only a restricted set of characters: letters, digits, hyphens, underscores, and periods. Characters like spaces, quotes, ampersands, question marks, brackets, carets, and non-ASCII symbols must be encoded as a percent sign followed by two hexadecimal digits. This tool handles both directions using JavaScript native functions encodeURIComponent, encodeURI, decodeURIComponent, and decodeURI. Everything runs inside your browser with zero server communication. You get two encoding methods to choose the right strictness for each use case, live counters that show exactly what happens to your data, and instant auto-updating results.

The mode toggle bar at the top of the tool contains two buttons that determine the direction of the conversion. Click Encode URL to activate encoding mode the input expects plain text and the output produces percent-encoded characters. Click Decode URL to reverse the operation the input accepts percent-encoded strings and the output returns readable text. Every interface element reflects the current mode. The input panel title switches between Plain Text / URL and Encoded URL. The output panel title updates accordingly. The Convert button text changes between Encode and Decode. The textarea placeholder adapts to guide you. The active button lights up with a teal gradient while the inactive button stays neutral, giving you an immediate visual cue. Switching modes preserves your input so you can encode and immediately switch to decode for verification.

The Method radio group below the mode bar controls how aggressively the tool encodes special characters. encodeURIComponent encodes every special character without exception, including :, /, ?, #, @, &, and =. This is the correct choice for encoding query parameter values, form fields, and hash fragments where no character should alter the URL structure. encodeURI preserves URL syntax characters colon, slash, question mark, hash, at sign, ampersand, and equals sign so the encoded string remains a functional web address. Select your method by clicking the radio button. The chosen option highlights with a teal border and background for clear visual feedback. Both methods handle the same unsafe characters: spaces, quotes, angle brackets, backslashes, carets, and non-ASCII text.

The input panel on the left accepts the text or URL you want to process. You can type directly into the monospace textarea. Click the Paste button in the panel header to read content from your clipboard using the Clipboard API it fills the textarea and triggers automatic conversion. The Clear button empties the input, resets the character and line counters to zero, and also clears the output panel. The placeholder text inside the textarea changes dynamically. In Encode mode it says Paste your URL or text here.... In Decode mode it says Paste encoded URL here (e.g. hello%20world). Every keystroke, paste, or clear event fires the conversion automatically through the oninput handler, keeping the output in sync without requiring extra clicks.

The Convert button sits between the two panels and displays an arrow followed by Encode or Decode depending on the active mode. Clicking it reads the input, applies the selected method, and writes the result to the output panel. The output panel displays the result in a readonly textarea with a light teal background to visually distinguish it from the input. The Copy button copies the result to your clipboard it briefly shows a checkmark for two seconds as confirmation, then reverts to the original label. The Clear button empties only the output panel without affecting the input, letting you reset the result while keeping your original text for further editing. The output panel title updates dynamically to show Encoded URL or Decoded URL based on the current mode.

The Swap button performs three operations in a single click. It reads the current output, places it into the input textarea, and automatically switches the mode to the opposite operation. If you were encoding, Swap moves the encoded result to the input and changes to Decode mode so you can verify the round trip. If you were decoding, it does the reverse. The button refuses to operate when the output is empty or contains an error message, preventing accidental invalid swaps. This feature is essential for data integrity testing encode a string, swap, decode, and confirm the output matches your original input. Power users rely on this for every parameter encoding task.

Below each textarea, the tool displays real-time counters that update as content changes. The input footer shows the character count and line count of the input. The output footer shows the character count of the result and a size difference indicator. When encoding, special characters expand from one to three characters (percent sign plus two hex digits), so the output is longer the indicator shows a plus sign and the number of added characters. When decoding, percent-encoded sequences collapse back to single characters, shown with a minus sign. If the lengths match, the indicator reads same size. This feedback helps you understand encoding overhead, which matters when working within browser URL length limits (typically 2000 characters) and server-side constraints.

The URL encoder decoder works on every modern browser and device without installation. On desktop screens, the two panels sit side by side with the Convert and Swap buttons between them for efficient keyboard and mouse workflows. On mobile devices, the layout stacks vertically input at top, control buttons in the middle, output at bottom so the tool remains fully usable on phones and tablets. Copy and Paste use the standard Clipboard API with fallback behavior for older browsers. The tool loads no external scripts beyond the Google Font, making it instant on any connection speed and fully functional offline after the initial visit. Textareas support vertical resize on desktop and smooth scrolling on mobile, accommodating long URL strings on any screen size.