URL Encoder / Decoder

Encode and decode URLs instantly. Convert special characters to percent-encoded format with real-time conversion

What Is the URL Encoder / Decoder?

The URL Encoder / Decoder is a free tool that instantly converts between plain text and percent-encoded URL format. Paste a string with spaces, ampersands, or Unicode characters, and it converts every special character into its %XX equivalent — or paste an encoded string like Hello%20World%21 and get the readable original back. The conversion happens in real time as you type.

URL encoding is required whenever data containing special characters is placed inside a URL. Spaces become %20, ampersands become %26, and non-ASCII characters like é or 中 are converted to multi-byte percent sequences. Without encoding, these characters break URL parsing — a query parameter containing an unencoded ampersand would be read as a parameter delimiter instead of data.

This tool uses JavaScript's encodeURIComponent() and decodeURIComponent() for precise, spec-compliant conversion. Everything runs in your browser — no data is sent to any server. If you're building UTM-tagged links, pair this with the UTM link builder to create properly encoded campaign URLs.

Characters

0

Encoded Length

0

Mode

Encode

Status

Idle

Input

Enter text or URL to percent-encode

0 chars

Quick Examples

Try these sample inputs to see URL encoding in action

Output

url-output
Enter text and select a mode to see the result here

Copy Output

Enter text and select a mode to generate output

No output generated yet

Status Checklist

Input text is provided
Text encoded successfully
URL decoded successfully
Input has valid percent-encoding (decode mode)
No errors in conversion
Output is ready to copy

Benefits of Using This URL Encoder

Instant Real-Time Conversion

The output updates as you type — no buttons to click, no page reloads. Paste your text and see the encoded or decoded result immediately.

Bidirectional Encoding

Switch between encode and decode with one click. The same tool handles both directions, so you never need a separate decoder.

Spec-Compliant Output

Uses JavaScript's built-in encodeURIComponent and decodeURIComponent, producing output that follows RFC 3986 and works reliably in every browser and server.

Privacy First

All encoding and decoding runs in your browser. Your text and URLs are never sent to any server — safe for API keys, redirect URIs, and confidential parameters.

Built-In Validation

The status checklist validates your input in real time — checking for valid percent-encoding sequences, decoding errors, and output readiness before you copy.

Free and Unlimited

No sign-up, no usage caps, no paywalls. Encode and decode as many strings as you need — the tool is always available and always free.

What is URL Encoding?

URL encoding, also known as percent encoding, is a mechanism for encoding special characters in a URL into a format that can be safely transmitted over the internet. The process converts each non-ASCII or reserved character into a percent sign (%) followed by two hexadecimal digits that represent the character's byte value. For example, a space becomes %20, an ampersand becomes %26, and an equals sign becomes %3D.

URL encoding is necessary because URLs are designed to use a limited subset of the ASCII character set. The allowed unreserved characters are uppercase and lowercase letters (A-Z, a-z), digits (0-9), hyphens (-), underscores (_), periods (.), and tildes (~). Every other character — including spaces, punctuation marks, non-Latin scripts, and emoji — must be encoded before being included in a URL. This ensures that the URL is interpreted correctly by web browsers, servers, and proxies.

In JavaScript, URL encoding is performed using encodeURIComponent(), which encodes all characters except A-Z, a-z, 0-9, -, _, ., !, ~, *, ', and (. For encoding entire URLs where you want to preserve structural characters like slashes and colons, encodeURI() is used instead. This tool uses encodeURIComponent() and its counterpart decodeURIComponent() for precise control over the encoding process.

How Does URL Encoding Work?

URL encoding follows a straightforward algorithm defined in RFC 3986:

  1. Character Classification: Each character in the input string is checked against the set of unreserved characters (A-Z, a-z, 0-9, -, _, ., ~). Unreserved characters are left as-is.
  2. UTF-8 Byte Conversion: For characters that need encoding (everything not in the unreserved set), the character is first converted to its UTF-8 byte representation. ASCII characters use 1 byte, while Unicode characters like accented letters, CJK scripts, and emoji use 2 to 4 bytes.
  3. Percent Encoding: Each byte is converted to its two-digit hexadecimal representation and prefixed with a percent sign. For example, the space character (byte value 0x20) becomes %20, the é character (UTF-8 bytes 0xC3, 0xA9) becomes %C3%A9.
  4. Assembly: The encoded sequences are assembled into the final output string, with unreserved characters passed through unchanged. The result is a URL-safe string that contains only ASCII characters.
  5. Decoding Reverses the Process: When decoding, the algorithm scans for percent signs, reads the following two hex digits, converts them back to a byte, collects sequences of bytes, and interprets them as UTF-8 to reconstruct the original string.

It is important to understand the difference between encodeURI() and encodeURIComponent(). The former does not encode URL structural characters like :/?#[]@!$&'()*+,;=, making it suitable for encoding full URLs. The latter encodes all of these characters plus additional ones, making it suitable for encoding individual query parameter values. This tool uses encodeURIComponent() for maximum precision.

