Free URL Encoder Decoder Tool

URLs can only contain a limited set of ASCII characters. Spaces, ampersands, question marks, and hundreds of other characters need to be encoded before they’re safe to use in a URL. A free URL encoder/decoder tool handles this conversion instantly — no code, no terminal, no install.

DevPlaybook’s URL encoder/decoder converts characters to and from percent-encoding with a single click.

---

What Is URL Encoding?

URL encoding (also called percent-encoding) is a way to represent characters that aren’t allowed in URLs using a % sign followed by two hexadecimal digits representing the character’s ASCII or UTF-8 byte value.

Examples:

Character	Encoded
Space	%20
&	%26
=	%3D
?	%3F
#	%23
/	%2F
+	%2B
@	%40

The + sign is sometimes used as an alternative to %20 for spaces in query strings — but only in query strings, not in path segments.

---

When Do You Need URL Encoding?

Query String Parameters

If a query parameter value contains &, =, or ?, it breaks the URL structure. Encoding those characters ensures they’re treated as data, not syntax.

For example: search?q=a&b is ambiguous. Is the parameter a with key q, followed by another parameter b? Or is a&b the value of q? Encoding solves this: search?q=a%26b.

Embedding URLs in Other URLs

When a URL itself is a parameter value, every structural character in it (://, ?, &, /) must be encoded: redirect=https%3A%2F%2Fexample.com%2Fpath%3Fkey%3Dvalue.

API Requests

REST APIs often include user-generated strings in URLs — search queries, usernames, file paths. Any of these can contain characters that need encoding before you construct the request.

Form Data

HTML form submissions with method="GET" append form fields to the URL. The browser handles this automatically, but if you’re constructing URLs manually (in fetch, axios, etc.), you need to encode values yourself.

---

URL Encoding vs. Form Encoding

Two standards exist:

RFC 3986 (standard URL encoding) Encodes all non-unreserved characters. Spaces become %20. Used for path segments and query values in most contexts.

application/x-www-form-urlencoded Used in HTML form submissions. Spaces become + (not %20). Other characters use %XX. Used by URLSearchParams in JavaScript.

Our tool handles both. Select the encoding type that matches your use case.

---

How to Use the URL Encoder/Decoder

To encode:

1. Open DevPlaybook URL Tool
2. Paste the text or URL you want to encode
3. Click Encode — result appears instantly
4. Copy the encoded output

To decode:

1. Paste the percent-encoded string
2. Click Decode
3. See the human-readable version

The tool also shows both forms simultaneously so you can compare them.

---

Encoding a Full URL vs. Encoding a Component

This is a common mistake. There are two different operations:

Encode a URL component (a parameter value)

Encode the value of a single query parameter. This should be the most aggressive — encode all special characters including ?, &, =, and /.

In JavaScript: encodeURIComponent('my value & more') → my%20value%20%26%20more

Encode a full URL

Encode a complete URL while preserving its structure (keeping ://, ?, &, =, / as valid URL syntax). Only encode characters that are invalid in URLs entirely.

In JavaScript: encodeURI('https://example.com/path with spaces') → https://example.com/path%20with%20spaces

Our tool handles both modes. Choose “Encode component” for parameter values, “Encode URI” for full URLs.

---

Decoding URLs for Debugging

URL decoding is just as useful as encoding. When you see an API request in your logs or network inspector, the URLs are often percent-encoded. Pasting them into a decoder reveals the human-readable form instantly.

This is especially useful for:

• OAuth redirect URIs
• Webhook callbacks with embedded parameters
• Search engine result URLs with tracking parameters
• Third-party API requests logged by your backend

---

Real-World Scenario

A developer is building a search feature that accepts user-supplied filters and passes them as query parameters to a backend API. The filter includes a date range, a category name with spaces and slashes, and a free-text search term. A user types “women’s clothing / spring 2025” as a category and “budget < $100” as a search term. When the developer constructs the URL manually without encoding, the request breaks — the slash is interpreted as a path separator and the < and $ characters cause the backend parser to fail.

They paste the category string into the URL encoder, select “Encode component” mode, and get the correctly encoded value: women%27s%20clothing%20%2F%20spring%202025. They do the same for the search term: budget%20%3C%20%24100. They update their fetch call to use encodeURIComponent() on each parameter value before concatenating the URL. The problem is solved — and they now understand why encodeURIComponent and encodeURI exist as separate functions.

A second scenario involves debugging an OAuth flow. The authorization server is rejecting the redirect_uri parameter with a “mismatched redirect URI” error. The developer inspects the outgoing request in the browser network tab and sees the redirect URI is https%3A%2F%2Fapp.example.com%2Fauth%2Fcallback. They paste this into the decoder and immediately see it’s the correctly encoded form of their callback URL. The issue turns out to be that the registered URI in the OAuth provider dashboard had a trailing slash and theirs did not — the decoding step made the comparison possible without writing a script. A URL decoder is one of those tools that saves 20 minutes of frustrating OAuth debugging every time.

---

Quick Tips

1. Always use encodeURIComponent for query parameter values in code, not encodeURI. encodeURI preserves URL structure characters like ?, &, and = — which means it won’t encode them even when they appear inside a parameter value and will break your URL. encodeURIComponent encodes everything that isn’t an unreserved character.

2. Decode the full URL from browser logs before comparing URIs. When debugging redirect mismatches or webhook failures, the logged URL is almost always percent-encoded. Decode it first — what looks like a different URL is often the same one with different encoding applied.

3. Watch out for double-encoding. If you encode a string that’s already encoded, %20 becomes %2520. Paste your output into the decoder to verify — if decoding it twice gives you the original string, you’ve double-encoded.

4. Use the tool to verify OAuth redirect URIs. OAuth errors are cryptic. Decode the redirect_uri parameter from your outgoing request and compare it character-for-character against what’s registered in your OAuth provider. Trailing slashes and encoding differences are the two most common causes of redirect mismatch errors.

5. Encode file paths and usernames before including them in REST API URLs. A username like [email protected] contains @ and . — characters that have meaning in URLs. Always encode dynamic path segments: encodeURIComponent(username) before building /users/${username}/profile.

---

Frequently Asked Questions

Is my input sent to a server? No. All encoding and decoding happens in your browser. Nothing is transmitted or stored.

What’s the difference between %20 and + for spaces? Both represent a space, but in different contexts. %20 is correct in path segments and general URL encoding. + is only valid in query strings using form encoding (application/x-www-form-urlencoded). When in doubt, use %20.

Can it decode partially encoded URLs? Yes. The decoder handles URLs with a mix of encoded and unencoded characters.

Does it support Unicode characters? Yes. Non-ASCII characters (emoji, accented letters, CJK characters) are encoded to their UTF-8 byte sequences in percent-encoding.

---

Encode or Decode Your URL Now

Open the free URL encoder/decoder → and convert your URL in seconds. No account, no install, no data stored.