Skip to main content
CuteJSON
↑↓ Navigate Enter Select Esc Close

How to URL encode JSON for a query string

Published 2 min read By Akash Kinkar Pandey

A URL cannot carry a JSON document as it stands. Braces, quotes, spaces and anything above ASCII all have to be percent encoded before they can go into a query string or a path segment.

Using the JSON URL encoder and decoder

Choose Encode or Decode, paste your document, and press Convert. Encoding follows the same rule encodeURIComponent does: every UTF-8 byte outside a small safe set becomes a %XX escape.

{"q":"a b+c","clef":"𝄞"}

encodes to %7B%22q%22%3A%22a%20b%2Bc%22%2C%22clef%22%3A%22%F0%9D%84%9E%22%7D, matching what encodeURIComponent produces for the same document exactly, including the musical symbol 𝄞 as four separate %XX escapes, since it takes four bytes in UTF-8.

The single option, and why it exists

Turn on “Space is a plus sign” and the same document encodes the space as + instead of %20, while the literal + already in the data still becomes %2B. That distinction is the entire reason this is a toggle rather than an assumption: a URL’s query string and a form submission disagree about what a bare + means. In a form body, + means a space. In every other part of a URL, + is a literal plus sign. Guessing wrong turns every plus in your data into a space, or leaves every encoded space as a literal plus, which is one of the most common ways an encoded document arrives silently corrupted on the other end.

Decoding, and why it happens in one pass

Decoding gathers every percent-escaped byte across the whole string and decodes them as UTF-8 once, at the end, rather than one escape at a time. A multi-byte character like an emoji arrives as several separate %XX escapes in sequence, so decoding each one individually and treating it as its own character would turn one emoji into several replacement characters. Decoding once at the end is what keeps multi-byte text intact, and it also lets bytes that are not valid UTF-8 be reported as their own kind of failure, distinct from a percent sign with no valid hex digits after it, which decodeURIComponent cannot tell apart on its own.

Round tripping

Encoding the example above with “Space is a plus sign” on and then decoding it back returns the exact original document, "a b+c" and the musical symbol both intact, which is the real test that the plus and space handling agree with each other in both directions.

Back to all posts