When to Use URL Encoding

Query Parameters

Encode user input before appending it to query strings. Names like "O'Brien" become "O%27Brien", preventing URL parsing errors and security vulnerabilities like injection attacks.

International URLs

URLs containing non-ASCII characters like Chinese, Arabic, Cyrillic, or accented Latin letters must be percent-encoded for reliable transmission across all browsers and servers.

API Requests

When constructing API URLs with dynamic parameters, each parameter value should be URL-encoded to handle spaces, ampersands, and special characters that would otherwise break the URL syntax.

Security

URL encoding prevents injection attacks by ensuring that user-supplied data cannot be interpreted as URL syntax. Characters like <, >, ", and ' are encoded, neutralizing potential XSS vectors.

Data URIs

Data URIs embedded in HTML or CSS require URL-encoded content types and parameters. For example, data:text/html,%3Ch1%3EHello%3C/h1%3E encodes the HTML content.

Debugging URLs

Decode garbled or percent-encoded URLs from server logs, error messages, or API responses to understand the original content and identify encoding issues in your application.

How to Use This URL Encoder / Decoder

  1. Select the Mode: Choose "Encode" to convert plain text to percent-encoded format, or "Decode" to convert a percent-encoded string back to plain text. The mode toggle is at the top of the input panel.
  2. Enter Your Text: Type or paste your text into the input textarea. In encode mode, enter any text including URLs, query strings, or text with special characters. In decode mode, paste a percent-encoded string like Hello%20World%21.
  3. Real-Time Conversion: The output updates instantly as you type — there is no need to click a convert button. The encoding or decoding happens character by character in real time.
  4. Review the Output: Check the result panel to see the converted output. Switch between "Result" view (styled preview) and "Raw" view (plain text) using the tabs.
  5. Check Validation: The status checklist monitors your input and output in real time. In decode mode, it validates that the percent-encoded sequences are properly formatted and flags any decoding errors.
  6. Copy the Output: Click the "Copy" button to copy the output to your clipboard. You can also copy from the raw view using the inline copy button.
  7. Try Examples: Click the quick example buttons to load sample inputs — "Query String" for parameter encoding, "Spaces & Symbols" for common special characters, "Unicode Text" for multibyte encoding, and "Full URL" for a complete URL example.
  8. Clear and Start Over: Click "Clear All" to reset both the input and output fields and return to the default state.

Practical Use Cases

  • Building API Query Strings: When constructing URLs for REST API requests, each parameter value must be URL-encoded. For example, a search for "chocolate & vanilla" becomes q=chocolate%20%26%20vanilla. This ensures the ampersand is treated as data, not as a parameter separator.
  • Form Submission URLs: When submitting form data via GET requests, the form values must be URL-encoded. Names with apostrophes, spaces, or special characters will break the URL if not properly encoded.
  • Social Media Sharing URLs: Sharing URLs on platforms like Twitter and Facebook require URL-encoded parameters. The text, URL, and hashtags in share links must all be properly encoded to function correctly. If you're building campaign links, the UTM link builder handles the full structure for you.
  • Redirect URLs in OAuth: OAuth authentication flows use redirect_uri parameters that must be URL-encoded. A redirect URL like https://example.com/callback?token=abc must have its query parameters double-encoded.
  • Email Newsletter Links: Links in HTML emails often contain tracking parameters with special characters. URL-encoding ensures these links work correctly across all email clients without breaking.
  • Debugging Server Logs: Web server access logs show URL-encoded request paths and query strings. Decoding these entries reveals the actual user input, helping with debugging and security analysis. For broader site debugging, the SEO page analyzer can catch issues beyond encoding.
  • Configuring Web Servers: Rewrite rules in Apache, Nginx, or IIS often need to match or manipulate URL-encoded patterns. Understanding the encoded format helps write correct regex patterns and rewrite conditions.

Why I Built This Tool

I was debugging an API integration and kept pasting URLs into the browser console to encode and decode them with encodeURIComponent() and decodeURIComponent(). Open DevTools, switch to Console, type the function, paste the string, close the quote, hit enter. Then do it again for the next parameter. Then again when I needed to decode a response. After the twentieth time in one afternoon, I thought: why am I doing this in a console like an animal?

I looked for a simple URL encoder online, and most of what I found either required clicking a "Convert" button every single time, showed ads between the input and output, or didn't handle decode at all. I wanted something where I just paste, see the result instantly, copy it, and move on. No buttons. No waiting. No separate tools for encode and decode.

That's exactly what this tool does. Real-time conversion as you type, one-click mode switching, and copy-ready output. No server calls, no data collection, no ads breaking your flow. It's one of the free tools I maintain at DevPalettes. If you're also working on SEO infrastructure, the sitemap generator and robots.txt tool handle the other side of getting your properly-encoded URLs indexed correctly.

Frequently Asked Questions

Explore More Tools

Once you have encoded or decoded your URLs, try these related tools:

Share This Tool

Found this useful? Share it with your development community.

Built by DevPalettes — free tools for developers and designers