URL encoder, decoder & query parameter inspector
Encode or decode URLs, inspect path components, and extract query string parameters into an interactive table. All operations execute directly in your browser with zero data leakage.
How to encode, decode, and inspect URLs
- Select your operating mode:
- Component — Encodes individual query parameter keys, values, or path segments using
encodeURIComponent(). - Full URL — Encodes an entire URL while keeping structural delimiters (protocol, slashes, query delimiters) intact using
encodeURI(). - Decode — Translates percent-encoded sequences (such as
%20or%2F) back into human-readable plain text.
- Component — Encodes individual query parameter keys, values, or path segments using
- Type or paste your text or complete URL into the left pane.
- The encoded or decoded result appears instantly in the right-hand panel.
- If the input contains a URL with query parameters, an interactive Parsed Query Parameters table appears below, displaying extracted keys and decoded values with one-click copy buttons.
URI Architecture and the RFC 3986 Standard
Uniform Resource Identifiers (URIs) and URLs are governed internationally by RFC 3986. The specification establishes a standard syntax for locating resources across networks:
URI = scheme ":" ["//" authority] path ["?" query] ["#" fragment]
Because URLs are transmitted across diverse network infrastructure (routers, proxies, load balancers, DNS servers), only a restricted subset of US-ASCII characters can be safely included without risking transmission corruption. RFC 3986 partitions all characters into two fundamental categories:
1. Unreserved Characters
Unreserved characters have no syntactic function in the URI specification and are never percent-encoded:
- Uppercase letters:
A–Z - Lowercase letters:
a–z - Decimal digits:
0–9 - Special punctuation:
-(hyphen),_(underscore),.(period), and~(tilde)
2. Reserved Characters
Reserved characters serve as structural delimiters separating URI components. If a reserved character is intended to represent data (such as a slash inside a password or an ampersand in a company name), it must be percent-encoded to prevent parsers from misinterpreting the URL structure:
| Character | Percent Code | Syntactic Function in URIs |
|---|---|---|
/ (slash) | %2F | Separates hierarchical path segments. |
? (question mark) | %3F | Marks the beginning of the query parameter string. |
& (ampersand) | %26 | Separates individual parameter pairs in a query string. |
= (equals sign) | %3D | Separates a parameter key from its assigned value. |
# (hash) | %23 | Marks the beginning of the client-side URL fragment. |
: (colon) | %3A | Separates scheme from authority, or host from port number. |
@ (at sign) | %40 | Delimits user authentication info from hostname. |
(space) | %20 (or +) | Not permitted in raw URIs; must be encoded as %20 in RFC 3986. |
The Critical Difference: encodeURI vs encodeURIComponent
One of the most frequent sources of web application bugs in JavaScript is confusing encodeURI() and encodeURIComponent():
| Function | Preserved Characters | Intended Use Case |
|---|---|---|
encodeURIComponent() | Only unreserved: A-Za-z0-9 -_.!~*'() | Single query parameter values or keys. It encodes :, /, ?, &, and = into percent codes so they don't break the query string. |
encodeURI() | Preserves all URL structural delimiters: : / ? # [ ] @ ! $ & ' ( ) * + , ; = | Complete URLs where you want to encode invalid characters (like spaces or non-ASCII characters) while leaving the protocol, host, path, and query structure intact. |
Rule of Thumb: If you are building a query string (e.g. `https://api.example.com/search?q=${encodeURIComponent(query)}`), always use encodeURIComponent on the query string variables. If you pass an entire URL to encodeURIComponent, the protocol and slashes become https%3A%2F%2F, rendering the URL unclickable.
Application Form-Urlencoded vs RFC 3986
In HTML form submissions (MIME type application/x-www-form-urlencoded), spaces are historically encoded as a plus sign (+). In standard RFC 3986 URI paths, however, spaces must be encoded as %20, and + represents a literal plus character. DevSandbox intelligently decodes both %20 and + representations.
Client-Side Security and URL Parameter Inspection
Query strings in development environments often contain sensitive tokens: OAuth authorization codes, session identifiers, password reset tokens, and API secret keys. Testing these URLs on third-party online encoders can leak tokens to web server access logs, third-party analytics, and referer headers.
DevSandbox performs all URL parsing, percent-encoding, and query inspection 100% locally in your browser tab. With strict Content Security Policy enforcement, your sensitive endpoints and credentials never leave your machine.
Frequently asked questions
What is the difference between encodeURI and encodeURIComponent?
encodeURIComponent encodes all characters except letters, digits, and - _ . ! ~ * ' ( ), making it ideal for individual query parameters. encodeURI preserves URL structure characters like : / ? # & =, making it suitable for complete URLs.
Can I inspect and edit individual query parameters?
Yes. Pasting a URL automatically extracts all search query parameters into an interactive table where you can view keys, decoded values, and copy them directly.
Why are spaces encoded as %20 instead of +?
Under the RFC 3986 URI standard, spaces must be percent-encoded as %20. The plus sign (+) is historically used in HTML form submissions (application/x-www-form-urlencoded). DevSandbox decodes both formats seamlessly.
Are OAuth redirect URLs and query strings safe to paste here?
Yes. The entire parser runs locally in your browser tab. DevSandbox never sends your URLs, auth codes, or state parameters to any server.