How to convert form urlencoded data to JSON

By

Convert an application/x-www-form-urlencoded body to JSON in the browser, then back again. Repeated keys become arrays, and a plus sign becomes a space.

Free toolThis tutorial uses the URL-encoded Form to JSON. It runs in your browser, so open it in another tab and follow along.

An application/x-www-form-urlencoded body is the format a plain HTML form sends. Names and values are joined by =, and pairs are joined by &. A plus sign is a space.

To turn that body into JSON, paste it into the URL-encoded form converter. It runs in the browser. The body is not uploaded. Direction and minify can live in the URL. The body does not.

There is no standard JSON shape for this. The rules below are the ones this page uses.

Convert the sample

  1. Open the URL-encoded form converter.
  2. Click Load sample, or paste your own body.
  3. Leave the direction on Form to JSON.
  4. Read the notes, then copy the JSON or download form.json.

The sample is:

name=Flavio&email=flavio%40flaviocopes.com&city=New+York&topic=astro&topic=node

The JSON is:

{
  "name": "Flavio",
  "email": "[email protected]",
  "city": "New York",
  "topic": [
    "astro",
    "node"
  ]
}

The note is: “topic” appears 2 times, so it is an array.

%40 is @. The plus in New+York is a space. topic appears twice, so it becomes an array, in the order the pairs appeared. A name that appears once stays a string.

Switch to JSON to form and that object comes back as:

name=Flavio&email=flavio%40flaviocopes.com&city=New+York&topic=astro&topic=node

Space is written as +. @ is written as %40. Letters, digits, and * - . _ stay as themselves. ~ is percent-encoded.

Minify JSON is indent=0 in the URL. JSON to form is to=form. Files up to 1 MB open from Open file. The preview cuts at 200,000 characters. Copy and Download include the rest.

How a form body becomes JSON on this pagePaste one application/x-www-form-urlencoded line. The page decodes pairs with URLSearchParams, keeps one value as a string, and groups repeated names into arrays.YesNoYesNoPaste one form bodyAny line break?Show the errorSplit pairs anddecodeName seen once?JSON stringJSON array, in order

How a pair is read

Parsing and serializing use URLSearchParams, which follows the WHATWG URL standard for this media type.

In the bodyIn the JSON
name=FlavioA string
The same name twiceAn array, in order
No =An empty string
A plus signA space
% and two hex digitsThose bytes, read as UTF-8
%ZZLeft as %ZZ
A single leading ?Removed, like a query string
A second ?Stays in the first name
A trailing or doubled &The empty pair is skipped
A name with bracketsOne key, not a nested object

A raw line break is rejected. A newline you meant to send belongs in the body as %0A.

On the way back, a number or a boolean is written with its decimal or word form, and the page says so. null becomes an empty string. An object value is rejected. This page does not build nested objects, and it does not write bracket notation such as user[name].

A one-item array does not round-trip as an array. Read back, it is a string.

The URL parser labels the parts of a full URL. The encode and decode tool is for a single string. Once you have JSON, the JSON formatter pretty-prints it.

How to send urlencoded data using Axios is the request side. Retrieve the POST query parameters using Express is express.urlencoded() and req.body. Get query string values with URLSearchParams is the same parser, used on a query string.

Try the URL-encoded Form to JSON

Convert an application/x-www-form-urlencoded body to JSON and back in the browser. Repeated keys become arrays, and a plus sign is a space.

Open the URL-encoded Form to JSON →

  • URL Parser & Builder: Paste a URL to see every part labeled — protocol, host, path, query params, hash. Edit any piece and copy the result.
  • Encode / Decode: Encode or decode Base64, URL components, and HTML entities in your browser. Unicode-safe Base64 included.
  • JSON Formatter & Validator: Validate, pretty-print, and minify JSON with clear error messages. Runs entirely in your browser.

More tool tutorials →

Want me to talk about your product? You can sponsor this site.