URL Encoder & Decoder

What Is URL Encoding?

URL encoding, formally known as percent-encoding, is a standardized mechanism defined in RFC 3986 for representing characters in a Uniform Resource Identifier (URI) that would otherwise be invalid or ambiguous. When you type a URL into your browser, every character must conform to the strict ASCII subset allowed by the URI specification. Characters outside that subset — including spaces, ampersands, question marks, non-ASCII letters, emoji, and dozens of punctuation marks — must be replaced with a percent sign (%) followed by the two-digit hexadecimal value of each byte that represents the character in UTF-8 encoding.

For example, a space character (byte value 0x20) becomes %20. An ampersand (&) becomes %26. A multi-byte character like the euro sign produces %E2%82%AC — one percent-encoded triplet per byte. Without proper URL encoding, browsers and servers cannot tell whether a ? in a URL is a literal question mark in a file name or the delimiter that starts the query string. Percent-encoding removes that ambiguity and ensures URLs are transmitted correctly across every layer of the internet, from DNS resolvers and proxies to CDN edge servers and analytics platforms.

Our free online URL encoder and decoder handles all of this automatically. Paste any text, and the tool instantly produces the correct percent-encoded output — or decodes an already-encoded string back to its readable form.

How to Encode a URL

Encoding a URL or a query parameter value with our tool takes a few seconds:

1. Select Encode mode — click the Encode tab at the top of the tool.
2. Choose your encoding mode — pick encodeURIComponent if you are encoding an individual value (such as a single query parameter or a file name). Pick encodeURI if you are encoding a complete URL and want to preserve structural characters like :, /, ?, and #.
3. Paste or type your text — enter your content in the left input panel. The percent-encoded output appears instantly in the right panel as you type. No button click is needed.
4. Copy the result — click Copy Output to copy the encoded string to your clipboard, or click the small Download icon to save it as a .txt file.

The character count and byte count displayed above each panel help you monitor payload size — especially useful when encoding values for URL length limits (typically 2,048 characters in most browsers).

How to Decode a URL

Decoding a URL-encoded string works the same way in reverse:

1. Select Decode mode — click the Decode tab.
2. Paste the encoded string — enter the percent-encoded URL or value in the left panel. The decoded output appears instantly on the right.
3. Check for double encoding — if the decoded output still contains %XX sequences, the tool automatically displays a warning banner. Click Decode Again to run another pass.
4. Copy or download — use the Copy Output button or the Download icon to export the decoded text.

You can also use the Swap button to move the output back into the input field — perfect for round-trip verification to confirm that encoding followed by decoding produces the original string.

encodeURIComponent vs encodeURI — When to Use Which

This is one of the most common sources of bugs in web development, and most URL encoder tools online do not even surface the distinction. Here is the definitive guide:

encodeURIComponent encodes everything except A-Z a-z 0-9 - _ . ~. It turns colons, slashes, question marks, ampersands, equal signs, hash symbols, and all other special characters into their percent-encoded equivalents. Use it when you are encoding a value that will be embedded inside a URL — for example, a query parameter value, a form field, a cookie value, or a path segment.

encodeURI encodes only the characters that are not valid anywhere in a URI. It preserves URL-structural characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use it when you have a complete URL and want to fix just the invalid characters (such as spaces or non-ASCII characters) without breaking the URL structure.

Rule of thumb: if you are building a URL by concatenating parts, always use encodeURIComponent for each individual value. If you have a full URL string that just needs sanitizing, use encodeURI.

All Features

• Dual encoding modes — choose between encodeURIComponent (for values) and encodeURI (for full URLs) to match your exact use case.
• Real-time encode and decode — output updates instantly as you type with zero latency. No submit button needed.
• Double-encode detection — the tool automatically detects when decoded output still contains percent-encoded sequences and offers a one-click Decode Again fix.
• Bulk mode — toggle bulk mode to encode or decode multiple values line by line. Paste a list and every line is processed independently.
• URL parser — expand the URL Parser panel to break any URL into its components: protocol, host, path, query string, hash fragment, and individual query parameters.
• Query string builder — construct properly encoded query strings from key-value pairs using a visual form. Add, remove, and reorder parameters with one click.
• Encoding reference table — a quick-reference grid showing common characters and their percent-encoded equivalents.
• Download buttons — save the input or output as a .txt file with one click.
• Character and byte count — both panels display the character count and UTF-8 byte count in real time.
• Swap button — move the output back to input for round-trip testing.
• Share via URL — generate a shareable link with the input encoded in the URL hash fragment.
• Operation history — the last 10 encode and decode operations are saved in your browser for easy recall.
• 100% client-side — all processing happens in your browser. Zero server requests, complete privacy.

