---
title: "JSON to Form Generator"
description: "Turn a JSON list of fields into form code in one of four skins: plain HTML5, Tailwind CSS JSX, Bootstrap 5 HTML or a typed React component. Pick the skin, paste the JSON, copy or download the code. Runs in your browser; nothing is uploaded."
url: https://findutils.com/developers/json-to-form/
category: developers
---

# JSON to Form Generator

Turn a JSON list of fields into form code in one of four skins: plain HTML5, Tailwind CSS JSX, Bootstrap 5 HTML or a typed React component. Pick the skin, paste the JSON, copy or download the code. Runs in your browser; nothing is uploaded.

**Use this tool:** [JSON to Form Generator](https://findutils.com/developers/json-to-form/)

## Programmatic access

- REST id `json-to-html-form`: POST https://api.findutils.com/api/tools/json-to-html-form/execute (reference: https://findutils.com/api/json-to-html-form/)
- MCP tool `json_to_html_form` on https://mcp.findutils.com (reference: https://findutils.com/mcp/json-to-html-form/)

## 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.

## 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.

## Related Tools

- [JSON Schema Form Builder](https://findutils.com/developers/json-schema-form-builder/)
- [Form to JSON Schema](https://findutils.com/developers/form-to-json-schema/)
- [JSON Formatter](https://findutils.com/developers/json-formatter/)
- [JSON Schema Validator](https://findutils.com/developers/json-schema-validator/)
- [HTML Formatter](https://findutils.com/developers/html-formatter/)
- [JSON to TypeScript](https://findutils.com/developers/json-to-typescript/)