The Complete Guide to URL Encoding, Decoding, and Building
URLs are the addressing fabric of the web, and they have strict grammar rules that got tighter as the web grew. The URL Builders, Encoders, and Decoders that live on this page together compose the complete URL working surface: encode to turn unsafe characters into safe percent-escaped sequences, decode to reveal the meaning of an encoded URL, and build to compose a new URL from individual parts without worrying about commas and slashes colliding. The right tool depends on which direction you are headed; the three tools together cover every direction of URL manipulation.
1. URL encoding — which characters must be escaped
URLs reserve certain characters for structural purposes: / separates path segments, ? introduces the query, & joins query parameters, = separates keys from values, # introduces the fragment. If you want to put any of those characters in data — a path component that should be a literal slash, an ampersand inside a query value — percent-encoding is required: / becomes %2F, & becomes %26, and so on. URL encoding (also called percent-encoding) is the only safe way to put a reserved or unsafe character in a URL value; the alternative is corrupted URLs where parameters leak into each other or paths break.
2. URL decoding — when you receive encoded data
Most of the URLs you receive from external sources are encoded — OAuth callback URLs, redirect destination URLs, URL parameters appended to a destination, webhook payloads. To understand what the URL actually says, you need to decode the percent-encoded sequences back to their characters before you can interpret the values. This tool exposes both directions simultaneously: paste an encoded URL into the decode side and see the decoded form; paste a URL with reserved characters into the encode side and see the safe encoded form. The two-sided view is exactly what makes a URL tool useful for debugging — you can immediately see what was sent and what it means.
3. The builder — paste parts, get a valid URL
Composing a valid URL by hand — concatenating a base, a path with slashes, query parameters with ampersands and equal signs, and a fragment — is a manual process that invites mistakes: forgetting a separator, double-encoding, mishandling an ampersand in a value. A URL builder is the structural answer: paste the individual components and let the builder produce the well-formed URL, dealing with separator placement, encoding, and order automatically. For building OAuth callback URLs, API request URLs, sharing links, or any case where the URL is generated rather than received, a builder saves the most common class of bug outright — the malformed URL that fails silently or with a confusing error.
4. Live preview — see the result as you type
Every URL operation is interactive: type or paste in the input, see the encoded, decoded, or built result instantly. For debugging, the live preview shows you the effect of changing one character at a time — useful for narrowing down exactly which character in a long URL is triggering the encoding issue. For building, the live preview shows you the URL you would send out before you commit it to code, catching typos at their source rather than two stack traces later.
5. Example presets and the History panel
Example templates for common URL shapes — OAuth callback URLs, API request URLs, signed asset URLs, email-template URLs, social-share URLs — are available as one-click starters so you do not have to remember the exact structure of an OAuth callback from memory. The History panel stores your last few operations so you can re-run a recent encode or decode without re-pasting. Both features are small quality-of-life additions that compound on a tool you use many times a day.
6. Reserved vs unreserved characters — what gets encoded
URLs define two classes of characters. Unreserved characters — the alphanumeric characters and a few safe symbols (-, ., _, ~) — never need encoding. Reservedcharacters — everything used for structural purposes plus a few others — need encoding when they appear in data and must not appear outside encoding when they would be ambiguous. A character that is technically allowed but ambiguous (a space, a control character, a non-ASCII character) is encoded for safety. The encoder on this page follows WHATWG conventions — the same rules the browser uses when it sends a URL across the network — so the output is correct in every environment, not just visually safe.
7. Why this belongs in your browser
URLs often contain credentials, internal hostnames, OAuth tokens, or API keys as query parameters — all of which are sensitive. Uploading a URL to a remote encoder or decoder is a small but real confidentiality risk. This tool runs every operation entirely in your browser; nothing leaves your device. There is no upload, no retention, no telemetry. The URL you encode, decode, or build stays on the machine you did it on.
Conclusion
The URL tool combines the three operations most practitioners need — encode, decode, build — in a single page so any direction of URL manipulation is one paste away. Live preview, example templates, history, WHATWG-compliant encoding behaviour, and zero upload together make this tool a workhorse for any web developer who handles URLs more than once a day — which is to say, every web developer.