Ttooleras
🔗

URL Encoder/Decoder

Encoders & Decoders

Percent-encode and decode URLs, query strings, and form data. Free, private — all processing in your browser.

Advertisement

URLs can only safely carry a limited set of characters, so anything else — spaces, ampersands, question marks, non-Latin letters — has to be percent-encoded (a space becomes %20). This tool encodes and decodes both directions, and lets you pick the right *kind* of encoding: encodeURIComponent for a single value like a query parameter, encodeURI for a whole URL you want to keep intact, or spaces-only for the simplest case.

There's also a URL parser that takes any URL and breaks it into its protocol, host, path, query string, and individual parameters — handy for reading a long tracking URL or debugging what a link is actually passing. All of it runs in your browser.

How to use the URL Encoder/Decoder

  1. 1

    Choose encode or decode

    Select Encode to convert a plain string to URL-safe form, or Decode to reverse percent-encoded text back to the original.

  2. 2

    Paste your input

    Type or paste the string you want to process. Can be a single value, a full URL, or a list of strings.

  3. 3

    Pick encoding mode

    Use Component for individual query parameters or path segments. Use Full URL for entire URLs where `:`, `/`, `?` must remain unencoded.

  4. 4

    Choose space representation

    Toggle between `%20` (standard) and `+` (form-encoded). Most APIs accept both, but match the target system's convention.

  5. 5

    Copy the result

    The output updates instantly. Click Copy to put it on your clipboard, or Download to save as a file.

URL Encoder/Decoder in practice

Encode a query value

A search term with spaces and special characters.

Input
Hello World & Co.
Output
Hello%20World%20%26%20Co.

Decode percent-encoded string

Reverse the encoding to get readable text.

Input
S%C3%A3o%20Paulo%2C%20Brazil
Output
São Paulo, Brazil

Full URL encoding

Preserves URL structure, encodes unsafe chars in path and query only.

Input
https://tooleras.com/search?q=hello world & friends
Output
https://tooleras.com/search?q=hello%20world%20&%20friends

Component encoding

Encodes everything reserved — for individual query values.

Input
hello world & friends
Output
hello%20world%20%26%20friends

Unicode emoji

Emoji are encoded as UTF-8 byte sequences.

Input
I love 🚀 and ☕
Output
I%20love%20%F0%9F%9A%80%20and%20%E2%98%95

Form-encoded space (+)

Alternative for application/x-www-form-urlencoded form data.

Input
Mode: form-encoded
Input: hello world
Output
hello+world

Decode query string

Parse multiple parameters from a URL query.

Input
?name=Jane%20Doe&city=S%C3%A3o%20Paulo&tags=js%2Creact
Output
name = Jane Doe
city = São Paulo
tags = js,react

What the URL Encoder/Decoder can do

Encode and decode instantly

Paste any string and see the encoded/decoded result in real-time. Switch between encode and decode modes with one click.

Component vs full URL encoding

Choose `encodeURIComponent` (encode everything except safe chars) for query values, or `encodeURI` (preserve URL structure) for full URLs.

Space as %20 or +

Toggle between strict RFC 3986 encoding (space as %20) and form-encoded (space as +). Match the format your API expects.

Handle Unicode correctly

Unicode characters (emoji, Chinese, Arabic, Greek) are encoded as UTF-8 byte sequences (%XX%XX) per the WHATWG URL standard.

Bulk encoding

Encode or decode a list of strings — one per line. Useful for processing batches of URLs from log files or spreadsheets.

Inspect query parameters

Paste a full URL to see each query parameter decoded separately. Useful for debugging URL-encoded webhooks and redirect flows.

Copy, download, and share

Copy results to clipboard or download as a text file. Works with any amount of data your browser can hold in memory.

100% client-side, private

Nothing leaves your browser. Safe to encode sensitive data (API keys in query params, OAuth codes, signed URLs).

When to use the URL Encoder/Decoder

API integration

  • →Construct API URLs with user input: When a user searches for `cats & dogs`, encode the query as `cats%20%26%20dogs` before putting it in the URL.
  • →Encode OAuth redirect URLs: OAuth 2.0 `redirect_uri` parameters must be URL-encoded when included in an authorization URL.
  • →Build webhook URLs with query parameters: Include signed tokens or payload hashes in webhook URLs with proper encoding.
  • →Handle special characters in REST paths: Path segments containing `/`, `?`, or `#` must be encoded to avoid breaking the URL structure.

Web development

  • →Encode form data: HTML forms with `application/x-www-form-urlencoded` content type use URL encoding. Construct form bodies manually when needed.
  • →Decode query strings: When parsing `?name=Jane%20Doe&city=S%C3%A3o%20Paulo`, decode each value to get the original strings.
  • →Debug malformed URLs: Copy a URL from a log or error report and decode it to see what was actually intended.
  • →Create shareable links with parameters: When building share URLs (Twitter, WhatsApp, email), encode user-generated content correctly.

Debugging and analysis

  • →Analyze suspicious URLs: Phishing URLs often hide malicious parameters with aggressive encoding. Decoding reveals their true intent.
  • →Inspect webhooks and callbacks: Decode URL-encoded webhook payloads to understand what data is being sent.
  • →Read log files: Server access logs often contain URL-encoded query strings. Decode to make them human-readable.

