URL Parser & Query Parameter Editor

URL structure guide

Anatomy of a URL and query string reference

A Uniform Resource Locator (URL) is a structured string that identifies a resource on the internet. Understanding its components is essential for web development, API integration, analytics configuration, and debugging network requests. This tool parses any URL into its individual parts and lets you edit them interactively.

The components of a URL

A complete URL can contain up to six distinct structural components. Not all are required, but each has a specific role:

• Protocol (scheme): Specifies the communication protocol to use. Common values are https (secure HTTP), http (standard HTTP), ftp(file transfer), and mailto (email). The colon and double slash (://) are delimiters that separate the protocol from the rest of the URL.
• Hostname: The domain name or IP address of the server hosting the resource. For example,api.example.com or 192.168.1.1. The hostname is the only required component in a standard web URL.
• Port: An optional numeric value that specifies which network port to connect to on the server. Standard ports are usually omitted (80 for HTTP, 443 for HTTPS), but non-standard ports like 8080 or 3000 must be explicitly included.
• Path: Identifies the specific resource or endpoint on the server. Always begins with a forward slash (/). For example, /api/v1/users or/blog/how-to-parse-urls.
• Query string: A set of key-value pairs appended after a question mark (?). Multiple parameters are separated by ampersands (&). For example,?page=2&sort=asc&filter=active.
• Hash (fragment): An optional anchor that references a specific section within the page. Begins with a hash symbol (#) and is never sent to the server -- it is processed entirely by the browser. For example,#section-3.

Query strings and percent-encoding

Query parameter values that contain special characters (spaces, ampersands, equals signs, Unicode characters, etc.) must be percent-encoded to form a valid URL. Percent-encoding replaces each unsafe byte with a percent sign followed by two hexadecimal digits.

• Space ( ) becomes %20 (or + in form data)
• Ampersand (&) becomes %26
• Equals (=) becomes %3D
• Hash (#) becomes %23
• Slash (/) becomes %2F

This tool automatically decodes percent-encoded values when parsing a URL so you can read them as plain text in the parameter table. When rebuilding the URL, it re-encodes any characters that require encoding using encodeURIComponent. Parameters marked with the %enc badge contain characters that were or will be encoded.

Enabling and disabling parameters

Each query parameter row includes an Active checkbox. Unchecking it removes that parameter from the rebuilt URL without deleting the row. This is useful for quickly testing how a page or API endpoint behaves with or without a specific parameter, without losing the key-value pair from your workspace.

Common URL patterns in web development

Understanding URL structure helps you build more predictable APIs and debug network issues faster. Common patterns include:

• REST API endpoints: /api/v2/users/123-- where 123 is a path parameter identifying a specific resource.
• Pagination: ?page=2&per_page=50-- standard pagination query parameters.
• Search: ?q=search+term&lang=en-- search query with optional filters.
• UTM tracking: ?utm_source=newsletter&utm_medium=email&utm_campaign=may2026-- marketing attribution parameters used by analytics tools.
• OAuth redirects: ?code=AUTH_CODE&state=CSRF_TOKEN-- parameters passed back from an OAuth provider.

How the bidirectional sync works

This tool maintains two-way synchronisation between the URL input and the component fields. When you edit the raw URL, it is parsed using the browser's native URL constructor, which handles edge cases like protocol normalisation and encoded characters. When you edit any field or parameter, the tool rebuilds the complete URL by concatenating the components and encoding parameters withencodeURIComponent.

The colour-coded URL strip below the component fields shows each part highlighted in a distinct colour, making it easy to see exactly which portion of the URL is produced by each component.

Disclaimer

This tool uses the browser's built-in URL API for parsing, which follows the WHATWG URL standard. Some less common URL schemes or non-standard URLs may not parse correctly. All processing is client-side -- no URLs are sent to a server.