#069 · Developer Utilities Developer Tool

URL Builder

Create valid, encoded URLs from structured fields and preserve duplicate query parameters without manual string concatenation.

Developer Input

URL components

Query parameters

Live URL Preview

Encoded output

How to use this developer tool

  1. Enter scheme, hostname, optional port, and path.
  2. Add query parameter rows.
  3. Add an optional fragment or UTM fields.
  4. Copy the generated encoded URL.

What this developer tool does

Builds a URL with the native URL and URLSearchParams APIs while preserving duplicate key order.

Validate host → create URL → assign path and port → append parameters → add fragment → serialize encoded URL.

Avoid embedding passwords or sensitive values in URLs because they may be logged or shared.

Example

https://example.com/search?query=css+tools&page=2#results

Tips for better output

  • Use query rows rather than manual string concatenation.
  • Keep shareable URLs reasonably short.
  • Use HTTPS for production links.

FAQ

How do I build a URL with multiple query parameters?

Add one row per parameter; duplicate keys are also supported.

How do I add UTM parameters to a URL?

Use the Add UTM Fields button and edit the generated values.

How do I encode spaces as plus signs in a query string?

URLSearchParams serializes spaces in query values as plus signs.

How do I add duplicate query parameters to a URL?

Add multiple rows with the same key.

How do I build a URL safely without manual string concatenation?

This tool uses the browser URL and URLSearchParams APIs for encoding and validation.

Supported formats and output

HTTP and HTTPS URLs with encoded paths, repeated query parameters, UTM fields, and fragments.