How to convert form urlencoded data to JSON
By Flavio
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
- Open the URL-encoded form converter.
- Click Load sample, or paste your own body.
- Leave the direction on Form to JSON.
- 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": "flavio@flaviocopes.com",
"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 pair is read
Parsing and serializing use URLSearchParams, which follows the WHATWG URL standard for this media type.
| In the body | In the JSON |
|---|---|
name=Flavio | A string |
| The same name twice | An array, in order |
No = | An empty string |
| A plus sign | A space |
% and two hex digits | Those bytes, read as UTF-8 |
%ZZ | Left 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 brackets | One 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 →
Related tools
- 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.
Want me to talk about your product? You can sponsor this site.