JSON Schema to HTML Form Generator

JSON Schema

Schema (draft 2020-12, 2019-09 or 7)

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "Delivery booking",
  "type": "object",
  "required": ["name", "email", "postcode", "date", "items"],
  "properties": {
    "name": {"type": "string", "title": "Full name", "minLength": 2},
    "email": {"type": "string", "format": "email", "title": "Email address", "description": "We'll send the delivery slot here."},
    "phone": {"type": "string", "title": "Phone number", "pattern": "^\\+?[0-9 ]{10,15}$"},
    "postcode": {"type": "string", "title": "Postcode", "pattern": "^[A-Za-z]{1,2}[0-9][0-9A-Za-z]? ?[0-9][A-Za-z]{2}$", "examples": ["BD23 1AB"]},
    "date": {"type": "string", "format": "date", "title": "Delivery date"},
    "slot": {"title": "Time slot", "oneOf": [{"const": "am", "title": "Morning (8am to 12pm)"}, {"const": "pm", "title": "Afternoon (12pm to 5pm)"}], "default": "am"},
    "items": {"type": "array", "title": "Items", "minItems": 1, "items": {"$ref": "#/$defs/item"}},
    "assembly": {"type": "boolean", "title": "Assemble on delivery", "default": false},
    "access": {"type": "array", "title": "Access", "uniqueItems": true, "items": {"enum": ["Stairs", "Narrow door", "Parking restrictions"]}},
    "notes": {"type": "string", "title": "Notes for the driver", "maxLength": 500}
  },
  "$defs": {
    "item": {"type": "object", "title": "Item", "required": ["sku", "qty"], "properties": {
      "sku": {"type": "string", "title": "Product", "enum": ["MAL-180", "SET-01", "WHA-160"]},
      "qty": {"type": "integer", "title": "Quantity", "minimum": 1, "maximum": 10, "default": 1}}}
  }
}

Supports objects, arrays, enums, oneOf/anyOf of consts, local $ref and allOf, formats (date, date-time, time, email, uri, password), defaults, examples, readOnly and descriptions. Free-form additionalProperties and if/then/else are validated but not drawn.

Form

Data

Form data as JSON

HTML

Form markup to copy

What it does

Builds an accessible HTML form from a JSON Schema, validates what you type against the schema as you go, and gives you the data as JSON and the form's markup.

Inputs chosen from type, format and enum: text, number, date, email, URL, password, select, checkbox and textarea
Nested objects as fieldsets, arrays with add and remove, and enum arrays as checkboxes
Local $ref, allOf, oneOf of consts, defaults, examples and descriptions
Live validation with the same engine as the JSON Schema Validator

Private by design

Everything happens in your browser. Nothing you type, paste or upload is sent anywhere, and it keeps working offline once the page has loaded.

What you get

A live form, the data as JSON, errors linked to fields and HTML markup to copy, with a Copy and a Download button on every result.

JSON Schema
Forms
Accessibility

Why it matters

A JSON Schema already says what a form should collect: which fields, of what type, which are required, and the limits on each. Writing the form by hand repeats all of that and drifts out of step with the schema the API actually checks.

This builder reads the schema and draws the form, choosing a sensible input for each field, then validates the data against the same schema as you type. Errors appear beside the field and in a summary at the top that links to each one. The markup uses real labels, fieldsets, hints and aria-describedby, so it's a good starting point for an accessible form.

How to use it

Paste your JSON Schema.
Fill in the form to try it.
Read the errors and the JSON the form produces.
Copy the HTML if you want to build on it.

FAQ

Which JSON Schema versions does it support?

Draft 2020-12, 2019-09 and draft 7 keywords for drawing the form, and the full validator from the JSON Schema Validator for checking it.

How does it choose the inputs?

From the type, format and enum of each property: a date format becomes a date picker, an enum becomes a select, a boolean a checkbox and so on.

Is the form accessible?

Every field has a label, hints and errors are linked with aria-describedby, groups use fieldset and legend, and errors are listed in a summary linking to each field.

Is anything sent anywhere?

No. The form is built and checked in your browser.

Work with me

Want a site that gets these right?

I build fast, accessible websites and web apps that pass these checks from day one. Tell me about your project and I'll reply personally with honest next steps.

Start a project What I do