Content management

  • →Build SEO-friendly URLs: Convert titles like `How to Use React Hooks & Context` into URL-safe slugs by encoding or by creating a slug (see our [Text to Slug tool](https://tooleras.com/tools/text-to-slug)).
  • →Encode filenames for downloads: When generating download URLs for files with spaces or special characters, encode the filename.
  • →Create mailto links with body: `mailto:?subject=Hello&body=This%20is%20important` — encode body and subject before constructing the link.

Under the hood

Percent-encoding replaces an unsafe character with % followed by its byte value in hex. Non-ASCII characters are UTF-8 encoded first, so é becomes %C3%A9. Decoding reverses it.

The choice that trips everyone up — component vs full:
- encodeURIComponent encodes *everything* that isn't safe, including & = ? / #. Use it for a single piece you're dropping into a URL — a query-parameter value, a path segment. This is the one you want 90% of the time.
- encodeURI leaves the URL's structural characters (: / ? & #) alone so a full address stays usable. Use it only when encoding a complete URL, never for an individual value.

Getting this wrong is the classic bug: encode a query value with encodeURI and an & inside it stays literal, splitting your one parameter into two and corrupting the request.

Spaces: %20 vs +. In a path, a space is %20. In a traditional form-encoded query string (application/x-www-form-urlencoded), a space is +. They're both "space" but in different contexts — mixing them causes subtle bugs.

Pitfalls and fixes

⚠Using encodeURI for a query-parameter value

encodeURI leaves & = ? intact, so if your value contains an ampersand it stays literal and splits your parameter in two, corrupting the query. Use encodeURIComponent for individual values.

⚠Double-encoding

Encoding an already-encoded string turns %20 into %2520. Encode exactly once. If you see %25 where you expected %, something encoded it twice — decode until it's clean, then encode once.

⚠Confusing + and %20 for spaces

A space is %20 in a URL path but + in a traditional form-encoded query string. Decoding a + as a literal plus (or vice versa) in the wrong context produces wrong values. Match the context.

⚠Decoding a malformed percent sequence

A stray % not followed by two hex digits (like 100% off) makes strict decoders throw. Encode the source properly, or escape the lone % as %25 before decoding.

⚠Forgetting non-ASCII becomes multiple bytes

Characters like é or emoji are UTF-8 encoded first, so one character can become several %XX pairs (é is %C3%A9). That's correct — don't mistake it for corruption.

URL Encoder/Decoder — comparisons and alternatives

encodeURIComponent vs encodeURI. The whole game: encodeURIComponent is for a *value*, encodeURI is for a *whole URL*. If you're building ?q=<something>, encode the something with encodeURIComponent. If you have a finished URL with spaces in it and just want it valid, encodeURI. When in doubt, you almost always want component.

URL-encoding vs Base64. Percent-encoding keeps text mostly readable and is meant for URLs. Base64 turns *binary* into text and roughly inflates size by a third. Use URL-encoding for URL text, Base64 for embedding binary — they solve different problems.

Encoding vs the URL parser. Encoding transforms text; the parser (below the encoder here) just *reads* a URL apart into protocol/host/path/query so you can see what it contains. Reach for the parser when debugging a link, the encoder when building one.

Questions and answers

▶encodeURIComponent or encodeURI — which do I use?

Use encodeURIComponent for a single value you're inserting into a URL (a query parameter, a path segment). Use encodeURI only for a whole URL you want to keep structurally intact. Nine times out of ten, you want encodeURIComponent.

▶Why is my query parameter breaking?

Almost always because the value was encoded with encodeURI (or not at all), leaving an & or = inside it literal. That splits your parameter. Re-encode just the value with encodeURIComponent.

▶Should a space be + or %20?

%20 in a URL path; + in a classic form-encoded query string. Both mean space, but in different contexts. If a decoded space shows as a literal +, it was form-encoded — decode it accordingly.

▶Is my input sent to a server?

No. Encoding, decoding, and URL parsing all happen in your browser. Nothing is transmitted, so it's fine to paste URLs with sensitive tokens or parameters.

▶What does the URL parser show me?

It splits any URL into protocol, host, path, query string, fragment, and a list of each query parameter and its value — useful for reading long tracking or redirect URLs and seeing exactly what they carry.

▶Why did one character become several %XX codes?

Non-ASCII characters are UTF-8 encoded before percent-encoding, so a single accented letter or emoji maps to multiple bytes. For example é becomes %C3%A9. That's correct behavior, not an error.

Further reading

Advertisement

Related tools

All Encoders & Decoders
🔄

Base64 Encoder/Decoder

Encode and decode Base64 strings, files, and images instantly

🔗

Extract URLs from Text

Extract every URL from pasted text with deduplication, validation, and export to CSV, JSON, or newline-separated list.

🔢

Hex to Text Converter

Convert hexadecimal byte sequences to readable ASCII or UTF-8 text with flexible input formatting.

🏷️

HTML Entity Encoder/Decoder

Encode special characters to HTML entities (&amp;, &lt;, &quot;, &copy;) or decode entities back to their literal characters.

🔡

JSON Escape/Unescape

Escape JSON for embedding in code or unescape JSON strings back to readable format

🎫

JWT Decoder

Decode and inspect JSON Web Token (JWT) headers, payloads, and signatures

Learn more

How to Decode a JWT: A Practical Debugging Guide (with the Base64URL Gotcha Nobody Warns You About)

17 min read

UUID v4 vs v7: The Default Has Quietly Changed

22 min read

MD5, SHA-1, SHA-256: Three Kinds of Hashing Everyone Confuses

24 min read

Explore more tools

200+ free tools that run in your browser.

Browse all tools →