URL Builder

Built https://example.com:8443/search%20results?q=hello+world&lang=en#section%201 with 2 query parameter(s).

How it works

• Combined the scheme (https) and host (example.com) with the optional port.
• Set the path, percent-encoding each component exactly once.
• Serialized 2 query parameter(s) with URLSearchParams.
• Appended the fragment when one was supplied.

• The built URL re-parsed by the URL Parser reproduces these parts.

Methodology

1. Validate the scheme against the URI grammar, the host as a non-empty host name, and the optional port as an integer in 0–65535.
2. Construct the authority as scheme://host[:port] and let the platform URL parser normalize the host.
3. Assign the path, letting the platform serializer percent-encode characters that are not allowed in a path.
4. Serialize the query lines with URLSearchParams so reserved characters are encoded exactly once, then set the fragment.

Usage

1. Enter the scheme (for example https) and host.
2. Add an optional port, path and fragment.
3. Enter one query parameter per line as key=value, then read the built URL.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

Build a URL with a query and fragment

{
  "scheme": "https",
  "host": "example.com",
  "port": "8443",
  "path": "/search results",
  "query": "q=hello world\nlang=en",
  "fragment": "section 1"
}

Host and path only

{
  "scheme": "https",
  "host": "example.com",
  "port": "",
  "path": "/docs",
  "query": "",
  "fragment": ""
}

Query with a reserved character

{
  "scheme": "https",
  "host": "example.com",
  "port": "",
  "path": "/",
  "query": "redirect=https://other.example/a?b=1",
  "fragment": ""
}

Limitations

Encode once

The most common URL bug is double-encoding: a value that is already percent-encoded is encoded again, so %20 becomes %2520. This builder treats each input field as an unencoded component and lets the platform serializer encode it once. Paste raw values, not pre-encoded ones.

Builder and parser agree

The URL Parser and URL Builder share the same WHATWG component model, so parsing a built URL returns the same scheme, host, path, parameters and fragment. That round-trip is covered by the tool's property tests.