ModernCalcs

URL Encoder / Decoder

Safely encode special characters for URLs or decode a URI component back to readable text instantly in your browser.

Raw Text Input

Encoded URL Output

What is a URL Encoder?

A URL Encoder is an essential web developer tool used to translate special characters into a universally accepted format that can be safely transmitted over the internet. URLs (Uniform Resource Locators) can only be sent across the internet using the ASCII character-set. If a URL contains characters outside the ASCII set, or reserved characters (like spaces, question marks, or ampersands), the URL must be converted.

How Does URL Encoding Work?

URL encoding (often called Percent-encoding) replaces unsafe ASCII characters with a % followed by two hexadecimal digits. For example:

  • A space ( ) becomes %20
  • An ampersand (&) becomes %26
  • A forward slash (/) becomes %2F

When a web server receives this encoded URL, it automatically decodes the percent-signs back into their original characters before processing the request.

Why Do Developers Need This Utility?

When building RESTful APIs or passing query string parameters through the frontend, developers frequently need to pass complex data (like JSON strings, email addresses, or callback URLs) inside another URL. If this data is not properly encoded via functions like JavaScript's encodeURIComponent(), the browser will misinterpret the structure of the URL, leading to broken links or 400 Bad Request server errors.

Our utility provides a lightning-fast, client-side interface to perform this encoding and decoding securely. Because the JavaScript executes entirely within your browser, you can safely encode proprietary API endpoints or PII (Personally Identifiable Information) without the data ever being logged by a remote server.

URL Encoder & Decoder: Mastering Percentage Encoding for Web Developers

URLs (Uniform Resource Locators) are designed to be transmitted over the internet using only a limited set of characters from the ASCII set. When you need to include "unsafe" characters like spaces, emojis, or symbols (like `&`, `?`, `#`) in a URL, they must be transformed into a secure format known as Percentage Encoding. Our URL Encoder & Decoder helps you handle these transformations instantly, ensuring your web links and API parameters work perfectly across all browsers.

Formula
Character -> Hex Value -> %Hex

Example: Space -> 32 (Hex 20) -> %20.

What is Percentage Encoding?

Percentage encoding replaces non-ASCII characters with a '%' followed by their two-digit hexadecimal representation. This is essential because certain characters have special meanings in a URL: `?` starts the query string, `&` separates parameters, and `#` indicates a fragment. If your data contains these characters literally, the browser will misinterpret your link. Encoding them ensures the data is treated as 'content' rather than 'syntax'.

encodeURI vs. encodeURIComponent: When to Use Which?

In JavaScript development, there is a key difference between these two functions: 1) encodeURI: Encodes a full URL but leaves functional characters like `:`, `/`, `;`, and `?` intact. 2) encodeURIComponent: Encodes everything except for a few safe characters. This is what you should use for individual parameter values (like a search query or a user's email) to ensure they don't break the overall URL structure.

Handling Spaces, Emojis, and Non-Latin Scripts

Spaces in URLs are technically encoded as `%20`, though in some contexts (like query parameters in a form), they can be represented as `+`. Our tool defaults to the standard `%20` for maximum compatibility. We also support UTF-8 multi-byte characters, meaning you can safely encode emojis or text in languages like Hindi, Chinese, or Arabic into a browser-safe ASCII string.

Privacy and Security: No Server-Side Logging

Developers often need to decode URLs that contain sensitive information—like auth tokens, reset-password links, or private API keys. Using a server-side decoder is a major security risk. ModernCalcs URL Tool runs entirely in your browser. Your input is processed locally via JavaScript and is never sent to our servers, ensuring your sensitive data remains completely private.

Practical Examples

Encoding a Search Query

Preparing a link with spaces and symbols.

  • 1.Input: modern calculators & more!
  • 2.Action: Click 'Encode'.
  • 3.Output: modern%20calculators%20%26%20more%21
  • 4.Insight: The space became %20 and the ampersand became %26.

Decoding a Messy API Link

Making a logged URL human-readable.

  • 1.Input: https%3A%2F%2Fapi.com%3Fuser%3Darun%40gmail.com
  • 2.Action: Click 'Decode'.
  • 3.Output: https://api.com?user=arun@gmail.com
  • 4.Insight: The colon, slashes, and '@' are restored.

Characters that MUST be Encoded

  • Space: Becomes %20.
  • Ampersand (&): Becomes %26 (prevents splitting parameters).
  • Question Mark (?): Becomes %3F (prevents starting a new query).
  • Hash (#): Becomes %23 (prevents starting a fragment).
  • Equals (=): Becomes %3D (prevents splitting key/value pairs).

Reserved vs. Unreserved Characters

  • Unreserved: A-Z, a-z, 0-9, -, _, ., ~ (Never need encoding).
  • Reserved: !, *, ', (, ), ;, :, @, &, =, +, $, ,, /, ?, %, #, [, ] (Must be encoded if used as data).
  • Unsafe: { }, |, \, ^, `, <, > (Always encode for reliability).

Frequently Asked Questions

What is URL Encoding?

URL encoding (Percentage Encoding) is a mechanism for encoding information in a Uniform Resource Identifier (URI). It replaces unsafe characters with a '%' followed by two hexadecimal digits.

Why do I need to encode URLs?

URLs can only contain a limited set of ASCII characters. Special symbols like spaces, ampersands (&), and question marks (?) have functional meanings in a URL and must be encoded if they are part of the data.

What does %20 mean?

It is the encoded representation of a space character.

How to decode a URL in JavaScript?

Use the built-in decodeURIComponent() function for parameters and decodeURI() for full URLs.

What is the difference between encodeURI and encodeURIComponent?

encodeURI leaves functional characters like ':', '/', and '?' alone. encodeURIComponent encodes everything, making it safe for use as an individual parameter value.

Can I encode emojis in a URL?

Yes. Modern URL encoding uses UTF-8, which allows emojis to be represented as multiple percentage-encoded bytes (e.g., %F0%9F%98%8A).

Is URL encoding the same as Base64?

No. URL encoding makes characters safe for a URI structure. Base64 is for representing binary data in a text-only format.

Why is my encoded URL so long?

Every non-ASCII character takes up at least 3 bytes in its encoded form, which can significantly increase the length of URLs containing non-English text.

Is it safe to decode my API links here?

Yes. Our tool is 100% client-side. All processing happens in your browser's JavaScript engine; no data is sent to our servers.

What characters are 'safe' and never encoded?

The characters A-Z, a-z, 0-9, '-', '_', '.', and '~' are considered 'unreserved' and are never encoded.

Related Tools

View all developer tools

JSON Formatter

Clean and validate JSON data.

JWT Decoder

Inspect JSON Web Tokens.

Base64 Tool

Encode or decode Base64 data.

SQL Formatter

Beautify your SQL queries.