URL Parser — How to Use

The built-in URL parser dissects any URL into its RFC 3986 components so you can inspect each part individually. Click the URL Parser section header to expand it, then enter a URL in the main input field. The parser displays:

• Protocol — http: or https:
• Host — the domain name and port (e.g., api.example.com:8080)
• Path — the path after the host (e.g., /v2/search)
• Query — the raw query string after ?
• Hash — the fragment identifier after #
• Query Parameters — each key-value pair extracted and decoded for easy reading

This is especially useful when debugging long redirect URLs, OAuth callback URLs, or analytics tracking links that contain dozens of encoded parameters.

Query String Builder — How to Use

The query string builder lets you construct encoded query strings from scratch without writing code. Click the section header to expand it, then:

1. Enter a parameter name in the key field and its value in the value field.
2. Click Add Parameter to add more key-value pairs.
3. The tool automatically encodes special characters in both keys and values and assembles the complete query string with proper ? and & delimiters.
4. Click Copy to copy the generated query string and append it to your base URL.

This feature eliminates manual string concatenation — a common source of encoding bugs in API integrations, webhook configurations, and marketing tracking URLs.

Why Choose Our URL Encoder?

Most free URL encoder tools offer a single text box with no distinction between encodeURIComponent and encodeURI. That distinction matters — using the wrong mode either breaks your URL or leaves parameter values partially unencoded. Our tool puts the encoding mode front and center so you always make the right choice.

Beyond encoding, we include a full URL parser, a query string builder, bulk mode, double-encode detection, download and share capabilities, and a character reference table — features that competing tools like urlencoder.org, meyerweb.com, and urlencoder.io either lack entirely or hide behind paywalls.

Everything runs 100% in your browser. Your URLs, API keys, tokens, and internal paths are never transmitted to any server. No ads, no signup, no usage limits, no cookies.

Common Use Cases

• Encoding query parameter values — safely encode user input, search queries, and form data before appending to a URL.
• Decoding server logs — decode percent-encoded URLs from web server access logs, error logs, and redirect chains.
• Debugging API URLs — inspect and fix malformed API endpoint URLs that produce 400 Bad Request errors.
• Building OAuth callback URLs — encode redirect URIs and state parameters required by OAuth 2.0 flows.
• SEO URL inspection — decode encoded URLs from Google Search Console, sitemap files, and canonical tags to verify they point to the correct pages.
• UTM parameter encoding — encode tracking parameters for Google Analytics, Facebook Ads, and email marketing campaigns.
• Fixing double-encoded redirects — detect and resolve double-encoding issues in redirect chains that produce broken links.
• Encoding file paths — encode special characters in file names and directory paths for use in download links and API requests.
• Webhook URL construction — build properly encoded webhook callback URLs for Stripe, Slack, GitHub, and other integrations.
• Teaching and learning — understand how percent-encoding works with the interactive reference table and real-time preview.

Tips & Best Practices

Always use encodeURIComponent() for individual values. When building a URL by concatenating a base URL with query parameters, encode each parameter value separately with encodeURIComponent(). Never encode the entire URL string with encodeURIComponent() — that would break the structural characters.

Watch out for double encoding. If you see %2520 instead of %20, the value was encoded twice. This commonly happens when a framework automatically encodes values that you already encoded manually. Our tool detects this and offers a one-click fix.

Use %20 instead of + for spaces. While both %20 and + represent a space, + is only valid in the application/x-www-form-urlencoded format used by HTML forms. In URL paths and many APIs, only %20 works correctly. JavaScript's encodeURIComponent() uses %20 by default.

Encode before concatenating. Build URLs by encoding each piece separately, then joining them: baseUrl + '?q=' + encodeURIComponent(query) + '&page=' + encodeURIComponent(page). Never build the full string first and try to encode it after.

Test round-trip integrity. Use the Swap button to move encoded output back to the input, switch to Decode mode, and verify you get the original text. This catches encoding issues before they reach production.

Use the URL parser for debugging. When a URL is not working as expected, paste it into the tool and expand the URL Parser to see exactly how the browser would interpret each component. Misplaced & or = characters in parameter values are the most common culprit.