URL Encoder/Decoder

encodeURIComponent/decodeURIComponent in the browser for query strings and APIs.

{{ url.message }}

Overview

URLs were invented by Tim Berners-Lee in 1991 alongside HTML and HTTP as part of the project that would become the World Wide Web. The format we use today — that `https://example.com/page?param=value&other=123` structure — was formalized in RFC 1738 in 1994 and refined through RFC 3986 in 2005. There is an inherent tension in the original design: URLs must be transmitted as pure ASCII text, yet the world communicates in hundreds of languages with accents, special characters, and scripts entirely different from the Latin alphabet. The solution was percent-encoding: any byte that is not a safe ASCII character is represented as `%` followed by two hexadecimal digits. The letter `ã` in UTF-8, for instance, occupies two bytes — 0xC3 and 0xA3 — and becomes `%C3%A3`.

The part almost every developer learns the hard way is the difference between `encodeURIComponent` and `encodeURI`. The `encodeURI` function preserves structurally significant URL characters — `/`, `?`, `#`, `&`, `=` — because it was designed to encode a complete URL. `encodeURIComponent`, on the other hand, encodes those characters too, because it was designed to encode a value inside a URL, where `/`, `?`, and `&` cannot appear unescaped. When you manually build a query string by string concatenation, any value containing `&`, `=`, `+`, or `#` will silently corrupt server-side parsing. This happens far more often than it should, especially with names containing apostrophes, spaces, or the undisputed champion of encoding bugs — the `@` in email addresses passed as query parameters.

A critical pitfall when working with URL encoding is double encoding — encoding something that is already encoded. If you receive a URL that already contains `%20` and feed it through `encodeURIComponent`, the `%` becomes `%25` and the result is `%2520`, which the server will interpret as the literal string `%20` rather than a space. Another common source of confusion is the difference between `%20` and `+` for spaces: HTML forms encode spaces as `+` in `application/x-www-form-urlencoded`, but RFC 3986 specifies `%20`. Most servers accept both, but in contexts like API request signing — AWS being the prime example — the distinction is critical and can produce authentication errors that are notoriously hard to diagnose.

Technical deep dive

Common questions summarized

  • What is this tool for?: It runs fully in your browser: useful to validate, format, or convert data in everyday development.
  • Are my inputs sent to a server?: Processing happens locally with JavaScript. We do not store what you paste into the text areas.
  • Can I use this for real production data?: Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.

Sample payload to try

  • See also the larger "Code Snippets" sample; paste this excerpt to try locally: Query — nome=João Silva → nome=Jo%C3%A3o%20Silva

Tool guide

  • What URL encoding (percent-encoding) is Reserved or non-ASCII characters in URLs are written as % plus two hex digits (e.g. space as %20). Query strings need this so parsing does not break.

  • What the tool does Applies encodeURIComponent / decodeURIComponent to the text.

  • Why use it Build links with accented names, debug redirects, test integrations with special parameters.

Code Snippets

Code example
nome=João Silva → nome=Jo%C3%A3o%20Silva

Query

nome=João Silva → nome=Jo%C3%A3o%20Silva

FAQ

What is this tool for?

It runs fully in your browser: useful to validate, format, or convert data in everyday development.

Are my inputs sent to a server?

Processing happens locally with JavaScript. We do not store what you paste into the text areas.

Can I use this for real production data?

Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.