Dev Tools

URL Encoder & Decoder

Encode and decode URL components, full URLs, and Base64 strings. See all encoding formats at once with one-click copy.

About This Tool

The URL Encoder and Decoder is an essential utility for web developers, API engineers, and anyone who works with URLs, query strings, and web-based data transfer. URLs have strict rules about which characters can appear in them, and this tool makes it easy to convert between human-readable text and URL-safe encoded formats. It supports three encoding modes: URL component encoding for query parameter values, full URL encoding for complete URLs, and Base64 encoding for binary-to-text conversion.

How URL Encoding Works

URL encoding, also known as percent-encoding, is defined in RFC 3986 and replaces unsafe characters with a percent sign followed by two hexadecimal digits representing the character's byte value. For example, a space becomes %20, an ampersand becomes %26, and a plus sign becomes %2B. For multi-byte Unicode characters like accented letters or CJK characters, each byte is encoded separately, so a single character might produce multiple %XX sequences. The encoding ensures that every character in the URL is represented using only the ASCII character set, which all internet protocols can reliably transmit.

encodeURIComponent vs encodeURI

JavaScript provides two built-in functions for URL encoding, and choosing the right one is critical. encodeURIComponent encodes every character that is not an unreserved character (letters, digits, -, _, ., ~), making it the correct choice for encoding individual values that will be placed into URL query parameters, path segments, or hash fragments. For example, encoding the value "name=John&age=30" as a parameter value produces "name%3DJohn%26age%3D30", preventing the embedded = and & from being interpreted as URL syntax.

encodeURI is designed for encoding complete URLs and preserves characters that have structural meaning in URLs, including : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use encodeURI when you have a complete URL that might contain Unicode characters in the path or query and you want to make it ASCII-safe without breaking its structure. For most cases involving form data or API parameters, encodeURIComponent is the correct choice.

Base64 Encoding

Base64 encoding converts arbitrary binary data into a string of 64 printable ASCII characters. While it serves a different purpose than URL encoding, it is frequently used in web development contexts. Data URIs use Base64 to embed images directly in HTML or CSS. JWT (JSON Web Tokens) use Base64url encoding for their header and payload. Basic HTTP authentication encodes the username:password pair in Base64. Email attachments use Base64 in MIME encoding. This tool supports standard Base64 encoding and decoding, handling Unicode text correctly by first encoding to UTF-8 before applying Base64.

Common Pitfalls

One of the most common mistakes is double-encoding: applying URL encoding to text that has already been encoded, turning %20 into %2520. This happens when URL encoding is applied at multiple layers of an application stack, such as in both the application code and a middleware library. Another pitfall is using encodeURI when encodeURIComponent is needed, leaving characters like & and = unencoded in parameter values. A third issue is not encoding the plus sign (+), which represents a space in form-urlencoded data but is a literal plus in other contexts. This tool shows all encoding formats simultaneously so you can choose the correct one for your use case.

Security Considerations

Proper URL encoding is a fundamental security practice. Failing to encode user-supplied data in URLs can lead to injection attacks, including cross-site scripting (XSS) through URL parameters, open redirect vulnerabilities, and server-side request forgery (SSRF). Always encode data that will be inserted into URLs, even if it appears to be safe. Defense in depth requires encoding at the point of insertion, not relying on input validation alone. This tool runs entirely in your browser with no server communication, making it safe for encoding sensitive data like API keys and authentication tokens.

Frequently Asked Questions

What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent encodes every special character except A-Z, a-z, 0-9, and the characters - _ . ! ~ * ' ( ). It is designed for encoding individual URL components like query parameter values, path segments, or fragment identifiers. For example, it encodes = as %3D and & as %26, which is essential when passing values that might contain these characters. encodeURI, on the other hand, is designed for encoding complete URLs and preserves characters that have special meaning in URLs: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use encodeURIComponent for parameter values and encodeURI for complete URLs where you want to preserve the URL structure.
Why do I need to URL-encode strings?
URLs can only contain a limited set of characters from the ASCII character set. Characters like spaces, special symbols, and non-ASCII characters (accented letters, CJK characters, emoji) must be encoded to be safely included in URLs. Without encoding, a space in a URL could be interpreted as the end of the URL by browsers and servers. Similarly, characters like & and = have special meanings in query strings, so literal occurrences of these characters in values must be encoded. URL encoding converts each unsafe character to one or more %XX sequences where XX is the hexadecimal representation of the character byte. This ensures the URL is transmitted correctly across all systems.
What is Base64 encoding and when should I use it?
Base64 is a binary-to-text encoding scheme that represents binary data using only 64 ASCII characters (A-Z, a-z, 0-9, +, /). It is not URL encoding per se but is commonly used alongside URL encoding. Base64 is used when you need to embed binary data (like images, files, or encrypted content) in text-based formats like JSON, XML, HTML, or email. Common use cases include data URIs for inline images (data:image/png;base64,...), JWT tokens, basic HTTP authentication headers, and email attachments. Base64 increases the data size by approximately 33% because it uses 4 characters to represent every 3 bytes of data. For URL-safe Base64, replace + with - and / with _ to avoid URL encoding issues.
How do I decode a URL with multiple encoded layers?
Sometimes URLs are double-encoded or triple-encoded, where encoded characters are encoded again. This happens when URL encoding is applied multiple times, often unintentionally by middleware, proxies, or frameworks. For example, a space might become %20, then %20 becomes %2520 (the % is encoded as %25). To fully decode such a URL, you need to run the decoder multiple times until the output no longer changes. Our tool decodes one layer at a time, so you can paste the result back into the input field and decode again until you reach the original text. Each decoding pass removes one layer of encoding.
What characters are safe to use in URLs without encoding?
According to RFC 3986, the following characters are unreserved and can appear in URLs without encoding: uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), hyphen (-), period (.), underscore (_), and tilde (~). Additionally, reserved characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; = are allowed in specific URL components where they serve their intended purpose (for example, / as a path separator, ? as the query string delimiter). However, if you want to use a reserved character as literal data within a component, it must be percent-encoded. For maximum compatibility, encode everything except unreserved characters when constructing URL parameters.
Does this tool send my data to a server?
No. This URL encoder/decoder runs entirely in your browser using JavaScript. Your data never leaves your device and is not transmitted to any server. The encoding and decoding functions use the browser's built-in encodeURIComponent, decodeURIComponent, encodeURI, decodeURI, btoa, and atob functions. This makes the tool safe for encoding sensitive data like API keys, authentication tokens, and private URLs. There is no data collection, no analytics on the content you encode or decode, and no storage of your input or output. You can verify this by disconnecting from the internet and confirming the tool still works.

Was this tool helpful?

You might also like

Tax & Finance

Self-Employment Tax Estimator

Calculate your quarterly SE tax payments and deductions.

⏱ 2 minFinance

Compound Interest Calculator

See how your money grows with compound interest over time.

⏱ 1 minCareer

Freelance Rate Calculator

Find your ideal hourly, daily, and project rates.

⏱ 3 min