URL Builder
Assemble a URL from a JSON config — encoding handled, repeated keys supported
Config (JSON)
URL
What is the URL Builder?
Hand a JSON object describing the parts of a URL — protocol, host, path, query parameters, hash — and the tool gives you the assembled URL back, properly percent-encoded. It uses the browser's native URL API under the hood, so the output matches exactly what a browser would emit if you constructed the URL in JavaScript yourself.
The reason this exists: building a URL by hand is where bugs hide. You forget to encode a space in a customer name, you double-encode a slash that was already encoded, you mix up ? and &, you lose a value because you used + instead of %20. The WHATWG URL spec defines exactly one right answer for each input, and that's what you get here. Repeated query keys (e.g. tag=red&tag=blue) are supported by passing an array — same shape URLSearchParams accepts.
It runs entirely in your browser. The JSON config and the assembled URL never leave your machine. The encoding rules come straight from RFC 3986 and the WHATWG refinements on top of it. Pair it with the URL Parser when you want to round-trip a URL through a structured form.
How to Use the URL Builder
Three steps. Each one matches a button on this page.
Drop in a JSON Config
Paste a JSON object on the left describing the URL parts. protocol and host are required; everything else is optional. Click Sample to load a realistic example with multiple query parameters and a hash:
{
"protocol": "https",
"host": "api.shop.example.com",
"pathname": "/v1/orders",
"searchParams": {
"customer": "Ava Chen",
"status": "active",
"total[gte]": "49.99",
"page": "2"
},
"hash": "summary"
}Optional fields: port, username, password, hash. Inside searchParams, a string is one value; an array is repeated keys.
Read the Assembled URL
The right panel shows the assembled URL string. Spaces become + in the query string, brackets become %5B/%5D, the path is normalised — same encoding the URL standard defines. Updates as you type.
Copy or Download
Click Copy to send the URL to your clipboard, or Download to save it as a text file. Use Clear on the input panel to start over.
When You'd Actually Use This
Crafting test fixtures for an HTTP client
You're writing a test that hits /v1/orders with eight query parameters, two of which contain spaces and one of which is repeated. Hand-typing the encoded URL into the test is error-prone. Build it from a JSON object you can copy from a real request log, paste the resulting URL into the assertion. Done.
Building OAuth authorize URLs
OAuth authorize URLs cram client_id, redirect_uri, scope, state, response_type, and code_challenge into the query string. RFC 6749 requires those exact param names and a redirect_uri that's already encoded once before the whole URL is encoded again. The builder handles that transparently — you give it the raw values and it does the right thing.
Generating analytics or share URLs in a script
When you're generating a campaign URL with UTM parameters, the parameters often come from a spreadsheet where utm_campaign values contain spaces, ampersands, and the occasional emoji. Letting the URL constructor handle encoding is safer than a string template. The output is identical to what Node's URL module would produce.
Reproducing a bug from a customer support ticket
A customer reports that a search with q=résumé writer 500s on the API. You want to reproduce the exact request. Build the URL from JSON, then curl it. The accent on the e and the space both get encoded the way the browser would have sent them — no guessing.
Common Questions
What's the difference between the URL Builder and concatenating strings myself?
Encoding. https://api.example.com/orders?customer=Ava Chen is not a valid URL — the space breaks it. The builder uses URLSearchParams internally, which encodes that space as + in the query string and as %20 in the path. Hand-rolled string concatenation gets one of those wrong sooner or later.
How do I send a query parameter twice (e.g. ?tag=red&tag=blue)?
Use an array as the value: "tag": ["red", "blue"]. The builder emits tag=red&tag=blue in the order you provided. This matches the URLSearchParams spec.
Do I need to include the colon after protocol (https:) or just https?
Either works. The builder normalises both "protocol": "https" and "protocol": "https:" to https:. Same for http, ftp, mailto, and custom schemes.
Can I include credentials (username/password) in the URL?
Yes — set "username" and "password" on the config. They'll appear before the host as user:pass@host. Be aware that RFC 3986 §3.2.1 warns against this in production URLs because they end up in browser history, server logs, and proxy caches.
Why does my space become + instead of %20?
Spaces in the query component are typically encoded as + per the application/x-www-form-urlencoded rules — that's what URLSearchParams emits. Spaces in the path are encoded as %20. Both are valid; servers decode either form. If your server is broken and only handles %20, you have a bigger problem than this tool.
Other URL & JSON Tools
Building is one direction. Here's what else pairs naturally with it: