Query String Builder — URL Parameter Encoder

Introduction

?search=hello world&filter=a&b breaks parsers because unencoded spaces and ampersands split parameters incorrectly. encodeURIComponent exists in every JavaScript runtime, yet developers still hand-build query strings in Slack messages and break production links. RFC 3986 reserves characters that must be percent-encoded in query values — spaces become %20 or + depending on context, Unicode needs UTF-8 percent encoding, and & inside values must not terminate early.

Certoflow's Query String Builder maintains rows of key-value pairs, filters empty keys, encodes both sides with encodeURIComponent, and joins with &. The read-only output shows the full string with leading ? for paste into browsers or curl. Processing is live — no generate button. Pair with URL Encoder for full URL components, CORS Header Generator when testing cross-origin fetch URLs, and JSON Formatter when APIs return query-parseable error bodies.

What this tool does

Feature	Behavior
Key-value rows	Editable pairs; default sample q=search, page=1
Add param	Appends empty row for new pairs
Encoding	encodeURIComponent on trimmed keys and raw values
Output	?key=value&... or empty when no valid keys
Copy	Copies encoded string without ? prefix (toolbar copies query body)

Rows with blank keys after trim are omitted. Values may be empty (key=). The UI does not reorder, sort, or deduplicate duplicate keys — last duplicate wins in most servers, but behavior varies.

How it works

export function buildQueryString(params: { key: string; value: string }[]): string {
  return params
    .filter((p) => p.key.trim())
    .map((p) => `${encodeURIComponent(p.key.trim())}=${encodeURIComponent(p.value)}`)
    .join("&");
}

The component displays ?${output} in the textarea while copy may pass only the query body per toolbar wiring. Encoding uses JavaScript standard — spaces become %20, not + (form encoding differs; use URL Encoder for application/x-www-form-urlencoded semantics if needed).

Real-world examples

REST API manual testing

Building GET /api/items?category=books&sort=price&order=desc for Postman or browser address bar. Add Unicode category names — encoding handles non-ASCII automatically.

Debugging double-encoding bugs

Your framework encodes twice, turning spaces into %2520. Build the correct string here, compare to broken production URLs, fix middleware order.

OAuth redirect URI parameters

Assemble client_id, redirect_uri, response_type, scope for authorization URL documentation. Validate redirect_uri encoding matches identity provider expectations.

Analytics campaign links

Marketing needs UTM parameters with spaces in utm_campaign. Encode safely before sharing — paste into QR Code Generator for printed materials.

Pagination helpers

Standard page, limit, cursor tuples for internal admin tools. Combine with HTTP Status Code Lookup when malformed queries return 400.

Common mistakes

Expecting + for spaces. encodeURIComponent uses %20. HTML form posts often use + — know your consumer.

Including ? twice when pasting. Output textarea shows leading ?; some copy actions omit it — verify what you paste into curl -G versus raw path append.

Leaving duplicate keys unintentionally. filter=a&filter=b may mean last-wins or multi-value arrays depending on server. Consolidate rows consciously.

Encoding the entire URL. This tool encodes query components only. Encode path segments separately.

Empty values dropped incorrectly. Empty value is valid (key=). Only empty keys are filtered.

Not encoding hash fragments. # section is client-only and not sent to servers — do not put query params after #.

Assuming case normalization. Encoded output preserves case in keys and values.

Use cases

Frontend developers prototyping fetch URLs with complex filters.

QA engineers constructing edge-case query strings for parser tests.

Technical writers documenting API examples with correct encoding.

Support staff reproducing customer URLs with special characters.

SEO specialists building parameterized links before crawler testing.

Students learning difference between URI components and full URLs.

FAQ

Is encoding live?

Yes. Output updates as you edit rows.

What happens to empty keys?

Rows with blank keys are excluded from output.

Can values contain &?

Yes. They encode to %26 and will not split parameters.

Does copy include the ??

The displayed textarea includes ?; verify copy button behavior for your paste target.

How do I add many parameters?

Click Add param for each new row.

Is data uploaded?

No. All encoding runs locally.

How is this different from URL Encoder?

Query String Builder assembles multi-parameter query strings from rows; URL Encoder typically handles single component encode/decode.

Does this decode query strings?

No. Use URL Decoder for parsing.

Unicode support?

Yes. encodeURIComponent UTF-8-encodes Unicode code points.

Offline use?

Yes, after page load.

Can I build fragment identifiers?

Hash fragments (#section) are not part of the query string. Build query parameters here, then append #fragment manually after the hash if your URL needs in-page anchors.

How do arrays serialize?

This tool does not emit key[]=a&key[]=b bracket notation. Add duplicate keys manually or post-process — server frameworks disagree on array encoding conventions.