JSON to Form Generator

Output skin

Plain HTML5 markup with native validation attributes and generic class names (form-group, checkbox-label, radio-label) you style yourself. Downloads as form.html.

JSON Schema

HTML Output

Generated HTML form will appear here..

JSON Schema Reference

Define your form structure using the following JSON schema:

{
  "formId": "string",
  "formClass": "string",
  "method": "GET" | "POST",
  "action": "/submit-url",
  "submitText": "Submit",
  "fields": [
    {
      "name": "fieldName",
      "type": "text|email|number|...",
      "label": "Field Label",
      "placeholder": "Placeholder text",
      "required": true,
      "options": [{ "value": "", "label": "" }]
    }
  ]
}

Supported field types: text, email, number, tel, url, password, textarea, select, checkbox, radio, date, time, datetime-local, file

How to Generate a Form from JSON

Pick an output skin

Choose HTML, Tailwind, Bootstrap or React above the editor. The choice is kept in the address bar as ?skin=, so a link opens the same skin.
Paste or load the JSON

Paste an object with a fields array, or press Load Sample. Each field needs name, type and label; add placeholder, required, options, rows, min, max or the other supported properties as needed.
Add the skin's own options

Top-level keys shared by all skins are method, action and submitText. HTML also reads formId and formClass, Bootstrap reads formId, layout and a per-field helpText, React reads componentName, useHooks and a per-field defaultValue.
Copy or download the code

The code updates as you type. Copy it to the clipboard or download it as a file, then wire it to your backend.

Common Use Cases

Scaffolding contact and sign-up forms

Describe the fields once and get a working first version of the markup instead of typing labels, ids and attributes by hand.

Forms stored as data

When a CMS or database already holds a field list, reshape it into this format and generate the form for the front end you use.

Comparing stacks

Switch the skin to see the same form as plain HTML, Tailwind JSX, Bootstrap 5 and a React component before choosing what to build with.

Teaching form markup

Show how one field becomes a labelled input, a select with options or a radio group in each framework's conventions.

Why Generate Form Code from JSON?

Every form repeats the same work: a label for each input, the right input type, the validation attributes, the select options, the submit button. When the field list already exists as data (a CMS record, an API contract, a spreadsheet), writing that markup by hand is copying. This page reads one JSON object with a fields array and writes the form for the stack you use: plain HTML, Tailwind JSX, Bootstrap 5 or a React component. The four skins share one field format, so the same list can be tried in each. Everything runs in your browser tab.

The JSON to Form Generator turns a JSON object that lists form fields into form code, in the output skin you pick: HTML, Tailwind, Bootstrap or React. Every skin reads the same field format: an object with a fields array, where each field has a name, a type and a label, plus optional placeholder, required, options for selects and radio groups, and rows for textareas. Field types are text, email, number, tel, url, password, textarea, select, checkbox, radio, date, time, datetime-local and file.

The HTML skin writes plain HTML5 with label/for pairs and native validation attributes (required, min, max, minlength, maxlength, pattern, accept), wrapped in generic classes you style yourself. The Tailwind skin writes JSX with Tailwind utility classes, so it pastes into a React, Next.js or Astro component. The Bootstrap skin writes Bootstrap 5 HTML with form-control, form-select and form-check, in a vertical, horizontal (two columns from the md breakpoint) or floating-label layout, with optional help text under a field. The React skin writes a TypeScript component with a typed state object, one change handler and an async submit handler that posts JSON to your action URL.

The code is generated in your browser tab and nothing is uploaded. To go the other way, the Form to JSON Schema tool reads an existing HTML form, and the JSON Schema Form Builder lets you build the field list by pointing and clicking. The same four generators are also callable from code: see the JSON to HTML Form API reference.

How it compares

Visual form builders such as Google Forms or Typeform host the form for you and keep it inside their service. Snippet tools and Emmet in an editor save keystrokes but still leave you writing each field. This page sits between them: you describe the fields as data and get source code you own and host yourself, in the markup style of your stack. It does not host forms, collect submissions or validate on a server; the output is the front-end markup, and handling what it posts is up to your backend.

Tips for Better Results

Use the same name values your backend expects, so the generated form posts the field names you already handle.
Mark mandatory fields with required: true; every skin turns it into the native required attribute and marks the label with an asterisk (checkbox labels excepted).
Give select fields a first option with an empty value, so a required select cannot be submitted untouched.
In the Bootstrap skin, floating labels apply to text, email, password, tel, url and textarea fields; other types fall back to the stacked layout.
The Tailwind skin's classes follow the pattern used with the official @tailwindcss/forms plugin; add that plugin if inputs render without a border.
Test the generated form in your own page before shipping it; the output is a starting point, not a finished design.

Frequently Asked Questions

What JSON format does the generator expect?

An object with a fields array. Each field has name, type and label, and may add placeholder, required, options (an array of value and label pairs for select and radio), rows, min, max, minLength, maxLength, pattern and accept. Top-level method, action and submitText are optional in every skin.

Which output skin should I pick?

HTML for a plain page or a template language, Tailwind if your project already uses Tailwind with JSX, Bootstrap for a Bootstrap 5 site, and React for a controlled TypeScript component with state and a submit handler. The field list is the same for all four, so you can switch and compare.

What happened to the separate JSON to HTML, Tailwind, Bootstrap and React form pages?

They are the four skins of this page. Their old addresses redirect here with the matching ?skin= value, so an old link or bookmark opens the same generator.

Does the Tailwind skin output HTML or JSX?

JSX: it uses className and htmlFor, so it belongs in a React, Next.js, Astro or other JSX component. The classes use an indigo accent you can search and replace, and they follow the pattern used with the @tailwindcss/forms plugin. For plain HTML, use the HTML skin.

Which Bootstrap layouts are supported?

Set layout to vertical (stacked, the default), horizontal (fields in two columns from the md breakpoint, one column on small screens) or floating (floating labels on text, email, password, tel, url and textarea fields). Add helpText to a field to render a form-text line under it. The output uses Bootstrap 5 class names, so include Bootstrap 5 CSS on the page.

Which validation attributes does each skin write?

All four write required. The HTML, Tailwind and React skins also write min, max, minLength, maxLength and pattern on inputs. The Bootstrap skin writes required, min and max. None of the skins adds JavaScript validation or error messages; add those in your own code.

What does the React skin generate?

A TypeScript function component named by componentName (default MyForm): a FormData interface, one useState object holding every field, a handleChange that handles checkboxes, and an async handleSubmit that sends the data as JSON with fetch when you set action, or logs it when you do not. Set useHooks to false for a plain form without state. The component is unstyled.

Is my JSON sent to a server?

No. The form code is generated in your browser tab and is not uploaded. No account is needed.

Can I call the generators from code?

Yes. The four generators are available over the REST API and the MCP server as json-to-html-form, json-to-tailwind-form, json-to-bootstrap-form and json-to-react-form (json_to_html_form and so on over MCP). The API reference pages list each one's arguments.

How is this different from the JSON Schema Form Builder and Form to JSON Schema?

This page turns a field list into code. The JSON Schema Form Builder is a visual editor that helps you build the field list, and Form to JSON Schema goes the opposite way, reading an existing HTML form and describing it as JSON.

Run it from code

$ curl -X POST \
  api.findutils.com/api/tools/json-to-html-form/execute \
  -d '{"schema":"{\"formId\":\"f\",\"fields\":[{\"name\":\"email\",\"type\":\"email\",\"label\":\"Email\",\"required\":true}]}"}'

$ claude mcp add findutils \
  --transport http https://mcp.findutils.com/
# then call findutils:json_to_html_form

API reference Add to Claude