Developer tooling

JSON to Form Generator

Paste a JSON Schema or a plain sample object and get a working HTML form back, with field types inferred automatically and ready to copy.

Detected: plain sample JSON (object).

Generated HTML


Parsing and form generation happen locally — nothing you paste is sent anywhere.

📋

Schema or sample, either works

Paste a real JSON Schema or just a representative sample object — the parser figures out which one it is.

📋

Six field types inferred

Text, number, checkbox, select, nested fieldsets and repeatable rows, chosen automatically from your data.

Working repeatable rows

Arrays get a real Add another button, both in the live preview and in the copied HTML.

How to use the JSON to form generator

Paste your JSON, check the preview, then copy the markup.

  1. Paste JSON or a schemaDrop in a JSON Schema object or any sample JSON value that represents your data shape.
  2. Check the live previewThe form on the right updates as you type, with real inputs you can click and fill in.
  3. Copy the HTMLGrab the generated markup and paste it into your project; repeatable sections keep working out of the box.

How field types are inferred

When the pasted JSON has a top-level "properties" key or a top-level "type" key, it is treated as a JSON Schema and each property's declared type and enum values drive the output. Otherwise the parser treats the JSON as a plain example value and infers a type directly from each value it finds: a string becomes text, a number becomes a number input, and so on. Either path produces the same kind of form, so you can start from whichever is easier to get your hands on.

Strings and numbers

Plain strings become text inputs and numbers become number inputs, labelled from the property name.

Booleans and enums

Booleans become checkboxes. A schema property with an enum list becomes a select dropdown of those values.

Nested objects

An object value becomes its own fieldset, with its own properties rendered inside as regular fields.

Arrays

Arrays of plain values or of objects both become a repeatable block with a working Add another button.

JSON to form generator FAQ

Questions about detection, nesting and the copied markup.

How does the tool decide between JSON Schema and a plain sample?

If the pasted JSON is an object with a top-level "properties" key or a top-level "type" key, it is treated as a JSON Schema. Otherwise it is treated as a plain sample value and field types are inferred directly from the JavaScript type of each value.

What happens with nested objects and arrays?

A nested object becomes its own fieldset with its properties inside. An array of plain values (strings, numbers or booleans) becomes a repeatable row of one input with an Add another button.

Does an array of objects generate multiple rows automatically?

It generates one repeatable fieldset shaped like the first object in the array (or the schema's items definition), with an Add another button that clones the whole fieldset for additional entries.

Can I use the generated HTML as-is in my project?

Yes. The copied markup is plain, dependency-free HTML with inline field names, ready to paste into a page. If it uses repeatable rows, a small inline script for the Add another button is included automatically.

Is my pasted JSON sent anywhere?

No. Parsing, type inference and form generation all happen locally in your browser. Nothing you paste is uploaded or stored remotely.