URL Encoder Tutorial — Encode & Decode URLs
Learn URL encoding and decoding with our free tool. Understand percent-encoding, special characters, and when to encode URLs in your code.
What Is URL Encoder?
URL encoding (percent-encoding) converts special characters into a format safe for URLs. When you see <code>%20</code> instead of a space or <code>%26</code> instead of an ampersand, that's URL encoding at work. It's essential for building query strings, passing data in URLs, working with APIs, and handling international characters in web addresses. Despite being a fundamental web concept, URL encoding causes countless bugs — broken links, missing parameters, double-encoding issues. This tutorial demystifies URL encoding and shows you how to use it correctly.
The Problem This Solves
You're building a URL with query parameters, but your values contain spaces, ampersands, question marks, or non-ASCII characters. The URL breaks because these characters have special meaning in URLs and need to be escaped properly.
Why This Matters
Every web application deals with URLs. API calls, redirect URLs, search queries, tracking parameters — they all require proper URL encoding. Incorrect encoding causes broken links, lost data, security vulnerabilities (injection attacks), and confusing bugs that are hard to trace. URL encoding is one of those fundamentals that, once understood, prevents an entire class of bugs.
Getting Started — Step by Step
Open the URL Encoder tool
Navigate to the URL Encoder page. You'll see an input field and toggle for Encode/Decode mode. The tool works with both complete URLs and individual parameter values.
Select Encode or Decode mode
Use Encode to convert special characters to percent-encoded format. Use Decode to convert percent-encoded strings back to readable text. Encoding is used when building URLs; decoding when parsing or debugging them.
Enter your text or URL
Paste the text containing special characters. For example: search term with spaces & symbols! or a full URL like https://api.example.com/search?q=hello world&lang=en. The tool encodes only the characters that need encoding.
Copy the encoded result
Spaces become %20, ampersands become %26, and other special characters get their percent-encoded equivalents. The encoded string is safe to use in any URL context — query parameters, path segments, or fragment identifiers.
Use correctly in your code
In JavaScript, use encodeURIComponent() for parameter values and encodeURI() for full URLs. In Python, use urllib.parse.quote(). In PHP, use urlencode(). Our tool helps you verify what the correct encoding should look like before implementing it in code.
Try URL Encoder Now
Open full page →All processing happens in your browser — your data never leaves your machine.
Real-World Example
https://api.example.com/search?q=price > $100 & sale=true https://example.com/path/file name with spaces.pdf https://example.com/page?redirect=https://other.com?param=value
https://api.example.com/search?q=price%20%3E%20%24100%20%26%20sale%3Dtrue https://example.com/path/file%20name%20with%20spaces.pdf https://example.com/page?redirect=https%3A%2F%2Fother.com%3Fparam%3Dvalue
Pro Tips & Common Mistakes
-
1
Encode parameter values, not the entire URL — the
?,=, and&delimiters should stay unencoded. - 2 Never double-encode — if a string is already encoded, decoding then re-encoding produces a different (broken) result.
-
3
Spaces can be encoded as
%20or+— both are valid but%20works everywhere while+only works in query strings. -
4
Test with Unicode characters:
café→caf%C3%A9(UTF-8 encoded).
Frequently Asked Questions
What's the difference between encodeURI() and encodeURIComponent()?
encodeURI() encodes a full URL but preserves URL-special characters (:, /, ?, &, =). encodeURIComponent() encodes everything except letters, numbers, and -_.!~*'(). Use encodeURIComponent() for parameter values and encodeURI() for complete URLs.
Why do I see + instead of %20 for spaces?
The + for spaces convention comes from HTML form encoding (application/x-www-form-urlencoded). In URL paths and modern APIs, %20 is the standard. Both work in query strings, but %20 is universally safe.
Do I need to URL-encode JSON in query parameters?
Yes. JSON contains characters that are special in URLs: {, }, ", :. When passing JSON in a URL parameter, you must encode it: ?data=%7B%22key%22%3A%22value%22%7D. Better yet, use POST with a JSON body instead of cramming JSON into URL parameters.
Related Getting Started Guides
Related Tools
Ready to use URL Encoder?
Free, no signup required. Works entirely in your browser.
Open URL Encoder →