URL Builder
Assemble a valid URL from a protocol, hostname, port, path, query parameters, and hash. Everything is constructed in your browser with the native WHATWG URL API, so your links are built correctly and stay completely private.
How to Build a URL
- 1
Choose a protocol and hostname
Select a protocol from the dropdown — https, http, ftp, or file — and type the hostname, such as example.com. The hostname is the one required field: until you enter it, the builder leaves the result blank because there is nothing to anchor the URL to.
- 2
Fill in the path, port, and hash
Add an optional port for non-standard endpoints, a pathname such as /api/v1/users, and a hash fragment like #section. Each value is applied through the URL object, so the structure is always normalized into a valid link as you type.
- 3
Add query parameters
Press Add Parameter to insert as many key-value rows as you need. Each non-empty key is appended with searchParams.append, which percent-encodes values for you. Remove any row with the X button if you change your mind.
- 4
Copy or open the result
The finished URL appears in the result box the instant it is valid. Use Copy URL to send it to your clipboard, or Open URL to launch it in a new browser tab and confirm it points where you expect.
Why Use a URL Builder?
Correct Encoding Every Time
Hand-writing a URL with special characters is where bugs creep in: a stray space, an unescaped ampersand, a missing question mark. Because the builder appends each parameter through URLSearchParams, reserved characters are percent-encoded automatically, so the URL you get is always well-formed.
Standards-Based Output
The builder constructs the result with the browser's native URL constructor, which implements the WHATWG URL Standard. That means the link behaves exactly the way it will in your application code, your server, and every modern browser.
Completely Private
Everything happens on the client. You can build URLs that contain internal hostnames, signed tokens, or sensitive query values without any of it being logged or transmitted to a server.
No Setup, Works Everywhere
There is nothing to install and no account to create. The builder loads in any modern browser on desktop or mobile, making it a quick companion when you need a precise URL away from your usual tooling.
Common Scenarios
Constructing API Request URLs by Hand
When you are testing an endpoint in a browser, a REST client, or a quick script, you often need a URL with several query parameters set just so. Filling in the hostname, path, and a handful of key-value pairs in the builder produces a ready-to-paste URL with every value correctly encoded, which saves you from chasing a 400 error caused by an unescaped character.
Creating Campaign and Tracking Links
Marketing links need consistent utm_source, utm_medium, and utm_campaign parameters. The builder lets you start from a clean hostname and path, then add each tracking parameter as its own row, so you can produce a batch of correct links without copy-pasting and editing a long query string in a text editor.
Building Deep Links With Fragments
Single-page apps and documentation sites often rely on hash fragments to jump to a section or restore state. Setting the hash field alongside the path and query parameters gives you a complete deep link in one place, which you can immediately open in a new tab to verify it lands on the right view.
Tips and Best Practices
Start With the Hostname
Because the builder produces nothing until a hostname is present, enter that field first. Once it is filled, you will see the URL update live as you add the port, path, hash, and parameters around it.
Type Values, Not Encoded Strings
Put the readable value in the parameter field — a real space, a real ampersand — and let the builder encode it. If you paste an already-encoded value, you can end up double-encoding it, which is a common and confusing bug.
Only Set a Port When You Need One
Standard ports such as 443 for https and 80 for http are implied. Leave the port field empty unless you are targeting a non-default port, otherwise you may add a redundant :443 or :80 to your link.
Pair It With the Parser
After building a URL, paste it into the URL Parser to confirm every component landed where you intended. The builder and parser are mirror images: one assembles, the other inspects.
Compared to Alternatives
The quickest alternative is to type the URL by hand in a text editor or the address bar. That works for a simple link, but the moment you have spaces, non-ASCII characters, or several query parameters, manual editing becomes error-prone — a single missing percent escape can break the request. URL Shuttle's builder removes that risk by appending each parameter through URLSearchParams, so encoding is never something you have to remember.
Some developers reach for the browser console and write new URL(...) plus searchParams.append calls themselves. That is accurate and private, but it requires opening devtools, knowing the API, and reassembling the string by hand. This builder gives you the same standards-based result through labelled fields and a live preview, which is faster when you just want a correct link.
Many online URL builders send the values you enter to a server to assemble the link. That is a problem when a parameter contains a session token or an internal hostname. Because this builder runs entirely in your browser with the URL API your browser already ships, sensitive values never leave the page, while you still get fully standards-compliant output.
Frequently Asked Questions
What does a URL builder do?
It assembles a complete, valid URL from separate fields: protocol, hostname, port, pathname, query parameters, and hash. The result is constructed with the browser's native URL object, so the output always follows the WHATWG URL Standard rather than relying on manual string concatenation.
Which protocols can I choose?
The dropdown offers https, http, ftp, and file. A hostname is required; once it is filled in, any port, path, hash, and query parameters you add are applied on top of it to produce the final URL.
Are query parameter values encoded automatically?
Yes. Each parameter is appended with URLSearchParams, which percent-encodes reserved characters such as spaces and ampersands for you. Type the readable value and the builder handles the encoding.
Is my data safe?
Completely. The builder runs entirely in your browser and never transmits anything you type. You can construct links containing tokens or internal hostnames with no privacy concern.
Why is the result box empty?
The builder only produces a URL once a hostname is present. If the hostname field is blank, or the values cannot form a valid URL, the result stays empty until you supply a usable hostname.
Can I open the URL straight away?
Yes. Alongside Copy URL there is an Open URL button that launches the assembled link in a new browser tab, so you can verify it works without leaving the page.
Ready to build more URLs? Explore the full URL Shuttle toolkit.
Back to URL Shuttle