Gerador de Formulário HTML a partir de JSON

Gerando formulários HTML a partir de JSON: o padrão de form declarativo

Construir formulários à mão é uma das tarefas mais tediosas do desenvolvimento web. Cada campo precisa de label, input, validação, placeholder de erro, acessibilidade, decisões de layout. Quando o admin do CRUD chega na décima segunda tela, o boilerplate vira passivo de manutenção. O padrão de form declarativo inverte o jogo: descreva os dados em JSON e deixe um renderizador gerar a marcação. É exatamente assim que admins do Strapi, Directus, Payload e a maioria das plataformas low-code empresariais funcionam por baixo dos panos.

O gerador acima recebe um array simples de campos e produz HTML pronto. Em produção, você normalmente combina isso com um JSON Schema completo e uma biblioteca como react-jsonschema-form, uniforms ou JSONForms para ganhar validação, campos condicionais e tematização de graça. Adiante, os padrões, bibliotecas e trade-offs.

JSON Schema como fonte da verdade

JSON Schema é o vocabulário padrão IETF para descrever dados JSON. Um schema especifica tipos permitidos, intervalos, propriedades obrigatórias, padrões regex, valores de enum, formatos e lógica condicional — tudo que um formulário precisa para validar. Exemplo trivial:

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

O mesmo schema valida o payload no backend (Node com ajv, Python com jsonschema, Go com gojsonschema) e alimenta o formulário no frontend. Essa disciplina DRY é a feature matadora: as regras de validação não podem divergir entre cliente e servidor porque são literalmente o mesmo documento.

Features do schema que controlam a UI

• enum — renderiza como select/dropdown ou radio group.
• format: "email" | "uri" | "date" | "date-time" — escolhe o tipo de input certo e a validação HTML5.
• pattern — regex que o renderizador traduz em <input pattern="…">.
• minimum, maximum, minLength, maxLength — limites do input.
• oneOf / anyOf — radios, abas ou unions discriminadas.
• if / then / else — campos condicionais (mostrar "nome do cônjuge" só quando "casado" for true).
• type: "array", "items": {…} — grupo de campos repetitivo com botões adicionar/remover.

UI Schema: separando dados de apresentação

JSON Schema descreve os dados; deliberadamente não diz nada sobre widgets, ordem ou rótulos. A maioria das libs sobrepõe um UI Schema paralelo para controlar a apresentação:

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

Essa separação mantém o schema de dados portátil (o mesmo schema vale para o form, o banco e a API) enquanto designers iteram na UI sem mexer na lógica de validação.

Bibliotecas para renderizar form a partir de schema

• react-jsonschema-form (Mozilla) — o renderizador React canônico. Maduro, tema para Bootstrap/Material/Tailwind, widgets customizáveis.
• uniforms — React, multi-schema (JSON Schema, GraphQL, Zod, SimpleSchema), forte em theming.
• JSONForms (Eclipse) — React e Angular, enterprise-friendly, UI Schema bem modelado.
• formily (Alibaba) — React/Vue, muito usado em ferramentas empresariais chinesas, dá conta de fluxos complexos.
• vue-form-generator / vue-jsonschema-form — contrapartes Vue.
• Survey.js — focado em pesquisas/quizzes, inclui builder visual de schema.

Engines de validação

Se você só precisa de validação sem renderização, as libs líderes são:

• ajv — validador JSON Schema mais rápido em JavaScript; compila schemas em funções otimizadas.
• zod — schema builder nativo de TypeScript; não é JSON Schema puro, mas interopera via zod-to-json-schema.
• yup, joi — validadores JS antigos, populares mas mais lentos; hoje mais legado.
• valibot — alternativa moderna e tree-shakeable ao zod.

Onde esse padrão brilha (e onde não)

Wins: admins de CRUD, telas de autoria de headless CMS, ferramentas internas, fluxos de pesquisa multi-step, admin baseado em OpenAPI quando o schema já existe. Limitações: UX altamente custom (combobox com busca assíncrona e avatares, wizards multi-step com dependências entre campos, landings de marketing dominadas pelo design). Quando o visual domina o formulário, JSX/componentes à mão continuam mais fáceis do que brigar com o renderizador.

FAQ

Posso estilizar a saída no meu design system? Sim — todas as libs maiores suportam widgets customizados e temas. Adapters para Tailwind, Material UI, Chakra e Ant Design existem.

Gera componente Vue, não React? Sim — vue-jsonschema-form e formily têm suporte first-class a Vue 3.

O mesmo schema valida no servidor? Sim — é justamente o ponto. Rode ajv no Node ou qualquer validador JSON Schema na sua linguagem de backend. Fonte única, sem drift de validação.

Como funcionam campos condicionais? Use if/then/else (Draft 7+) ou dependencies/dependentSchemas. O renderizador esconde ou mostra campos reativamente conforme os valores mudam.

Dá pra importar uma spec OpenAPI e gerar form? Sim — a seção components.schemas de OpenAPI 3 é JSON Schema. Mande para qualquer renderizador de form e tenha um admin contra sua API de cara.