HTML Form Generator from JSON

Generating HTML forms from JSON: the declarative form pattern

Building forms by hand is one of the most tedious chores in web development. Every field needs a label, an input, validation, an error placeholder, accessibility wiring, layout decisions. Once your CRUD admin reaches the dozenth screen, the boilerplate becomes a maintenance liability. The declarative form pattern flips the script: describe the data in JSON, let a renderer turn it into markup. This is exactly how admin panels at Strapi, Directus, Payload, and most enterprise low-code platforms work under the hood.

The generator above takes a simple field array and emits ready-to-use HTML. In production, you typically pair this with a full JSON Schema and a library like react-jsonschema-form, uniforms, or JSONForms to get validation, conditional fields, and theming for free. Read on for the patterns, libraries, and trade-offs.

JSON Schema as the source of truth

JSON Schema is the IETF-standard vocabulary for describing JSON data. A schema specifies allowed types, ranges, required properties, regex patterns, enum values, formats, and conditional logic — everything a form needs to validate. A trivial example:

{
  "type": "object",
  "properties": {
    "name":  { "type": "string", "minLength": 2 },
    "email": { "type": "string", "format": "email" },
    "age":   { "type": "integer", "minimum": 0, "maximum": 150 }
  },
  "required": ["name", "email"]
}

The same schema validates the payload on the backend (Node with ajv, Python with jsonschema, Go with gojsonschema) and drives the form on the frontend. That DRY discipline is the killer feature: validation rules cannot drift between client and server because they are literally the same document.

Schema features that drive UI

• enum — renders as a select/dropdown or radio group.
• format: "email" | "uri" | "date" | "date-time" — picks the appropriate input type and HTML5 validation.
• pattern — a regex that the renderer translates to <input pattern="…">.
• minimum, maximum, minLength, maxLength — input bounds.
• oneOf / anyOf — radios, tabs, or discriminated unions.
• if / then / else — conditional fields (show "spouse name" only when "married" is true).
• type: "array", "items": {…} — repeating field group with add/remove buttons.

UI Schema: separating data from presentation

JSON Schema describes the data; it deliberately says nothing about widgets, ordering, or labels. Most form libraries layer a parallel UI Schema on top to control presentation:

// react-jsonschema-form example
const uiSchema = {
  email:    { "ui:widget": "email" },
  bio:      { "ui:widget": "textarea", "ui:options": { rows: 6 } },
  password: { "ui:widget": "password" },
  hidden:   { "ui:widget": "hidden" }
};

This separation keeps the data schema portable (the same schema works for the form, the database, and the API) while letting designers iterate on UI without touching validation logic.

Libraries to render forms from schemas

• react-jsonschema-form (Mozilla) — the canonical React renderer. Mature, themed for Bootstrap/Material/Tailwind, customizable widgets.
• uniforms — React, multi-schema (JSON Schema, GraphQL, Zod, SimpleSchema), heavy theming.
• JSONForms (Eclipse) — React and Angular, enterprise-friendly, strong UI Schema model.
• formily (Alibaba) — React/Vue, used heavily in Chinese enterprise tooling, very capable for complex flows.
• vue-form-generator / vue-jsonschema-form — Vue counterparts.
• Survey.js — focused on surveys/quizzes, includes a visual schema builder.

Validation engines

If you need raw validation without rendering, the leading libraries are:

• ajv — fastest JSON Schema validator for JavaScript; compiles schemas to optimized functions.
• zod — TypeScript-native schema builder; not pure JSON Schema, but interoperable via zod-to-json-schema.
• yup, joi — older JS validators, popular but slower; mostly legacy now.
• valibot — modern, tree-shakeable alternative to zod.

Where this pattern shines (and where it does not)

Wins: CRUD admin panels, headless CMS authoring screens, internal tools, multi-step survey flows, OpenAPI-driven admin where the schema already exists. Limitations: highly custom UX (combobox with async search and avatars, multi-step wizards with cross-field dependencies, design-heavy marketing landing pages). When the visual design dominates the form, hand-coded JSX/components remain easier than fighting the renderer.

FAQ

Can I style the output to match my design system? Yes — every major library supports custom widgets and themes. Tailwind, Material UI, Chakra, Ant Design adapters all exist.

Does it generate Vue components, not React? Yes — vue-jsonschema-form and formily both have first-class Vue 3 support.

Will the same schema validate on the server? Yes — that is the whole point. Run ajv in Node or any JSON Schema validator in your backend language. Single source of truth, no validation drift.

How do conditional fields work? Use if/then/else (Draft 7+) or dependencies/dependentSchemas. The renderer reactively hides or shows fields as values change.

Can I import an OpenAPI spec and get forms? Yes — the components.schemas section of OpenAPI 3 is JSON Schema. Pipe it into any form renderer to bootstrap an admin panel against your API.