JSON URL Encode Online — Encode JSON for URLs

Pass JSON safely as a URL query parameter. Validates, stringifies, and percent-encodes {}[]:," in one step — instantly, 100% in your browser.

Input (raw JSON)

Output (URL-safe)

What is JSON URL encoding?

JSON URL encoding is the two-step process of stringifying a JSON value and then percent-encoding the result so it can travel safely as a URL query parameter. The braces, brackets, colons, commas, and quotes that make JSON parseable are reserved or unsafe in URL components — without encoding, an embedded ampersand would split the parameter and a brace would be rejected by strict routers.

Use this tool whenever you need to push structured data through a URL: OAuth state objects, deep-link configuration, complex search filters, analytics events, or webhook callback parameters. Validation runs first to catch malformed JSON before it reaches production.

How to encode JSON for a URL — 4 steps

Paste raw JSON. The Input panel accepts pretty-printed or compact JSON of any depth.
Click Encode. The tool calls JSON.parse for validation, then JSON.stringify to canonicalise, then encodeURIComponent to escape.
Inspect the output. Every { becomes %7B, : becomes %3A, quotes become %22, and the whole value is one URL-safe line.
Embed in your URL. Paste after the parameter equals sign — ?state=… or ?filters=… — and the JSON is safe to transmit.

Side-by-side example

Raw JSON

{"id":42,"tags":["a","b"]}

URL-encoded

%7B%22id%22%3A42%2C%22tags%22%3A%5B%22a%22%2C%22b%22%5D%7D

Validation First

JSON.parse runs before encoding. Malformed input fails fast with the parser error and exact position — no broken URLs in production.

Canonical & Compact

Whitespace is normalised by JSON.stringify so the encoded value is as short as possible — important under URL length limits.

Roundtrip Safe

The output decodes cleanly back to identical structure, types, and Unicode using JSON URL Decode.

Common use cases

check_circleEncoding an OAuth state object so the authorization server returns it intact
check_circlePassing complex search filters as a single query parameter
check_circleBuilding deep-links with embedded configuration JSON for mobile apps
check_circleSending analytics event payloads in pixel-tracking GET requests
check_circleEncoding webhook callback parameters so the receiver can decode the original event
check_circleStoring canonical JSON state in shareable URLs for dashboards and reports
check_circlePassing GraphQL operation variables through a GET URL for caching
check_circleEncoding signed JSON tokens for stateless URL-based session resumption

JSON URL encode vs base64

Two ways to ship JSON through a URL. Percent-encoding (this tool) keeps the value human-readable in logs and DevTools, makes ad-hoc inspection easy, and inflates each unsafe byte 3x. Base64 (try our JSON to Base64 tool) is opaque, slightly more compact for byte-heavy payloads, and recommended when the JSON contains binary data or when middleware mishandles percent sequences. Base64-url variant uses - and _ instead of + and / for full URL safety.

Need to decode instead?

Reverse the process — turn percent-encoded JSON back into a formatted object — or chain with our other JSON tools.

JSON URL Decode JSON Formatter All JSON Tools

Frequently Asked Questions

Why does JSON need URL encoding before going into a query string?

JSON syntax uses { } [ ] : , and " — most of which are reserved or unsafe in URL components. An ampersand inside a JSON string would terminate the parameter prematurely; a brace would be rejected by strict parsers. Percent-encoding turns every unsafe byte into %XX so the value survives intact through routers, gateways, and proxies.

Should I JSON.stringify first or percent-encode first?

Stringify first, then encode. JSON.stringify produces a UTF-8 string that represents the structure; encodeURIComponent then escapes the bytes that URL components forbid. This tool does both in one click — you paste raw JSON, it validates the input, stringifies the parsed value (compacting whitespace), and encodes the result.

What is the practical URL length limit for embedded JSON?

Most browsers and CDNs cap URLs around 2,048 to 8,192 characters. Because percent-encoding inflates each non-ASCII byte 3x and each reserved character 3x, encoded JSON gets long fast. If your encoded payload exceeds ~1,500 characters, switch to a POST body or store the JSON server-side and pass an opaque ID.

Will the output decode back to identical JSON?

Yes — value-for-value. Whitespace and key order are not preserved (JSON.stringify produces a canonical compact form), but every key, value, type, and Unicode character round-trips exactly. If preserving exact whitespace matters, encode the raw text with the URL Encode tool instead of this one.

Why does this validate the JSON first?

Because invalid JSON in a URL is silently broken — the receiver tries to parse it and fails with a generic 500. Validating before encoding means you find the typo here, not in production. The Error badge surfaces the exact parser message.

Can I use this for OAuth state or PKCE parameters?

Yes for OAuth state — encode the JSON state object once, paste it as the state parameter, and the authorization server returns it untouched. For PKCE code_verifier and code_challenge use the URL Encode tool with raw strings; PKCE uses base64url encoding, not JSON.

How does this handle nested objects and arrays?

Identically to top-level values. JSON.stringify walks the entire tree, the resulting string contains nested braces and brackets, and encodeURIComponent escapes them all. Arbitrarily deep nesting works as long as you stay under URL length limits.

Does this tool send my JSON to a server?

No. Validation, stringification, and encoding all happen in your browser. Open DevTools → Network and click Encode — no requests leave the page. Safe for tokens, IDs, or any sensitive structured data.