Developer Tools

URL Builder

Build a valid URL from scheme, host, port, path, query parameters, and fragment in your browser. Live preview, request snippets, no signup.

URL parts

Load a sample

Scheme

Host

Secure HTTP. Default port 443 is dropped from the URL.

Path

A leading slash is added automatically. Reserved characters are percent-encoded by the browser.

Fragment / hash

The fragment is the part after the # symbol. It is never sent to the server. Useful for anchor links on a page.

Userinfo (rare; phishing flag on http/https)

Username

Password

Query parameters

Each row becomes one key=value pair. Repeat a key to send an array. Disable a row with the checkbox to keep it for later.

Built URL

https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2

Origin

https://example.com

Path + query

/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch

Query string

?utm_source=newsletter&utm_campaign=june_launch

Full URL

https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2

Anatomy

https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2

scheme
host
path
query
fragment

Query parameter table

How each pair is encoded on the wire by URLSearchParams (or mailto-style RFC 6068 encoding for mailto:).

Key	Value (typed)	Encoded
utm_source	newsletter	utm_source=newsletter
utm_campaign	june_launch	utm_campaign=june_launch

Use the URL in code

Ready-to-paste request snippets. The URL is the same one shown above and is JSON-string escaped where the language requires it.

cURL

curl 'https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2'

fetch (browser / Node 18+)

const response = await fetch("https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2");
const data = await response.text();

axios

import axios from "axios";
const { data } = await axios.get("https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2");

Python requests

import requests

response = requests.get("https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2")
response.raise_for_status()
print(response.text)

Node https.get

import { get } from "node:https";
get("https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2", (res) => {
  let body = "";
  res.setEncoding("utf8");
  res.on("data", (chunk) => (body += chunk));
  res.on("end", () => console.log(body));
});

HTML <a href>

<a href="https://example.com/blog/announcing-launch?utm_source=newsletter&utm_campaign=june_launch#section-2">Link</a>

How to use

Pick a scheme from the dropdown. Use https for web URLs, ws or wss for WebSocket endpoints, mailto/tel/sms for app links, or custom for a non-standard scheme.
Type the host (and optional port) for http, https, ws, wss, ftp, or file. For mailto/tel/sms, type the address or phone number in the Path field instead.
Type the path. A leading slash is added for you. Reserved characters are percent-encoded by the browser.
Add query parameters one row at a time. Repeat a key to send an array. Use the checkbox to disable a row without deleting it.
Add an optional fragment (the part after #). It is never sent to the server but is great for anchor links.
Copy the full URL, the origin, the path + query, or any code snippet. Use a sample button to start from a common shape.

About this tool

URL Builder composes a complete URL from its parts so you can stop hand-typing query strings, escaping reserved characters, or guessing what URLSearchParams will actually send. Pick a scheme (https, http, wss, ws, ftp, file, mailto, tel, sms, or a custom scheme), type a host (DNS name, IPv4 address, or a bracketed IPv6 literal), an optional port, a path, any number of query key/value pairs, and an optional fragment. The result panel shows the assembled URL with each component color-coded so you can see at a glance where the userinfo, host, port, path, query, and fragment begin and end. Behind the scenes the tool feeds the form through the browser's native WHATWG URL constructor and URLSearchParams, so every encoding decision (percent-escaping reserved characters, dropping the default port for the scheme, converting a Unicode hostname to punycode, bracketing IPv6 literals, normalizing the path) matches what your browser would actually send if you typed the URL in the address bar. Query parameters live in a small table where each row has a key, a value, a move-up/move-down control, and an enable checkbox so you can keep stale tracking params around for later without putting them in the live URL. Repeat a key to send an array (most APIs read repeated keys as a list). The result panel produces ready-to-paste request snippets for cURL, fetch, axios, Python requests, Node https.get, and an HTML anchor tag, with the URL JSON-string-escaped where the language needs it. A validation lane flags real-world gotchas before they bite: userinfo in https URLs (modern browsers refuse it and treat it as a phishing signal), default ports that get silently dropped, duplicate query keys that turn into arrays, Unicode hostnames that punycode away, and unbracketed IPv6 literals. Sample buttons load common shapes (UTM-tagged campaign, API call with array params, local dev with a port, WebSocket, mailto with subject and body, and an IPv6 host) so you can see exactly how the builder handles each one. Everything runs locally; the URL, its credentials if you ever set them, and your tracking parameters never leave your browser.

Free to use. Works in your browser. No signup, no login.

Related tools

URL Builder

How to use

About this tool

You may also like

URL Parser

URL Encoder Decoder

Query String Parser

UTM Builder

Google Maps Link Generator

Mailto Link Generator