URL Encoding (also known as Percent Encoding) is a mechanism to represent special characters in URLs using the format %XX, where XX is the hexadecimal value. This encoding is essential for web development, API integration, and data transmission. When you need to include special characters like spaces, ampersands (&), question marks (?), or non-ASCII characters in URLs or query parameters, proper encoding ensures the data is transmitted safely without breaking the URL structure. The tool supports two encoding modes: Full URL encoding (encodeURI) preserves URL structure characters like :, /, ?, &, = while encoding other special characters—ideal for encoding complete URLs. Component encoding (encodeURIComponent) encodes all special characters including URL structure characters—perfect for query parameter values, form data, and API request payloads. All processing happens client-side in your browser with no data sent to servers.
How to Use
Select Encode or Decode mode using the radio buttons at the top. For encoding: paste your text or URL into the input area and the output updates automatically with the encoded result. Choose your space encoding style: %20 (standard, RFC 3986 compliant) or + (common in query strings and form data). Toggle 'Encode Full URL' to switch between full URL encoding (preserves :, /, ?, &, =) and component encoding (encodes everything). For decoding: paste encoded URL text and it automatically decodes back to readable format, handling both %20 and + space representations. Copy the output with one click using the Copy button, or download results as a text file.
Common Use Cases & Examples
**Query Parameters**: Encode 'smart watch' to 'smart%20watch' or 'smart+watch' for URL query strings. **API Requests**: Build API URLs like 'https://api.example.com/search?q=electronics%20%26%20gadgets&price=%3E100' with properly encoded parameters. **OAuth & Signatures**: Many OAuth flows and API signature algorithms require URL-encoded parameters. **Form Data**: Encode form submissions for application/x-www-form-urlencoded content type. **Deep Links**: Create encoded deep links for mobile apps with parameters. **Debugging**: Decode API responses or browser URL bars to see actual parameter values. **Special Characters**: Handle characters like &, =, ?, #, /, @, :, <, >, ", ', %, +, and spaces in URLs.
Limitations & Important Notes
This tool uses UTF-8 encoding (standard for modern web). Non-UTF-8 encodings are not supported. The tool handles standard URL encoding; for other encoding schemes (like base64 or HTML entities), use the respective tools. Very long URLs (>100KB) may cause performance issues in older browsers. Malformed percent sequences (like %ZZ or incomplete sequences) in decode mode will trigger error messages. The 'Encode Full URL' option should only be used for complete URLs starting with http:// or https://—for query parameter values alone, use component encoding. Remember that URL encoding increases text size: each special character becomes 3 characters (%XX), so 'hello world' (11 chars) becomes 'hello%20world' (13 chars).
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}