JSON config

URL

What does JSON to URL do?

You have a JSON object that describes the parts of an HTTP endpoint — protocol, host, path, query parameters, hash — and you need it as a single URL string that fetch(), curl, or your HTTP client can swallow. Paste the JSON on the left, get the assembled, percent-encoded URL on the right. Same direction every backend test fixture, every OpenAPI example, and every config file eventually has to make.

It uses the browser's native URL constructor and URLSearchParams to assemble the URL, so the encoding is exactly what the WHATWG URL Standard defines and exactly what a real browser would send. Spaces in the query become +, brackets become %5B/%5D, accents and emoji get UTF-8 percent-encoded. Repeated query keys are supported by passing an array — "tag": ["red", "blue"] emits tag=red&tag=blue.

This page exists because most projects already store URLs as JSON somewhere — environment files, Postman collections, Cypress fixtures, OpenAPI specs, Helm values. When you need that JSON as an actual URL string for a script or a one-off curl, hand-stitching it is where bugs hide. The conversion follows RFC 3986 for URL syntax and accepts standard JSON per RFC 8259 on input. Everything runs locally — the JSON and the URL never leave your browser. The reverse direction lives at URL to JSON.

How to Convert JSON to a URL

Three steps. Each one matches a button on this page.

Paste a JSON Config or Load the Sample

Drop a JSON object on the left describing the URL parts. protocol and host are the only required fields; everything else is optional. Click Sample to load a realistic e-commerce endpoint 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, pathname, searchParams, hash. Inside searchParams, a string is a single value; an array is repeated keys. JSON syntax is parsed with JSON.parse — no comments, no trailing commas.

Read the Assembled URL

The right panel updates as you type. You'll see the full URL — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — with every part percent-encoded the way the URL standard defines. Drop it straight into a fetch() call, a curl command, a Postman test, or a config file expecting a single URL string.

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 with a fresh config.

When You'd Actually Use This

Turning OpenAPI examples into runnable curl commands

OpenAPI specs describe servers as {url, variables} and operations as paths with parameters. Composing the actual URL from those pieces by hand for a one-off curl is fiddly — substituting path variables, encoding query parameters, getting the trailing slash right. Drop the merged JSON in here, copy the URL out, paste into curl. The merged shape lines up with what the OpenAPI server-object describes.

Building URLs from environment-variable splits

A 12-factor app stores URL parts as separate env vars: API_HOST, API_PORT, API_BASE_PATH, API_TOKEN_PARAM. To produce the full URL for a sanity-check curl during incident response, you assemble them. Paste the JSON shape into this page, get the URL, run it. Faster than scripting in bash and you don't risk forgetting to encode a token containing +.

Cypress and Playwright fixtures that store URLs as objects

Test fixtures often store request URLs in a structured form so individual parts (the orderId path param, the page query param) can be asserted on. When the fixture also needs to make a real HTTP call (e.g. to seed data via cy.request or page.goto), the structured form has to become a string. JSON to URL turns Marco Rivera's saved fixture object into the URL the test harness can hit.

Webhook URLs assembled from tenant-scoped configs

Multi-tenant systems store webhook configs per customer: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}. The dispatcher reads the JSON and needs a URL string to POST to. Same conversion this page does, just done at runtime. Use the page to verify the URL your code is going to produce matches what the customer registered.

Common Questions

What's the difference between this and the URL Builder page?

Same engine, different framing. The URL Builder is for the case where you sit down to assemble a URL from scratch — you're composing a request. JSON to URL is for the case where the JSON already exists somewhere (a config, an OpenAPI spec, a fixture, an env-var split) and you need it converted into the URL string a piece of code expects. Pick whichever framing matches what you're doing — the output is identical.

My JSON has the URL stored differently — can I use any shape?

It needs the WHATWG URL part names: protocol, host, port, username, password, pathname, searchParams (object), hash. If your JSON uses different keys (scheme, baseUrl, query, fragment), rename them first. The shape mirrors what new URL(...) exposes and what the URL spec defines, so you're aligning with the same model fetch and Node use internally.

How do I send a query parameter twice (e.g. ?tag=red&tag=blue)?

Use an array as the value: "tag": ["red", "blue"]. The converter emits tag=red&tag=blue in the order you provided. This matches how URLSearchParams handles repeated keys and is what most servers (Express, Rails, ASP.NET) expect for array-style query params.

Why does my space become + instead of %20?

Spaces in the query component are 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 per RFC 3986 and every server decodes either form. If your server only accepts %20 in the query, the bug is on the server.

Can I include credentials (username/password) in the URL?

Yes — set "username" and "password" in the JSON. They'll appear before the host as user:pass@host. RFC 3986 §3.2.1 warns against this in production URLs because they end up in browser history, server logs, and proxy caches — fine for a quick local test, not fine in shared configs.

Does the URL ever leave my browser?

No. The JSON parsing is JSON.parse in your tab; the URL assembly is new URL(...) in your tab; neither calls a server. There's no upload and no logging. You can run the page once with internet, then disconnect and keep using it from cache.

Other URL & JSON Tools

JSON to URL is one half of the round trip. Here's the rest of the kit: