Lifecycle / Form spec & codegen

form.inputcn.json

Describe the form; let the generator write it. A language model is unreliable at nuanced React and very reliable at structured JSON — so ask it for the thing it is good at.

Why a spec beats a prompt

Ask an agent for a React form and there are dozens of ways for the result to be subtly wrong: an invented prop, a float where money should be an integer, a schema that disagrees with the field it validates, a missing label. Every one of them compiles and passes review.

Ask for twenty lines of JSON instead and the only remaining failure is a typo in a field name — which the generator catches, because every key is checked against the interfaces the components actually declare. A prop that does not exist fails at generate time with a suggestion, rather than becoming JSX that silently ignores it.

The shape

{
  "$schema": "https://input-cn.vercel.app/schema/form.json",
  "name": "VendorOnboarding",
  "form": "react-hook-form",
  "fields": [
    { "type": "phone", "name": "phone", "label": "Mobile", "mobileOnly": true },
    { "type": "currency", "name": "budget", "label": "Budget",
      "currency": "GBP", "locale": "en-GB", "positive": true, "max": 1000000 }
  ]
}

The $schema line gives you autocomplete and inline errors in any editor, from the same extracted types.

Generate

npx inputcn init MyForm          # write a starter spec
npx inputcn generate form.inputcn.json
npx inputcn generate spec.json --out src/components
npx inputcn types                # list field types and what each emits

What it handles for you

The generator makes the decisions that are easy to get wrong: which companion schema validates which field, a numeric default for numeric fields, and copying formatting options into the schema — without which a GBP field reports its cap in dollars.

It also knows the two sets are not identical. CardInput has notExpired; cardSchema does not, because the schema validates a card number and expiry is a separate value. Passing it through would produce code that does not compile, so the generator intersects against what each schema really accepts.

One file, several views

The spec is also the save format for anything that edits a form: a visual builder, a block, or an agent. Code, prompt and preview all become views of the same file, which is what keeps them from disagreeing.

Designed to be boring and stable. The format will grow slowly, because a file people have on disk is expensive to change.